@layer pages {
  /* Home gate, dual-split (restored 2026-10-03 from the launch homepage Tim approved).
     Two plates split on a diagonal seam: GROWTH on the left, HIRE on the right. Join Action Force and
     Login live in the header. The headline is a solid skewed block that straddles the header's bottom edge.
     The rejected three-panel version is preserved at /alt/home-three-panel/ (own stylesheet). */
  .gate-page {
    min-height: 100svh;
    height: 100svh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow-x: hidden;
    background: var(--af-ground);
  }

  .gate-page .skip-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Header bar: full width, solid white, hairline underneath. */
  .gate-header {
    position: relative;
    z-index: 12; /* above .gate-stage (11): the lockup overhangs the bar onto the hero */
    width: 100%;
    min-height: 72px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--af-line);
  }

  /* 1018: controls end on the hero plate gutter (same clamp as .gate-route padding) so JOIN sits over the HIRE plate edge and the lockup over the GROWTH plate edge. Phones keep the 16/12px gutters from launch-intake.css. */
  @media (min-width: 761px) {
    body.gate-page .gate-header { padding-inline: clamp(20px, 2.2vw, 32px) !important; }
  }

  .gate-header .gate-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  /* Header buttons: square corners, 44px tall. Join = brand red fill, Login = secondary outline. */
  .gate-header .gate-join,
  .gate-header .gate-login {
    min-height: 44px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--af-ink);
    border-radius: 0;
    font-family: var(--af-font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }

  .gate-header .gate-login {
    color: var(--af-ink);
    background: #fff;
  }

  .gate-header .gate-login:hover {
    color: #fff;
    background: var(--af-ink);
  }

  .gate-header .gate-join {
    color: #fff;
    background: var(--af-red);
    border-color: var(--af-red);
  }

  .gate-header .gate-join:hover {
    background: #a81f1f;
    border-color: #a81f1f;
  }

  .gate-header .gate-join:focus-visible,
  .gate-header .gate-login:focus-visible,
  .gate-header .gate-social a:focus-visible {
    outline: 3px solid var(--af-focus);
    outline-offset: 2px;
  }

  .gate-header .gate-social,
  .gate-header .gate-social a {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gate-header .gate-social a {
    width: 44px;
    height: 44px;
    color: var(--af-ink);
    border: 1px solid transparent;
    border-radius: 50%;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
  }

  .gate-header .gate-social svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
  }

  .gate-header .gate-social a:hover,
  .gate-header .gate-social a:focus-visible {
    color: #fff;
    background: var(--af-ink);
    border-color: var(--af-ink);
  }

  /* Stage sits above the header so the headline block can straddle the header's bottom edge.
     The image is clipped by .gate-visual; the plates are clipped by their own clip-path. */
  .gate-page .gate-stage {
    position: relative;
    z-index: 11;
    min-height: 0;
    overflow: visible;
    isolation: isolate;
    background: #10141a;
  }

  .gate-visual {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    background: #10141a;
  }

  .gate-page .gate-art {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 28%;
    filter: saturate(.94) contrast(1.04);
  }

  .gate-page .gate-stage::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: none;
    box-shadow: inset 0 0 0 1px rgba(8, 12, 17, .24), inset 0 -88px 100px rgba(8, 12, 17, .14);
  }

  /* Headline: SOLID skewed block (no alpha, no shadow, no gradient), centred on the header's bottom edge.
     Top edge = logo overhang + 12px below the header bottom edge at every width: the block never overlaps the logo or a header control. */
  .gate-page .gate-copy {
    position: absolute;
    z-index: 5;
    top: calc(var(--af-logo-overhang, 0px) + 12px); /* clears the hanging lockup */
    left: 50%;
    width: max-content;
    max-width: calc(100% - 48px);
    padding: 15px 26px 17px;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    background: #111318;
    border: 0;
    box-shadow: none;
    clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
    pointer-events: none;
  }

  .gate-page .gate-copy::before,
  .gate-page .gate-route__content::before {
    content: none;
  }

  .gate-page .gate-copy h1 {
    max-width: none;
    margin: 0 auto;
    color: #fff;
    font-family: var(--af-font-body);
    font-size: clamp(30px, calc((100vw - 640px) / 13.7), 62px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .94;
    text-shadow: none;
    white-space: nowrap;
  }

  .gate-page .gate-copy .gate-demand { color: var(--af-red); }

  /* Variant for Tim to compare: solid white block, black text, red "demand". Not used by default.
     Apply by adding .gate-page--headline-white to <body>. */
  .gate-page--headline-white .gate-copy { background: #fff; }
  .gate-page--headline-white .gate-copy h1 { color: #111318; }

  .gate-page .gate-routes {
    position: absolute;
    z-index: 2;
    inset: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .gate-page .gate-route,
  .gate-page .gate-route:first-child,
  .gate-page .gate-route:last-child {
    position: absolute;
    z-index: 1;
    inset: 0;
    min-width: 0;
    min-height: 100%;
    display: flex;
    align-items: flex-end;
    margin: 0;
    padding: clamp(20px, 2.2vw, 32px);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* LEFT = growth, RIGHT = hire. */
  .gate-page .gate-route[data-route="growth"] {
    justify-content: flex-start;
    clip-path: polygon(0 0, 58% 0, 49% 100%, 0 100%);
  }

  .gate-page .gate-route[data-route="hire"] {
    justify-content: flex-end;
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 49% 100%);
  }

  .gate-page .gate-route::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(8, 12, 17, 0);
    transition: background-color 180ms ease;
  }

  .gate-page .gate-route:hover::before,
  .gate-page .gate-route:focus-visible::before {
    background: rgba(8, 12, 17, .15);
  }

  .gate-page .gate-route:focus-visible {
    outline: none;
  }

  .gate-page .gate-route__content {
    position: relative;
    width: min(40vw, 540px);
    max-width: none;
    height: 184px;
    min-height: 184px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title arrow"
      "detail arrow";
    align-content: center;
    column-gap: 16px;
    padding: 19px clamp(22px, 2.7vw, 38px) 21px;
    color: #fff;
    text-align: left;
    background: rgba(10, 14, 20, .86);
    border: 0;
    border-left: 4px solid var(--af-red);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
    transition: transform 180ms ease, background-color 180ms ease;
  }

  .gate-page .gate-route[data-route="hire"] .gate-route__content {
    text-align: right;
    border-left: 0;
    border-right: 4px solid rgba(255, 255, 255, .88);
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  }

  .gate-page .gate-route:hover .gate-route__content,
  .gate-page .gate-route:focus-visible .gate-route__content {
    transform: translateY(-4px);
    background: rgba(10, 14, 20, .94);
  }

  .gate-page .gate-route:focus-visible .gate-route__content {
    box-shadow: inset 0 0 0 3px #fff;
  }

  .gate-page .gate-route__label {
    display: contents;
  }

  .gate-route__title {
    grid-area: title;
    max-width: 414px;
    font-family: var(--af-font-body);
    font-size: clamp(25px, 2.4vw, 36px);
    font-weight: 700;
    letter-spacing: -.042em;
    line-height: .96;
    text-wrap: balance;
  }

  .gate-page .gate-route__detail {
    grid-area: detail;
    max-width: 440px; /* beats launch-intake.css's .gate-page .gate-route__detail { max-width: 330px } */
    margin-top: 8px;
    color: #dce2e9;
    font-size: var(--af-14);
    font-weight: 600;
    line-height: 1.35;
    text-wrap: wrap;
  }

  .gate-route__arrow {
    grid-area: arrow;
    align-self: center;
    font-family: var(--af-font-body);
    font-size: clamp(27px, 2.7vw, 38px);
    line-height: 1;
    transition: transform 180ms ease;
  }

  .gate-route:hover .gate-route__arrow,
  .gate-route:focus-visible .gate-route__arrow {
    transform: translateX(7px);
  }

  .gate-seam {
    position: absolute;
    z-index: 3;
    top: -3%;
    left: 57.5%;
    width: 3px;
    height: 108%;
    pointer-events: none;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 5px rgba(10, 14, 20, .34);
    transform: rotate(10.5deg);
    transform-origin: top center;
    transition: width 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }

  .gate-route[data-route="growth"]:hover ~ .gate-seam,
  .gate-route[data-route="growth"]:focus-visible ~ .gate-seam {
    width: 4px;
    background: var(--af-red);
    box-shadow: 0 0 0 7px rgba(209, 40, 40, .2);
  }

  .gate-route[data-route="hire"]:hover ~ .gate-seam,
  .gate-route[data-route="hire"]:focus-visible ~ .gate-seam {
    width: 4px;
    background: #fff;
    box-shadow: 0 0 0 7px rgba(10, 14, 20, .28);
  }

  .gate-page > .credibility-footer {
    width: min(calc(100% - 40px), 1320px);
    min-height: 50px;
    padding: 4px 0;
  }

  /* X / Twitter link lives in the footer (not the header): header = Login + Join only, so no square icon
     button can read as a close control. Text label + glyph, 44px target, link styling like Privacy / Terms. */
  .gate-page .footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 18px;
  }

  .gate-page .footer-x {
    gap: 8px;
    color: inherit;
    text-decoration: underline;
  }

  .gate-page .footer-x svg {
    flex: none;
    width: 14px;
    height: 14px;
    fill: currentColor;
  }

  /* Narrower laptops: the headline can no longer clear the header buttons, so it drops to a shallow
     overlap of the header's bottom edge instead of half. */
  @media (max-width: 1279px) {
    .gate-page .gate-copy {
      left: 50%;
      transform: translateX(-50%);
    }
    .gate-page .gate-copy h1 { font-size: clamp(34px, 4.6vw, 54px); }
    .gate-header { min-height: 76px; }
  }

  @media (max-width: 760px) {
    .gate-page {
      height: auto;
      min-height: 100svh;
      grid-template-rows: auto auto 1fr; /* spare viewport height goes to the footer row, not the header */
    }

    .gate-page .gate-header {
      width: 100%;
      min-height: 64px !important; /* unlayered rules in actionforce.css otherwise grow the bar to 70px at 390 */
      height: 64px !important;
      padding: 0 12px 0 14px;
      gap: 6px;
    }

    .gate-header .gate-join,
    .gate-header .gate-login {
      min-height: 44px;
      padding: 0 11px;
      letter-spacing: 0;
    }

    .gate-header .gate-actions { gap: 4px; }
    .gate-header .gate-social a { width: 40px; height: 40px; }

    .gate-page .gate-stage {
      min-height: 700px !important;
      padding: 0 !important;
    }

    .gate-page .gate-visual {
      inset: 0 !important;
      background: #dfe6ec;
    }

    .gate-page .gate-art {
      position: absolute !important;
      top: 100px !important;
      left: 50% !important;
      width: 560px !important;
      height: auto !important;
      max-width: none !important;
      transform: translateX(-50%) !important;
      object-fit: contain !important;
      object-position: 50% 50%;
      filter: saturate(.93) contrast(1.03) brightness(.95);
    }

    .gate-page .gate-stage::after {
      background: none !important;
      box-shadow: inset 0 0 0 1px rgba(8, 12, 17, .28);
    }

    /* Header is 64px with 40px buttons (12px above/below). The block is full-width on a phone, so it can
       only reach 8px up into the bar without covering the buttons (4px clearance); it does not reach half. */
    .gate-page .gate-copy {
      position: absolute !important;
      top: calc(var(--af-logo-overhang, 0px) + 12px) !important;
      left: 50% !important;
      width: calc(100% - 24px) !important;
      max-width: none;
      padding: 14px 18px 16px;
      transform: translateX(-50%) !important;
      text-align: left;
      clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
    }

    .gate-page .gate-copy h1 {
      max-width: 340px;
      margin: 0;
      font-size: clamp(32px, 9.4vw, 37px);
      line-height: .92;
      white-space: normal;
      text-wrap: balance;
    }

    .gate-page .gate-routes {
      position: absolute !important;
      inset: auto 12px 14px !important;
      min-height: 274px !important;
      height: 274px !important;
      display: grid;
      grid-template-rows: repeat(2, 131px);
      gap: 12px !important;
      margin: 0 !important;
      overflow: visible;
    }

    .gate-page .gate-route,
    .gate-page .gate-route:first-child,
    .gate-page .gate-route:last-child {
      position: relative !important;
      inset: auto !important;
      min-height: 131px !important;
      height: 131px !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
    }

    .gate-page .gate-route[data-route="growth"] {
      z-index: 2;
      clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%) !important;
    }

    .gate-page .gate-route[data-route="hire"] {
      z-index: 1;
      margin: 0 !important;
      padding: 0 !important;
      clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%) !important;
    }

    /* Stacked: both plates read left-aligned, growth first, hire second. */
    .gate-page .gate-route__content,
    .gate-page .gate-route[data-route="hire"] .gate-route__content {
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      min-height: 0 !important;
      display: grid !important; /* actionforce.css has an unlayered mobile display:flex that would stack the arrow under the title */
      grid-template-columns: minmax(0, 1fr) 28px;
      column-gap: 8px;
      grid-template-areas:
        "title arrow"
        "detail arrow";
      justify-items: stretch;
      align-content: center;
      margin: 0 !important;
      padding: 13px 14px 14px !important;
      color: #fff !important;
      text-align: left !important;
      background: rgba(10, 14, 20, .9) !important;
      border: 0 !important;
      border-left: 4px solid var(--af-red) !important;
      border-radius: 0 !important;
      clip-path: none !important;
    }

    .gate-page .gate-route[data-route="hire"] .gate-route__content {
      border-left-color: rgba(255, 255, 255, .88) !important;
      border-right: 0 !important;
    }

    .gate-page .gate-route__label {
      display: contents !important;
    }

    .gate-route__title {
      max-width: 300px;
      font-size: clamp(18px, 5.4vw, 22px);
      line-height: .95;
    }

    .gate-route__detail {
      max-width: 318px;
      margin-top: 5px;
      font-size: var(--af-125);
      line-height: 1.18;
    }

    .gate-route__arrow {
      font-size: var(--af-28);
    }

    .gate-seam {
      display: none !important;
    }

    .gate-page > .credibility-footer {
      min-height: 60px;
      flex-direction: row !important;
      align-items: center !important;
      gap: 16px !important;
      padding: 8px 0 !important;
    }
  }

  /* Phones: "Join Action Force" shortens to "Join" so Join + Login + X fit beside the logo. */
  @media (width < 480px) {
    .gate-header .gate-join__rest { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gate-header .gate-social a,
    .gate-header .gate-join,
    .gate-header .gate-login,
    .gate-route::before,
    .gate-route__content,
    .gate-route__arrow,
    .gate-seam {
      transition: none;
    }

    .gate-route:hover .gate-route__content,
    .gate-route:focus-visible .gate-route__content,
    .gate-route:hover .gate-route__arrow,
    .gate-route:focus-visible .gate-route__arrow {
      transform: none;
    }
  }
}

/* F09: literal adjacent-action distinction; links, scene, copy and slants unchanged. */
@layer pages{
.gate-page .gate-route[data-route="growth"] .gate-route__content{background:var(--af-red-fill)!important;border-color:#fff}
.gate-page .gate-route[data-route="growth"] .gate-route__accent,.gate-page .gate-route[data-route="growth"] .gate-route__detail{color:#fff!important}
.gate-page .gate-route[data-route="growth"] .gate-route__emph{color:#000!important}
.gate-page .gate-route[data-route="hire"] .gate-route__content{background:var(--af-ink)!important}
}