@keyframes i18n-reveal-fallback { to { visibility: visible; } }
    html.i18n-pending body { visibility: hidden; animation: i18n-reveal-fallback 0s 3s forwards; }

    :root {
      --paper: #F7F5F0;
      --paper2: #FAF9F6;
      --card: #FFFFFF;
      --ink: #1A2333;
      --body: #3A4358;
      --mut: #6B7080;
      --line: #E7E3D9;
      --line2: #EFEBE1;
      --indigo: #2847C4;
      --indigo-d: #1f3aa8;
      --indigo-tint: #EEF1FD;
      --verm: #BA3B1D;
      --jade: #0C7A5F;
      --you: #E2DCCF;
      --serif: Georgia, "Times New Roman", serif;
      --mono: ui-monospace, "SF Mono", Menlo, monospace;
      --glass: rgba(255, 255, 255, .66);
      --shadow: 0 1px 2px rgba(26, 35, 51, .05);
      --shadow-hot: 0 20px 46px -20px rgba(40, 71, 196, .42);
    }

    /* 高对比变体 */
    @media (prefers-contrast:more) {
      :root {
        --mut: #4A4F5E;
        --line: rgba(26, 35, 51, .4)
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      scroll-behavior: smooth
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }
    }

    @media (prefers-reduced-transparency:reduce),
    (prefers-contrast:more) {

      .top,
      .persona {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--paper) !important
      }
    }

    body {
      background: var(--paper);
      color: var(--body);
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      line-height: 1.65;
      background-image: radial-gradient(760px 420px at 8% -6%, rgba(40, 71, 196, .06), transparent 60%), radial-gradient(680px 420px at 98% 4%, rgba(176, 122, 14, .05), transparent 60%), radial-gradient(720px 460px at 50% 118%, rgba(14, 138, 109, .045), transparent 62%);
      background-attachment: fixed
    }

    .serif {
      font-family: var(--serif);
      color: var(--ink);
      letter-spacing: -.01em;
      text-wrap: balance
    }

    .eb {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--indigo)
    }

    a {
      color: inherit;
      text-decoration: none
    }

    .wrap {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 24px
    }

    :focus-visible {
      outline: 2px solid var(--indigo);
      outline-offset: 2px;
      border-radius: 6px
    }

    .hunder {
      position: relative;
      display: inline-block
    }

    .hunder svg {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -9px;
      width: 100%;
      height: 11px
    }

    /* nav — matches the homepage lockup + role tag + sign-in pill */
    .top {
      position: sticky;
      top: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 26px;
      background: rgba(247, 245, 240, .82);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      backdrop-filter: blur(14px) saturate(1.3);
      border-bottom: 1px solid var(--line)
    }

    .top .lk {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .top .lk img {
      height: 44px;
      width: auto;
      display: block
    }

    .top .lk {
      flex-wrap: nowrap
    }

    .top .lk img {
      flex-shrink: 0
    }

    .top .lk .navrole {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--mut);
      border-left: 1px solid var(--line);
      padding-left: 12px;
      white-space: nowrap;
      flex-shrink: 0
    }

    .top .rt {
      display: flex;
      align-items: center;
      gap: 20px
    }

    .top .navlk {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--body);
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 6px;
      transition: color .15s
    }

    .top .navlk:hover {
      color: var(--ink)
    }

    .top .signin {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--body);
      background: none;
      box-shadow: none;
      padding: 0 6px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      transition: color .15s
    }

    .top .signin:hover {
      color: var(--ink)
    }

    .top .signin:active {
      transform: scale(.97);
      transition: transform .06s
    }

    /* compact language dropdown */
    .langdd {
      position: relative
    }

    .langdd-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 650;
      letter-spacing: .02em;
      color: var(--mute);
      background: none;
      border: none;
      padding: 0 8px;
      min-height: 44px;
      min-width: 44px;
      cursor: pointer;
      line-height: 1;
      transition: color .15s
    }

    .langdd-btn:hover {
      color: var(--ink)
    }

    .langdd-btn:active {
      transform: scale(.96);
      transition: transform .06s
    }

    .langdd-btn .ldg {
      font-size: 13px
    }

    .langdd-btn .chev {
      width: 10px;
      height: 10px;
      transition: transform .18s
    }

    .langdd.open .langdd-btn .chev {
      transform: rotate(180deg)
    }

    .langdd-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 148px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 5px;
      box-shadow: 0 18px 44px -18px rgba(26, 35, 51, .35);
      display: none;
      z-index: 70
    }

    .langdd.open .langdd-menu {
      display: block
    }

    .langdd-menu [role="option"] {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      width: 100%;
      min-height: 44px;
      padding: 0 12px;
      border: none;
      background: none;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--body);
      border-radius: 10px;
      cursor: pointer;
      text-align: left;
      transition: background .12s, color .12s
    }

    .langdd-menu [role="option"]:hover {
      background: var(--paper2);
      color: var(--ink)
    }

    .langdd-menu [role="option"]:active {
      background: var(--line)
    }

    .langdd-menu [role="option"][aria-selected="true"] {
      color: var(--indigo);
      font-weight: 700
    }

    .langdd-menu .ck {
      width: 14px;
      height: 14px;
      flex: none;
      opacity: 0;
      color: var(--indigo)
    }

    .langdd-menu [role="option"][aria-selected="true"] .ck {
      opacity: 1
    }

    @media(prefers-reduced-motion:reduce) {
      .langdd-btn .chev {
        transition: none
      }
    }

    html[lang="ja"] body {
      font-family: "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, "Segoe UI", sans-serif
    }

    html[lang="zh"] body {
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif
    }

    html[lang="zh"] {
      --serif: Georgia, "Songti SC", "Noto Serif CJK SC", serif
    }

    html[lang="ja"] {
      --serif: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif
    }

    /* CJK 排印：方块字关闭负字距；mono 微标签提字号、收字距保可读 */
    html[lang="zh"] h1,
    html[lang="ja"] h1,
    html[lang="zh"] .serif,
    html[lang="ja"] .serif,
    html[lang="zh"] .faq h2,
    html[lang="ja"] .faq h2 {
      letter-spacing: 0
    }

    html[lang="zh"] h1,
    html[lang="ja"] h1 {
      max-width: 15em
    }

    html[lang="zh"] .lede,
    html[lang="ja"] .lede {
      max-width: 28em
    }

    html[lang="zh"] .eb,
    html[lang="ja"] .eb {
      font-size: 12px;
      letter-spacing: .12em
    }

    html[lang="zh"] .persona .on,
    html[lang="ja"] .persona .on {
      font-size: 11px;
      letter-spacing: .04em
    }

    html[lang="zh"] .rung .step,
    html[lang="ja"] .rung .step {
      font-size: 11px;
      letter-spacing: .08em
    }

    html[lang="zh"] .badge,
    html[lang="ja"] .badge {
      font-size: 11px;
      letter-spacing: .06em
    }

    html[lang="zh"] .tname,
    html[lang="ja"] .tname {
      font-size: 12px;
      letter-spacing: .08em
    }

    html[lang="zh"] .mjob .brands,
    html[lang="ja"] .mjob .brands {
      font-size: 11.5px
    }

    html[lang="zh"] .feats li.head,
    html[lang="ja"] .feats li.head {
      font-size: 11.5px;
      letter-spacing: .05em
    }

    html[lang="zh"] .subnote,
    html[lang="ja"] .subnote {
      font-size: 12px
    }

    html[lang="zh"] .foot .fine,
    html[lang="ja"] .foot .fine {
      font-size: 12px
    }

    html[lang="zh"] .mock,
    html[lang="ja"] .mock {
      font-size: 12px
    }

    .top .userchip {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 5px 12px 5px 5px;
      border: 1px solid var(--line);
      border-radius: 100px;
      background: var(--card, #fff);
      transition: box-shadow .15s, transform .15s;
      text-decoration: none
    }

    .top .userchip:hover {
      box-shadow: 0 8px 20px -12px rgba(40, 71, 196, .4);
      transform: translateY(-1px)
    }

    .top .uc-av {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--indigo);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      overflow: hidden;
      flex: none
    }

    .top .uc-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .top .uc-name {
      font-size: 13.5px;
      font-weight: 650;
      color: var(--ink);
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    @media(max-width:520px) {
      .top .lk .navrole {
        display: none
      }

      .top {
        padding: 11px 16px
      }

      .top .rt {
        gap: 14px
      }
    }

    @media(max-width:420px) {
      .top {
        padding-inline: 12px
      }

      .top .lk img {
        height: 38px
      }

      .top .rt {
        gap: 8px
      }

      .top .rt > a[href="#faq"] {
        display: none
      }
    }

    /* hero */
    .hero {
      text-align: center;
      padding: 66px 0 8px
    }

    .persona {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      text-align: left;
      background: var(--glass);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      backdrop-filter: blur(16px) saturate(1.4);
      border: 1px solid rgba(255, 255, 255, .85);
      border-radius: 100px;
      padding: 8px 20px 8px 8px;
      box-shadow: 0 12px 32px -20px rgba(26, 35, 51, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
      margin-bottom: 26px;
      cursor: pointer;
      color: inherit;
      text-decoration: none;
      transition: transform .15s, box-shadow .15s
    }

    .persona:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 36px -18px rgba(26, 35, 51, .36), inset 0 1px 0 rgba(255, 255, 255, .9)
    }

    .persona img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 3px 10px -3px rgba(26, 35, 51, .4)
    }

    .persona .pn {
      font-size: 16px;
      font-weight: 750;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 9px
    }

    .persona .on {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .08em;
      font-weight: 600;
      color: var(--jade);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .persona .on::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--jade);
      animation: breathe 2.4s ease-in-out infinite
    }

    @keyframes breathe {
      0% {
        box-shadow: 0 0 0 0 rgba(14, 138, 109, .4)
      }

      70% {
        box-shadow: 0 0 0 6px rgba(14, 138, 109, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(14, 138, 109, 0)
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .persona .on::before {
        animation: none;
        box-shadow: 0 0 0 3px rgba(14, 138, 109, .18)
      }
    }

    .persona .pr {
      font-size: 12.5px;
      color: var(--mut);
      margin-top: 1px
    }

    h1 {
      font-family: var(--serif);
      font-size: clamp(32px, 5.4vw, 54px);
      line-height: 1.1;
      letter-spacing: -.01em;
      color: var(--ink);
      font-weight: 800;
      text-wrap: balance;
      max-width: 15ch;
      margin: 0 auto
    }

    h1 .said {
      font-style: italic;
      color: var(--indigo)
    }

    .lede {
      color: var(--body);
      font-size: clamp(16px, 2vw, 19px);
      line-height: 1.55;
      max-width: 42ch;
      margin: 22px auto 0;
      text-wrap: pretty
    }

    .trust {
      margin-top: 18px;
      font-size: 13.5px;
      color: var(--mut)
    }

    .trust b {
      color: var(--body);
      font-weight: 600
    }

    .mock {
      display: none;
      margin: 18px auto 0;
      font-family: var(--mono);
      font-size: 11px;
      background: #fff7e6;
      border: 1px solid #f0d9a8;
      color: #8a6d1f;
      border-radius: 999px;
      padding: 5px 13px;
      width: max-content
    }

    /* signature: the delegation ladder */
    .ladder {
      margin: 46px 0 6px
    }

    .ladder .rail {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: var(--paper2)
    }

    .rung {
      padding: 16px 18px;
      border-right: 1px solid var(--line);
      position: relative
    }

    .rung:last-child {
      border-right: 0
    }

    .rung .step {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mut)
    }

    .rung .role {
      font-family: var(--serif);
      font-size: 16px;
      margin-top: 6px;
      color: var(--ink);
      line-height: 1.25
    }

    .rung .who {
      font-size: 12.5px;
      color: var(--mut);
      margin-top: 3px
    }

    .rung.here {
      background: var(--card)
    }

    .rung.here::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: var(--indigo)
    }

    /* tiers */
    .tiers {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      padding: 30px 0 8px;
      align-items: stretch
    }

    .tiers .test-offer {
      grid-column: 2 / span 2
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 26px 22px 24px;
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: var(--shadow)
    }

    .card.hot {
      border: 1.5px solid var(--indigo);
      box-shadow: var(--shadow-hot);
      transform: translateY(-6px)
    }

    .badge {
      position: absolute;
      top: -12px;
      left: 22px;
      font-family: var(--mono);
      background: var(--indigo);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      border-radius: 999px;
      padding: 5px 12px
    }

    .tname {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--mut)
    }

    .role {
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.2;
      color: var(--ink);
      margin-top: 5px;
      min-height: 48px
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin: 14px 0 2px
    }

    .price .amt {
      font-family: var(--serif);
      font-size: 44px;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      line-height: 1
    }

    .price .currency {
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1
    }

    .price .per {
      font-size: 14px;
      color: var(--mut);
      font-weight: 500
    }

    .cycle-picker {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
      gap: 4px;
      margin-top: 13px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--paper2)
    }

    .cycle-picker button {
      min-height: 34px;
      padding: 0 7px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--mut);
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer
    }

    .cycle-picker button.on {
      background: var(--card);
      color: var(--indigo);
      box-shadow: 0 1px 3px rgba(26, 35, 51, .12)
    }

    .pitch {
      font-size: 13.5px;
      color: var(--body);
      line-height: 1.5;
      margin: 8px 0 0;
      min-height: 60px
    }

    .mjob {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 16px 0 2px;
      flex-wrap: wrap
    }

    .mjob .brands {
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--indigo);
      background: var(--indigo-tint);
      border: 1px solid #dce1fb;
      border-radius: 6px;
      padding: 3px 9px;
      white-space: nowrap
    }

    .mjob .does {
      font-size: 12.5px;
      color: var(--mut)
    }

    .feats {
      list-style: none;
      margin: 16px 0 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .feats li {
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--body);
      padding-left: 24px;
      position: relative
    }

    .feats li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 3px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--indigo-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.4l2.4 2.4L12 5.2' fill='none' stroke='%232847C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat
    }

    .feats li.head {
      padding-left: 0;
      color: var(--mut);
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .feats li.head::before {
      display: none
    }

    .cta {
      display: block;
      text-align: center;
      border-radius: 100px;
      padding: 12px 0;
      font-weight: 700;
      font-size: 14.5px;
      cursor: pointer;
      border: 1.5px solid var(--indigo);
      color: var(--indigo);
      background: var(--card);
      width: 100%;
      transition: background .15s, color .15s, transform .06s
    }

    .cta.solid {
      background: var(--indigo);
      color: #fff;
      box-shadow: 0 10px 24px -12px var(--indigo)
    }

    .cta:hover {
      background: var(--indigo);
      color: #fff
    }

    .cta.solid:hover {
      background: var(--indigo-d);
      border-color: var(--indigo-d)
    }

    .cta:active {
      transform: translateY(1px)
    }

    .cta:disabled {
      opacity: .5;
      cursor: default;
      background: var(--card);
      color: var(--mut);
      border-color: var(--line)
    }

    .cta.solid:disabled {
      background: var(--paper2);
      color: var(--mut);
      border-color: var(--line);
      box-shadow: none
    }

    .subnote {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--mut);
      text-align: center;
      margin-top: 10px;
      min-height: 15px;
      letter-spacing: .02em
    }

    /* faq */
    .faq {
      border-top: 1px solid var(--line2);
      margin-top: 56px;
      padding: 54px 0 8px
    }

    .faq .sec-h {
      text-align: center;
      margin-bottom: 30px
    }

    .faq .eb {
      display: block;
      margin-bottom: 10px
    }

    .faq h2 {
      font-family: var(--serif);
      font-size: 28px;
      letter-spacing: -.02em;
      color: var(--ink)
    }

    .qs {
      max-width: 720px;
      margin: 0 auto
    }

    .q {
      border-bottom: 1px solid var(--line2)
    }

    .q summary {
      list-style: none;
      cursor: pointer;
      padding: 18px 4px;
      font-size: 16px;
      font-weight: 650;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 14px
    }

    .q summary::-webkit-details-marker {
      display: none
    }

    .q summary .mk {
      margin-left: auto;
      color: var(--mut);
      font-size: 22px;
      font-weight: 400;
      transition: transform .2s;
      line-height: 1
    }

    .q[open] summary .mk {
      transform: rotate(45deg)
    }

    .q .a {
      padding: 0 4px 20px;
      color: var(--body);
      font-size: 15px;
      line-height: 1.6;
      max-width: 62ch
    }

    /* footer */
    .foot {
      border-top: 1px solid var(--line2);
      margin-top: 52px;
      padding: 36px 0 60px;
      text-align: center
    }

    .foot .honesty {
      font-size: 14px;
      color: var(--body);
      max-width: 56ch;
      margin: 0 auto;
      line-height: 1.65
    }

    .foot .honesty b {
      color: var(--ink);
      font-weight: 600
    }

    .foot .fine {
      margin-top: 16px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .02em;
      color: var(--mut)
    }

    #toast {
      position: fixed;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%) translateY(8px);
      background: var(--ink);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      border-radius: 11px;
      padding: 13px 20px;
      opacity: 0;
      transition: opacity .25s, transform .25s;
      pointer-events: none;
      z-index: 50;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .22)
    }

    #toast.on {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    .rise {
      opacity: 0;
      transform: translateY(14px);
      animation: rise .6s cubic-bezier(.2, .7, .2, 1) forwards
    }

    @keyframes rise {
      to {
        opacity: 1;
        transform: none
      }
    }

    @media(max-width:900px) {
      .tiers {
        grid-template-columns: 1fr 1fr
      }

      .tiers .test-offer {
        grid-column: 1 / -1
      }

      .card.hot {
        transform: none
      }

      .card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 8px);
        justify-self: center
      }

      .ladder .rail {
        grid-template-columns: 1fr 1fr
      }

      .rung:nth-child(2) {
        border-right: 0
      }

      .rung {
        border-bottom: 1px solid var(--line)
      }

      .rung:nth-child(even) {
        border-right: 0
      }

      .rung:last-child {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 0
      }
    }

    @media(max-width:560px) {
      .hero {
        padding: 46px 0 4px
      }

      .tiers {
        grid-template-columns: 1fr
      }

      .tiers .test-offer {
        grid-column: 1
      }

      .card:last-child:nth-child(odd) {
        grid-column: auto;
        width: 100%
      }

      .ladder .rail {
        grid-template-columns: 1fr
      }

      .rung {
        border-right: 0;
        border-bottom: 1px solid var(--line)
      }

      .rung:last-child {
        border-bottom: 0
      }

      .role {
        min-height: 0
      }

      .pitch {
        min-height: 0
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .rise {
        animation: none;
        opacity: 1;
        transform: none
      }

      .split .fill {
        transition: none
      }
    }

    .bigfoot {
      background: #141413;
      color: var(--bf-mute);
      --bf-label: rgba(250, 249, 245, .92);
      --bf-mute: rgba(250, 249, 245, .62);
      --bf-sep: rgba(250, 249, 245, .10);
      --bf-fill: rgba(250, 249, 245, .07);
      margin-top: 40px
    }

    .bf-in {
      display: grid;
      grid-template-columns: minmax(260px, 1.4fr) repeat(4, 1fr);
      gap: 48px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 72px 24px 48px
    }

    .bf-logo {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.01em;
      margin-bottom: 12px
    }

    .bf-tag {
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--bf-mute);
      max-width: 280px;
      margin: 0 0 20px
    }

    .bf-ask {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bf-fill);
      border: 1px solid var(--bf-sep);
      border-radius: 100px;
      padding: 4px 4px 4px 16px;
      max-width: 320px;
      margin-bottom: 16px
    }

    .bf-ask input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: none;
      color: rgba(250, 249, 245, .92);
      font-size: 13.5px;
      font-family: inherit;
      padding: 8px 0;
      outline: none
    }

    .bf-ask input::placeholder {
      color: var(--bf-mute)
    }

    .bf-ask button {
      flex: none;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 50%;
      background: #E2694B;
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: filter .15s;
      padding: 0
    }

    .bf-ask button:hover {
      filter: brightness(.92)
    }

    .bigfoot .ico {
      stroke: currentColor;
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      display: block
    }

    .bf-ask button .ico {
      width: 16px;
      height: 16px
    }

    .bf-mail {
      display: inline-block;
      font-size: 13.5px;
      color: var(--bf-mute);
      transition: color .15s;
      line-height: 2.2;
      padding: 8px 0
    }

    .bf-mail:hover {
      color: var(--bf-label)
    }

    .bf-cols {
      display: contents
    }

    .bf-cols>div {
      display: flex;
      flex-direction: column
    }

    .bf-cols h4 {
      font-family: inherit;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--bf-mute);
      margin: 0 0 14px
    }

    .bf-cols a {
      font-size: 13.5px;
      color: var(--bf-mute);
      line-height: 2.2;
      transition: color .15s;
      padding: 8px 0
    }

    .bf-cols a:hover {
      color: var(--bf-label)
    }

    .bf-bottom {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 24px 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-size: 12.5px;
      color: var(--bf-mute);
      border-top: 1px solid var(--bf-sep);
      flex-wrap: wrap
    }

    .bf-social {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .bf-social a {
      color: var(--bf-mute);
      display: inline-flex;
      transition: color .15s
    }

    .bf-social a:hover {
      color: var(--bf-label)
    }

    .bf-social svg {
      width: 16px;
      height: 16px;
      display: block
    }

    .bf-lang {
      display: flex;
      align-items: center;
      gap: 4px
    }

    .bf-lang button {
      background: none;
      border: none;
      font-family: inherit;
      font-size: 12.5px;
      color: var(--bf-mute);
      cursor: pointer;
      padding: 6px 8px;
      border-radius: 6px;
      transition: color .15s;
      min-height: 36px
    }

    .bf-lang button:hover,
    .bf-lang button.on {
      color: var(--bf-label)
    }

    .bigfoot a:focus-visible,
    .bigfoot button:focus-visible,
    .bigfoot input:focus-visible {
      outline: 2px solid rgba(250, 249, 245, .7);
      outline-offset: 2px;
      border-radius: 6px
    }

    @media(prefers-contrast:more) {
      .bigfoot {
        --bf-sep: rgba(250, 249, 245, .35)
      }

      .bf-cols h4,
      .bf-cols a,
      .bf-mail,
      .bf-tag,
      .bf-bottom,
      .bf-lang button,
      .bf-social a {
        color: #fff
      }

      .bf-lang button.on {
        color: #fff
      }
    }

    @media(max-width:900px) {
      .bf-in {
        grid-template-columns: 1fr 1fr;
        gap: 36px 28px
      }

      .bf-brand {
        grid-column: 1/-1
      }

      .bf-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        grid-column: 1/-1
      }
    }

    @media(max-width:600px) {
      .bf-in {
        grid-template-columns: 1fr;
        padding: 56px 20px 36px
      }

      .bf-cols {
        grid-template-columns: 1fr
      }

      .bf-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px 28px
      }
    }