/* 模块 03 · 订阅与账户准备：浅绿灰纸面，像一本办事手册 */
.t-sage { --card: #fbfcf9; --sage-2: #d8ded2; --sage-ink: #2f3a2c; }
.t-sage .lede { color: #3e4639; }
.t-sage .note, .t-sage .src { color: #687163; }
.t-sage mark { background: linear-gradient(transparent 52%, var(--mark-soft) 52%, var(--mark-soft) 92%, transparent 92%); }

/* shared: numbered step lists with a bold lead-in */
.rg-steps, .cl-steps, .ap-steps, .gg-steps, .gp-steps, .mg-steps { margin-top: 20px; display: grid; gap: 12px; counter-reset: st; }
.rg-steps li, .ap-steps li, .gg-steps li, .gp-steps li, .mg-steps li { position: relative; padding-left: 38px; font-size: .94rem; line-height: 1.65; counter-increment: st; }
.rg-steps li::before, .ap-steps li::before, .gg-steps li::before, .gp-steps li::before, .mg-steps li::before, .cl-steps li::before { content: counter(st); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 .76rem/1 var(--mono); background: var(--ink); color: var(--paper); }
.ap-steps b, .gg-steps b, .gp-steps b, .mg-steps b { display: block; font-size: 1rem; margin-bottom: 2px; }

/* opener: five gates */
.opg { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 40px 6px; }
.opg::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(241, 239, 233, .35) 0 8px, transparent 8px 16px); }
.opg li { position: relative; display: grid; justify-items: center; gap: 12px; }
.opg i { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px rgba(241, 239, 233, .4); transition: box-shadow .3s, background-color .3s; }
.opg span { font-size: .9rem; color: var(--on-ink-2); }
.page.in .opg li i { animation: gate-on .5s var(--ease) both; animation-delay: calc(.4s + var(--g, 0) * .18s); }
.opg li:nth-child(1) { --g: 0; } .opg li:nth-child(2) { --g: 1; } .opg li:nth-child(3) { --g: 2; } .opg li:nth-child(4) { --g: 3; } .opg li:nth-child(5) { --g: 4; }
@keyframes gate-on { 50% { box-shadow: inset 0 0 0 22px var(--mark); } 100% { box-shadow: inset 0 0 0 2px var(--mark); } }

/* ===== register ===== */
.rg { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy lab" "src lab"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.rg-copy { grid-area: copy; }
.rg-take { margin-top: 22px; font-weight: 600; font-size: 1.05rem; }
.rg .src { grid-area: src; }
.rg-lab { grid-area: lab; display: grid; gap: 14px; }
.rg-signup, .rg-devices { padding: 20px 22px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px rgba(47, 58, 44, .1), 0 24px 50px -36px rgba(30, 40, 20, .45); }
.rg-h { font-size: .82rem; color: #687163; margin-bottom: 12px; }
.rg-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rg-methods button { height: 46px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); font-size: .9rem; font-weight: 500; background: #fff; transition: box-shadow .2s, background-color .2s; }
.rg-methods button:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.rg-methods button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.rg-hide { display: none; margin-top: 12px; font-size: .86rem; align-items: center; gap: 8px; }
.rg-hide.show { display: flex; }
.rg-dev { display: grid; grid-template-columns: 3.4em 9em 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(47, 58, 44, .1); }
.rg-dev:first-of-type { border-top: 0; }
.rg-dev select { height: 38px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .18); padding: 0 10px; background: #fff; font-size: .88rem; }
.rg-res { font-size: .86rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.rg-res.ok { background: var(--ok-soft); color: var(--ok); }
.rg-res.bad { background: var(--bad-soft); color: var(--bad); font-family: var(--mono); font-size: .78rem; }
.rg-fix { font-size: .88rem; color: #3e4639; padding: 0 4px; }

/* ===== client ===== */
.cl { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); grid-template-areas: "copy demo" "src demo"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.cl-copy { grid-area: copy; }
.cl-steps li { position: relative; padding-left: 38px; counter-increment: st; display: grid; gap: 4px; }
.cl-steps b { font-size: 1rem; }
.cl-steps span { font-size: .93rem; line-height: 1.65; }
.cl-fix { margin-top: 16px; }
.cl .src { grid-area: src; }
.cl-demo { grid-area: demo; }
.cl-win { position: relative; height: 320px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 30px 60px -30px rgba(20, 30, 10, .5); overflow: hidden; }
.cl-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #f7f7f8; border-bottom: 1px solid #e6e6ea; }
.cl-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e2e2e6; }
.cl-switch { margin-left: 14px; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: .9rem; box-shadow: 0 0 0 2px var(--mark); animation: spot-ping 2.2s var(--ease) infinite; }
.cl-win[data-app="codex"] .cl-switch { animation: none; box-shadow: none; background: #ececef; }
.cl-menu { position: absolute; left: 60px; top: 44px; z-index: 3; width: 180px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 36px -12px rgba(0, 0, 0, .35); display: grid; }
.cl-menu button { text-align: left; padding: 9px 12px; border-radius: 8px; font-size: .9rem; }
.cl-menu button:hover { background: #f2f2f4; }
.cl-view { position: absolute; inset: 40px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .4s, transform .5s var(--ease); }
.cl-win[data-app="chat"] .cl-codex, .cl-win[data-app="codex"] .cl-chat { opacity: 0; transform: translateY(10px); pointer-events: none; }
.cl-tabs { position: absolute; top: 14px; display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #f1f1f4; font-size: .82rem; }
.cl-tabs span { padding: 4px 12px; border-radius: 8px; }
.cl-tabs span.on { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.cl-q { font-size: 1.25rem; font-weight: 500; color: #111; }
.cl-box { width: 70%; padding: 14px 16px; border-radius: 16px; box-shadow: 0 0 0 1px #e3e3e8, 0 8px 18px -12px rgba(0, 0, 0, .3); color: #a2a2a8; font-size: .9rem; }
.cl-chips { display: flex; gap: 10px; font-size: .8rem; color: #555; }
.cl-chips span { display: inline-flex; gap: 5px; align-items: center; }
.cl-hint { margin: 10px 4px 16px; font-size: .86rem; color: #3e4639; font-weight: 600; }
.cl-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cl-door { padding: 14px 16px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px rgba(47, 58, 44, .1); }
.cl-door b { font-size: 1.15rem; }
.cl-door p { font-size: .88rem; margin-top: 4px; }
.cl-door small { display: block; margin-top: 8px; font-size: .76rem; color: #687163; line-height: 1.5; }
.cl-door.me { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.cl-door.me small { color: var(--on-ink-muted); }

/* ===== plan: read the checkout ===== */
.pl { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(0, 1.05fr); grid-template-areas: "copy co" "copy note" "src note"; column-gap: clamp(28px, 4vw, 64px); row-gap: 14px; align-items: start; }
.pl-copy { grid-area: copy; }
.pl-flow { margin-top: 20px; display: grid; gap: 0; border-left: 2px solid var(--ink); }
.pl-flow li { padding: 0 0 14px 20px; position: relative; }
.pl-flow li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 2px var(--ink); }
.pl-flow b { display: block; font-size: 1rem; }
.pl-flow span { font-size: .9rem; line-height: 1.6; color: #3e4639; }
.pl-bill { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-bill p { padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px rgba(47, 58, 44, .1); display: grid; gap: 2px; }
.pl-bill b { font-size: .9rem; }
.pl-bill span { font-size: .82rem; color: #687163; }
.pl-note { grid-area: note; font-size: .82rem; }
.pl .src { grid-area: src; }
.pl-checkout { grid-area: co; }
.pl-h { font-size: .84rem; color: #687163; margin-bottom: 10px; }
.pl-sheet { position: relative; padding: 22px 24px 18px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 30px 60px -34px rgba(20, 30, 10, .5); }
.pl-sh-t { font-size: 1.15rem; font-weight: 650; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.pl-sh-t small { font-size: .72rem; font-weight: 400; color: #8e8e94; }
.pl-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 8px; border-bottom: 1px solid #eeeef0; font-size: .92rem; border-radius: 8px; transition: background-color .3s, box-shadow .3s; }
.pl-row span { color: #6b6b72; }
.pl-row b { font-weight: 600; text-align: right; }
.pl-cancel { padding: 10px 8px; font-size: .84rem; color: #4c5bd8; border-radius: 8px; transition: background-color .3s, box-shadow .3s; }
.pl-row.lit, .pl-cancel.lit { background: #fff8d6; box-shadow: inset 0 0 0 1.5px #f0c419; }
.pl-sheet .spot { position: absolute; left: -15px; margin: 0; }
.pl-sheet .spot[data-cospot="0"] { top: 64px; } .pl-sheet .spot[data-cospot="1"] { top: 108px; } .pl-sheet .spot[data-cospot="2"] { top: 152px; } .pl-sheet .spot[data-cospot="3"] { top: 196px; } .pl-sheet .spot[data-cospot="4"] { top: 240px; } .pl-sheet .spot[data-cospot="5"] { top: 284px; } .pl-sheet .spot[data-cospot="6"] { top: 326px; }
.pl-say { margin-top: 12px; min-height: 3.4em; display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; font-weight: 600; }
.pl-say b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--mark); display: grid; place-items: center; font: 600 .78rem/1 var(--mono); }
.pl-q { font-size: .88rem; color: #3e4639; }

/* ===== region: four independent layers ===== */
.rgn { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy lab" "src lab"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.rgn-copy { grid-area: copy; }
.rgn-fact { margin-top: 20px; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: var(--on-ink); font-size: .94rem; line-height: 1.65; }
.rgn-fact b { color: var(--mark); }
.rgn-store { margin-top: 14px; display: grid; gap: 6px; font-size: .9rem; }
.rgn-store b { margin-right: 8px; }
.rgn .src { grid-area: src; }
.rgn-lab { grid-area: lab; }
.rgn-h { font-size: .84rem; color: #687163; margin-bottom: 10px; }
.rgn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rgn-actions button { padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); font-size: .88rem; font-weight: 500; transition: background-color .2s, color .2s; }
.rgn-actions button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.rgn-layers { margin-top: 18px; display: grid; gap: 8px; perspective: 900px; }
.rgn-layer { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name mark" "dec mark" "where mark"; padding: 14px 18px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px rgba(47, 58, 44, .12); transform: rotateX(8deg); transform-origin: bottom; transition: background-color .4s, box-shadow .4s, transform .5s var(--ease); }
.rgn-layer b { grid-area: name; font-size: 1rem; }
.rgn-layer span { grid-area: dec; font-size: .86rem; color: #3e4639; }
.rgn-layer small { grid-area: where; font-size: .76rem; color: #8a9184; }
.rgn-mark { grid-area: mark; align-self: center; font: 600 .74rem/1 var(--mono); font-style: normal; padding: 6px 10px; border-radius: 6px; background: var(--mark); color: var(--ink); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--spring); }
.rgn-layer.hit { background: #fffbe8; box-shadow: 0 0 0 2px var(--mark), 0 14px 30px -18px rgba(120, 90, 0, .5); transform: rotateX(0) translateY(-2px); animation: layer-hit .6s var(--ease); }
.rgn-layer.hit .rgn-mark { opacity: 1; transform: none; }
.rgn-layer[data-layer="svc"] { box-shadow: 0 0 0 1px rgba(47, 58, 44, .12), inset 4px 0 0 var(--ink); }
@keyframes layer-hit { 30% { transform: rotateX(0) translateY(-6px); } }
.rgn-say { margin-top: 14px; min-height: 2.6em; font-size: 1rem; font-weight: 600; }

/* ===== apple: tap through the phone ===== */
.ap { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(280px, .8fr); grid-template-areas: "copy phone" "take phone" "src phone"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.ap-copy { grid-area: copy; }
.ap-fix { margin-top: 14px; }
.ap-take { grid-area: take; margin-top: 14px; font-weight: 600; font-size: 1.02rem; }
.ap .src { grid-area: src; }
.ap-phone { grid-area: phone; display: grid; justify-items: center; gap: 10px; }
.ap-phone .phone { width: min(290px, 100%); }
.ap-screens { position: absolute; inset: 0; }
.ap-s { position: absolute; inset: 0; transition: transform .45s var(--ease), opacity .3s; }
.ap-screens[data-screen="0"] .ap-s:not([data-s="0"]), .ap-screens[data-screen="1"] .ap-s:not([data-s="1"]), .ap-screens[data-screen="2"] .ap-s:not([data-s="2"]), .ap-screens[data-screen="3"] .ap-s:not([data-s="3"]), .ap-screens[data-screen="4"] .ap-s:not([data-s="4"]) { opacity: 0; transform: translateX(30%); pointer-events: none; }
.ios { height: 100%; padding-top: 54px; background: #f2f2f7; }
.ios-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px 8px; font-size: 13px; }
.ios-nav b { font-weight: 600; }
.ios-back { display: inline-flex; align-items: center; color: #0a7aff; cursor: pointer; }
.ios-big { padding: 0 16px 10px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ios-group { margin: 0 12px; border-radius: 12px; background: #fff; overflow: hidden; }
.ios-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-bottom: 1px solid #eee; font-size: 13.5px; }
.ios-row:last-child { border-bottom: 0; }
.ios-row > span { flex: 1; display: flex; align-items: center; gap: 10px; }
.ios-row small { display: block; font-size: 11px; color: #8e8e93; }
.ios-row em { font-style: normal; color: #8e8e93; }
.ios-row .ic { width: 13px; height: 13px; color: #c4c4c8; }
.ios-row.on { position: relative; cursor: pointer; background: #fff8d6; box-shadow: inset 3px 0 0 #f0c419; animation: tap-me 1.8s var(--ease) infinite; }
@keyframes tap-me { 50% { background: #fff0b0; } }
.ap-av { width: 34px; height: 34px; border-radius: 50%; background: #c7c7cc; color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.ap-warn { margin: 12px 16px; font-size: 12px; color: #c0392b; font-weight: 600; }
.ap-trail { font-size: .84rem; color: #3e4639; text-align: center; min-height: 1.5em; }
.ap-trail i { font-style: normal; opacity: .5; }

/* ===== apple gift card ===== */
.gc { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); grid-template-areas: "copy chat" "src chat"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.gc-copy { grid-area: copy; }
.gc-cards { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gc-card { position: relative; aspect-ratio: 1.58; padding: 16px; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5); }
.gc-card.good { background: linear-gradient(135deg, #f7f7f7, #dfe3ea 60%, #c9d0dc); color: #111; }
.gc-card.good::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 216, 77, .7), transparent 70%); }
.gc-card.old { background: #2b2b30; color: #ddd; }
.gc-brand { font-weight: 700; font-size: .98rem; }
.gc-use { font-size: .8rem; opacity: .8; }
.gc-cc { font-size: .78rem; }
.gc-checkout { margin-top: 18px; font-size: .92rem; line-height: 1.7; padding: 14px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px rgba(47, 58, 44, .1); }
.gc-checkout b { display: block; }
.gc .src { grid-area: src; }
.gc-chat { grid-area: chat; padding: 20px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 30px 60px -34px rgba(20, 30, 10, .5); }
.gc-h { font-size: .84rem; color: #687163; margin-bottom: 12px; }
.gc-thread { display: grid; gap: 8px; }
.gc-msg { position: relative; justify-self: start; max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #f1f1f4; text-align: left; font-size: .92rem; transition: background-color .3s, transform .3s var(--spring); }
.gc-msg:hover { transform: translateX(3px); }
.gc-stamp { position: absolute; right: -10px; top: -10px; font-style: normal; font: 700 .72rem/1 var(--sans); padding: 5px 8px; border-radius: 6px; transform: rotate(6deg) scale(.4); opacity: 0; transition: all .35s var(--spring); }
.gc-msg.bad { background: #ffe9e9; }
.gc-msg.bad .gc-stamp { background: var(--bad); color: #fff; opacity: 1; transform: rotate(6deg) scale(1); }
.gc-msg.meh { background: #fff6d6; }
.gc-msg.meh .gc-stamp { background: var(--mark); color: var(--ink); opacity: 1; transform: rotate(-4deg) scale(1); }
.gc-ask { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .86rem; }
.gc-ask span { width: 100%; color: #687163; font-size: .8rem; }
.gc-ask b { padding: 6px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; }
.gc-rule { margin-top: 14px; font-size: .9rem; font-weight: 600; color: #a13a3a; }

/* ===== apple pay: three phones in a row ===== */
.ay { display: flex; flex-direction: column; }
.ay-row { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); counter-reset: none; }
.ay-step { display: grid; align-content: start; gap: 10px; }
.ay-n { font: 600 .78rem/1 var(--mono); color: #687163; }
.ay-screen { position: relative; height: 210px; padding: 18px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 7px #111, 0 30px 50px -28px rgba(0, 0, 0, .55); display: grid; align-content: start; gap: 10px; margin: 7px; }
.ay-app { font-size: .82rem; color: #6b6b72; }
.ay-app b { color: #0a7aff; font-weight: 600; }
.ay-code { font: 600 1rem/1 var(--mono); letter-spacing: .06em; padding: 12px; border-radius: 10px; background: #f2f2f7; text-align: center; }
.ay-bal { font-size: .86rem; display: flex; justify-content: space-between; align-items: baseline; }
.ay-bal b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.ay-bal small { display: block; font-size: .64rem; font-weight: 400; color: #8e8e94; text-align: right; }
.ay-screen .btn { justify-self: start; }
.ay-sheet { padding: 14px; border-radius: 16px; background: #f2f2f7; display: grid; gap: 6px; }
.ay-sheet p { font-weight: 600; font-size: .9rem; }
.ay-sheet span { font-size: .8rem; color: #6b6b72; }
.ay-plan { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; transition: color .3s; }
.ay[data-done="2"] .ay-plan { color: var(--ok); }
.ay-ok { font-size: .78rem; color: #8e8e94; }
.ay-t { font-size: .88rem; line-height: 1.65; }
.ay-err { font-size: .84rem; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px rgba(47, 58, 44, .1); padding: 10px 14px; }
.ay-err summary { cursor: pointer; font-weight: 600; }
.ay-err p { margin-top: 6px; line-height: 1.65; color: #3e4639; }
.ay-err p b { margin-right: 4px; color: var(--text); }
.ay-step { opacity: .55; transition: opacity .4s; }
.ay .ay-step[data-ay="0"], .ay[data-done="1"] .ay-step[data-ay="1"], .ay[data-done="2"] .ay-step { opacity: 1; }

/* ===== google: the path as a ladder ===== */
.gg { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); grid-template-areas: "copy path" "take path" "src src"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.gg-copy { grid-area: copy; }
.gg-take { grid-area: take; margin-top: 14px; font-weight: 600; font-size: 1.02rem; }
.gg .src { grid-area: src; }
.gg-path { grid-area: path; display: grid; gap: 16px; }
.gg-ladder { display: grid; gap: 6px; }
.gg-ladder li { margin-left: calc(var(--d) * 22px); display: flex; align-items: center; gap: 10px; }
.gg-ladder li span { padding: 9px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 8px 16px -12px rgba(0, 0, 0, .3); font-size: .9rem; font-weight: 500; }
.gg-ladder li::before { content: "↳"; color: #8a9184; }
.gg-ladder li:first-child::before { content: ""; }
.gg-ladder li:last-child span { background: var(--ink); color: var(--mark); }
.page.in .gg-ladder li { animation: log-in .5s var(--ease) both; animation-delay: calc(.3s + var(--d) * .12s); }
.gg-need { padding: 16px 18px; border-radius: 18px; background: var(--ink); color: var(--on-ink); display: grid; gap: 6px; }
.gg-h { font-size: .8rem; color: var(--mark); }
.gg-need p:not(.gg-h) { display: flex; gap: 12px; align-items: baseline; font-size: .98rem; }
.gg-need p b { font: 600 .74rem/1 var(--mono); color: var(--on-ink-muted); }
.gg-no { font-size: .88rem; color: #a13a3a; font-weight: 600; }

/* ===== google pay: two docs disagree ===== */
.gp { display: flex; flex-direction: column; }
.gp-docs { margin-top: 22px; display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 16px; align-items: center; }
.gp-doc { padding: 18px 20px; border-radius: 6px 18px 18px 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 18px 36px -24px rgba(0, 0, 0, .4); font-size: 1.02rem; position: relative; }
.gp-doc::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 4px; background: #4285f4; border-radius: 0 0 4px 0; }
.gp-src { font-size: .76rem; color: #687163; margin-bottom: 8px; }
.gp-ne { font-family: var(--display); font-size: 3rem; font-weight: 300; color: var(--bad); line-height: 1; }
.gp-so { font-size: 1.05rem; font-weight: 650; padding: 14px 18px; border-radius: 999px; background: var(--ink); color: var(--mark); white-space: nowrap; }
.gp-so b { color: #fff; }
.gp-steps { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.gp-steps li { padding-left: 0; padding-top: 38px; font-size: .9rem; }
.gp-steps li::before { top: 0; }
.gp-steps .path { margin: 6px 0; }
.gp-fix { margin-top: 18px; }

/* ===== phone numbers ===== */
.ph { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); grid-template-areas: "copy es" "src es"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.ph-copy { grid-area: copy; }
.ph .src { grid-area: src; }
.ph-h { font-size: .84rem; color: #687163; margin-bottom: 10px; }
.ph-sort { margin-top: 20px; display: grid; gap: 6px; }
.ph-num { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n b" "w w"; align-items: center; gap: 0 12px; padding: 11px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px rgba(47, 58, 44, .1); text-align: left; transition: background-color .3s; }
.ph-num span { grid-area: n; font-size: .95rem; font-weight: 500; }
.ph-num b { grid-area: b; font-size: .78rem; padding: 4px 10px; border-radius: 999px; opacity: 0; transform: translateX(8px); transition: all .35s var(--spring); }
.ph-num small { grid-area: w; font-size: .82rem; color: #3e4639; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), margin .35s; }
.ph-num[aria-expanded="true"] b { opacity: 1; transform: none; }
.ph-num[aria-expanded="true"] small { max-height: 3em; margin-top: 4px; }
.ph-num[data-ok="yes"] b { background: var(--ok); color: #fff; }
.ph-num[data-ok="no"] b { background: var(--bad); color: #fff; }
.ph-num[data-ok="maybe"] b { background: var(--mark); color: var(--ink); }
.ph-num[aria-expanded="true"][data-ok="no"] { background: #fff3f3; }
.ph-es { grid-area: es; padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 30px 60px -34px rgba(20, 30, 10, .5); display: grid; gap: 12px; }
.ph-es-t { font-size: .92rem; line-height: 1.65; }
.ph-check { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: .9rem; }
.ph-check .tick { cursor: pointer; }
.ph-nocode { padding: 14px 16px; border-radius: 14px; background: #f3f5f0; font-size: .88rem; line-height: 1.65; }
.ph-nocode b { display: block; margin-bottom: 4px; }
.ph-rule { font-size: .9rem; font-weight: 600; color: #a13a3a; }

/* ===== network: the chain ===== */
.nw { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy stage" "take stage" "src stage"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.nw-copy { grid-area: copy; }
.nw-sym { margin-top: 20px; display: grid; gap: 6px; }
.nw-sym button { text-align: left; padding: 11px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px rgba(47, 58, 44, .1); font-size: .92rem; transition: background-color .2s, color .2s, transform .2s var(--ease); }
.nw-sym button:hover { transform: translateX(3px); }
.nw-sym button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.nw-take { grid-area: take; margin-top: 14px; font-weight: 600; }
.nw .src { grid-area: src; }
.nw-stage { grid-area: stage; display: grid; gap: 16px; }
.nw-chain { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; padding: 10px 0 0; }
.nw-chain::before { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 3px; background: #c6cec0; border-radius: 3px; }
.nw-chain li { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; font-size: .82rem; font-weight: 500; }
.nw-chain i { width: 44px; height: 44px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3px #c6cec0; transition: all .4s var(--spring); }
.nw-chain li.ok i { box-shadow: inset 0 0 0 22px var(--ok); }
.nw-chain li.bad i { box-shadow: inset 0 0 0 22px var(--bad), 0 0 0 8px rgba(223, 71, 71, .2); transform: scale(1.1); }
.nw-chain li.bad span { color: var(--bad); font-weight: 700; }
.nw-say { min-height: 6.6em; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.nw-say b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.nw-say p { font-size: .92rem; line-height: 1.65; }
.nw-say:empty::before { content: "左边选一个你遇到的情况。"; color: #8a9184; font-size: .92rem; }
.nw-where { display: grid; gap: 8px; font-size: .86rem; }
.nw-where p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nw-where b { min-width: 7em; }
.nw-rule { font-size: .86rem; color: #3e4639; line-height: 1.65; }

/* ===== manage: receipts ===== */
.mg { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); grid-template-areas: "copy rc" "src rc"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.mg-copy { grid-area: copy; }
.mg .src { grid-area: src; }
.mg-receipts { grid-area: rc; }
.mg-h { font-size: .84rem; color: #687163; margin-bottom: 10px; }
.mg-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mg-rc { position: relative; display: grid; gap: 6px; padding: 16px 14px 24px; background: #fff; text-align: left; box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .5); transform: rotate(var(--r, 0deg)); transition: transform .35s var(--spring), box-shadow .3s; font-family: var(--mono); }
.mg-rc:nth-child(1) { --r: -2deg; } .mg-rc:nth-child(2) { --r: 1.5deg; } .mg-rc:nth-child(3) { --r: -1deg; }
.mg-rc:hover { transform: rotate(0) translateY(-3px); }
.mg-rc[aria-pressed="true"] { transform: rotate(0) translateY(-6px); box-shadow: 0 0 0 2px var(--ink), 0 18px 30px -16px rgba(0, 0, 0, .5); }
.mg-from { font-size: .66rem; color: #8e8e94; letter-spacing: .06em; }
.mg-rc b { font-size: .86rem; }
.mg-line { font-size: .72rem; color: #6b6b72; border-top: 1px dashed #d4d4d8; padding-top: 6px; }
.mg-teeth { position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(-45deg, transparent 6px, #fff 6px) 0 0 / 12px 12px, linear-gradient(45deg, transparent 6px, #fff 6px) 0 0 / 12px 12px; }
.mg-route { margin-top: 26px; min-height: 12em; }
.mg-route:empty::before { content: "选一张收据，看它的取消路线。"; color: #8a9184; font-size: .92rem; }
.mg-rt { font-weight: 650; font-size: 1.05rem; margin-bottom: 12px; }
.mg-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mg-path li { padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); font-size: .86rem; animation: log-in .4s var(--ease) both; animation-delay: calc(var(--k) * .07s); }
.mg-path li:last-child { background: var(--bad); color: #fff; box-shadow: none; }
.mg-path li + li::before { content: "›"; margin: 0 8px 0 -4px; color: #8a9184; }
.mg-path li:last-child::before { color: rgba(255, 255, 255, .7); }
.mg-see { margin-top: 14px; display: flex; gap: 10px; align-items: center; font-size: .94rem; font-weight: 600; }
.mg-route .note { margin-top: 8px; }

@media (max-width: 1100px) {
  .rg, .cl, .pl, .rgn, .ap, .gc, .gg, .ph, .nw, .mg { grid-template-columns: 1fr; grid-template-areas: none; }
  .rg > *, .cl > *, .pl > *, .rgn > *, .ap > *, .gc > *, .gg > *, .ph > *, .nw > *, .mg > * { grid-area: auto !important; }
  .ay-row, .gp-steps { grid-template-columns: 1fr; }
  .gp-docs { grid-template-columns: 1fr; }
  .gp-ne { text-align: center; }
}
@media (max-width: 760px) {
  .rg-methods, .cl-doors, .pl-bill, .gc-cards, .ph-check, .mg-stack { grid-template-columns: 1fr; }
  .rg-dev { grid-template-columns: 3em 1fr; }
  .rg-res { grid-column: 1 / -1; }
  .nw-chain { grid-template-columns: 1fr; gap: 8px; }
  .nw-chain::before { display: none; }
  .nw-chain li { grid-template-columns: 44px 1fr; text-align: left; justify-items: start; align-items: center; }
  .opg { flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
  .opg::before { display: none; }
}