/* Revision 18a: the homepage (approved prototype of 2026-10-25). Builds on brand.css. */
.section { position: relative; padding: clamp(72px, 9vw, 120px) 0; }
.section.alt { background: var(--paper-2); }
/* Revision 18q: supporting sections take less height than the main ones. */
.section.compact { padding: clamp(52px, 6vw, 80px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin-top: 16px; }
.section-head .lede { margin-top: 16px; }
.card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }

/* Hero: the promise and the button on the left, real sample name cards on the right */
.hero { position: relative; overflow: hidden; }
.hero-art { position: absolute; inset: 0 0 0 auto; width: 60%; background: url(assets/ink-landscape.webp) 60% 62% / cover no-repeat; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: start; align-content: center; min-height: min(760px, calc(100svh - 72px)); padding: 40px 0 56px; }
/* Revision 18w: both columns start at the top of one centred row, so the eyebrow and the samples' label row
   share a line. The eyebrow is a block (inline, it sat 12 px low in its line box). */
.hero-copy > .eyebrow { display: flex; }
.hero-copy h1 { margin-top: 22px; max-width: 12.5em; }
.hero-description { margin: 22px 0 0; max-width: 33em; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 32px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.hero-proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof .i { color: var(--wood); }
.hero-samples { position: relative; justify-self: end; width: 100%; max-width: 440px; }
.samples-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; line-height: 1; color: var(--ink-3); }
.sample-dots { display: flex; gap: 6px; }
.sample-dots button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: var(--line-2); transition: background .2s, width .2s; }
.sample-dots button[aria-selected="true"] { width: 34px; background: var(--red); }
.sample-cards { display: grid; }
.sample-cards > .name-card { grid-area: 1 / 1; transition: opacity .5s, transform .5s; }
.sample-cards > .name-card[aria-hidden="true"] { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { display: flex; flex-direction: column; padding: 26px 26px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.step-visual { position: relative; display: grid; place-items: center; height: 168px; margin-bottom: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.step-number { display: flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.step-number .i { width: 20px; height: 20px; }
.step h3 { margin: 12px 0 10px; }
.step p { font-size: 15.5px; color: var(--ink-2); }
.mini-pillars { display: grid; grid-template-columns: repeat(4, 46px); gap: 8px; text-align: center; }
.mini-pillars .label { margin-bottom: 6px; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mini-pillars .pair { display: grid; gap: 4px; }
.mini-pillars .pair span { display: grid; place-items: center; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: 600 21px/1 var(--zh); }
.mini-pillars .pair.day span:first-child { border-color: var(--red); background: var(--red); color: #fff; }
.mini-pillars .day-label { grid-column: 3; margin-top: 6px; font: 600 9.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.mini-characters { display: flex; gap: 14px; }
.mini-characters div { display: grid; place-items: center; align-content: center; gap: 8px; width: 78px; height: 96px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.mini-characters b { font: 600 38px/1 var(--zh); }
.mini-characters .element { padding: 4px 8px; font-size: 10px; }
.section-foot { display: flex; justify-content: center; margin-top: 30px; }

/* Revision 18e: name styles, right under How it works on the same band */
.names-section { padding-top: 0; }
.name-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.name-style { padding: 26px 24px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.name-style h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.name-style h3 span { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.name-style > p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.name-style ul { margin: 16px 0 0; padding: 0; list-style: none; }
.name-style li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.name-style .h { grid-row: span 2; font: 600 30px/1 var(--zh); color: var(--red); }
.name-style .p { font: 600 14.5px/1.3 var(--pinyin); }
.name-style .m { grid-column: 2; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.name-style .element { grid-column: 3; grid-row: 1 / span 2; padding: 5px 8px; font-size: 10.5px; }
.names-foot { flex-wrap: wrap; align-items: center; gap: 12px 24px; text-align: center; }
.names-foot p { font-size: 15px; color: var(--ink-2); }
.names-foot [lang="zh"] { font-family: var(--zh); }

/* What you get. Revision 18q: each card opens with its price, so free and paid read at a glance. */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; padding: 30px 32px; border-radius: var(--radius-lg); }
.tier.free { border: 1px solid var(--line); background: var(--card); }
.tier.full { overflow: hidden; background: var(--jade); color: #eee8db; box-shadow: 0 30px 60px -36px rgba(24, 63, 53, .9); }
.tier.full::after { content: ""; position: absolute; right: -60px; top: -40px; width: 260px; height: 260px; background: url(assets/brand/seal.svg) center / contain no-repeat; opacity: .07; transform: rotate(8deg); pointer-events: none; }
.tier-head { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tier.full .tier-head { border-color: rgba(255, 255, 255, .14); }
.tier-tag { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.tier.full .tier-tag { color: var(--gold); }
.tier h3 { margin: 8px 0 12px; font-size: 26px; }
.tier.full h3 { color: #fff; }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.tier-amount { font: 500 52px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.tier.full .tier-amount { color: #fff; }
.tier-per { font: 500 14.5px/1.3 var(--sans); color: var(--ink-3); }
.tier.full .tier-per { color: #b9c4bd; }
.tier-line { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-3); }
.tier.full .tier-line { color: var(--gold); }
.tier-badge { position: absolute; top: 30px; right: 30px; z-index: 2; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--red); font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; box-shadow: 0 10px 22px -12px rgba(173, 61, 44, .9); }
.ticks { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.ticks .i { margin-top: 2px; color: var(--wood); }
.tier.full .ticks .i { color: var(--gold); }
.ticks small { display: block; font-size: 13.5px; color: var(--ink-3); }
.tier.full .ticks small { color: #a9b6ae; }
.tier-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: auto; padding-top: 22px; }
.tier-note { font-size: 13.5px; color: #a9b6ae; }
.peek { position: relative; z-index: 1; margin-bottom: 20px; padding: 16px 18px; border-radius: 14px; background: #fbf8f1; color: var(--ink); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
.peek-top { display: flex; justify-content: space-between; font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.peek-title { margin: 10px 0 12px; font: 500 20px/1.2 var(--serif); }
.peek-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.peek-badges .chip { padding: 3px 10px 3px 3px; font-size: 12px; }
.peek-badges .chip .han { min-width: 20px; height: 20px; border-radius: 5px; font-size: 12px; }
.peek-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.peek-chapters span { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font: 500 11.5px/1.25 var(--sans); }
.peek-chapters b { display: block; margin-bottom: 4px; font: 600 10px/1 var(--sans); letter-spacing: .08em; color: var(--red); }
.peek.free-peek { border: 1px solid var(--line); background: var(--paper); box-shadow: none; }
.free-peek .peek-name { display: flex; align-items: center; gap: 16px; margin: 12px 0 14px; }
.free-peek .peek-name b { flex: none; white-space: nowrap; font: 600 46px/1 var(--zh); letter-spacing: .04em; }
.free-peek .peek-name i { display: block; font: 500 18px/1.2 var(--pinyin); }
.free-peek .peek-name span { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.free-peek .play { margin-left: auto; }

/* Inside a reading. Revision 18q: the heading sits beside the excerpt, and the classical line
   becomes the excerpt's footer, so the section is about half its former height. */
.excerpt { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.excerpt-head h2 { margin-top: 16px; }
.excerpt-note { margin: 18px 0 20px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.quote { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.quote::before { content: "\201C"; position: absolute; left: 20px; top: -8px; font: 400 104px/1 var(--serif); color: var(--red-tint); }
.quote blockquote { position: relative; margin: 0; padding: 34px clamp(26px, 3vw, 40px) 26px; font: 400 clamp(18px, 1.6vw, 21px)/1.55 var(--serif); color: var(--ink); }
.term { position: relative; border-bottom: 1.5px dotted var(--gold-deep); cursor: help; white-space: nowrap; }
.term:hover, .term:focus { color: var(--red); border-color: var(--red); outline: none; }
.term .tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: 270px; padding: 14px 16px; border-radius: 12px; background: var(--jade); color: #f4efe4; box-shadow: var(--shadow); font: 400 14px/1.5 var(--sans); white-space: normal; text-align: left; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(4px); transition: opacity .16s, transform .16s; }
.term .tip b { display: block; margin-bottom: 4px; font: 600 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.term:hover .tip, .term:focus .tip { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.classic { display: flex; align-items: center; gap: 20px; padding: 18px clamp(26px, 3vw, 40px); background: var(--jade); color: #c4cdc7; }
.classic-lines { flex: none; font: 600 22px/1.3 var(--zh); letter-spacing: .14em; color: #fff; }
.classic-text { font: 400 13.5px/1.5 var(--sans); }
.classic-text b { font-weight: 600; color: var(--gold); }

/* Revision 18z2 (user, 2026-11-05): the "Made with care" cards repeated the three steps, so they were folded
   into How it works; its privacy promise and cultural note sit in one row under the steps. */
.how-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 48px; margin-top: 34px; }
.how-notes .trust-note { max-width: 470px; }
.trust-note { display: flex; gap: 10px; max-width: 430px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.trust-note > .i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold-deep); }
.trust-note a { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.trust-note a:hover { color: var(--red); border-color: var(--red); }
.trust-note a .i { width: 14px; height: 14px; }
.trust-note b { font-weight: 600; color: var(--ink); }

/* The form, in two steps, with the birth-moment preview beside it */
/* Revision 18q: the panel is as tall as the form beside it, top and bottom aligned. */
.begin-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: stretch; }
#birth-form { padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.form-progress { display: flex; gap: 10px; margin-bottom: 28px; }
.form-progress div { flex: 1; }
.form-progress b { display: block; height: 4px; margin-bottom: 10px; border-radius: 4px; background: var(--line); transition: background .3s; }
.form-progress span { font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.form-progress .is-on b { background: var(--red); }
.form-progress .is-on span { color: var(--ink); }
.form-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-heading h3 { margin-bottom: 6px; }
.form-heading p { font-size: 15px; color: var(--ink-3); }
.required-note { margin-top: 8px !important; font-size: 13px !important; }
.req { margin-left: 3px; font-weight: 700; color: var(--red); }
.required-note .req { margin: 0 2px 0 0; }
.optional { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 24px; }
.form-fields .field.wide { grid-column: 1 / -1; }
#birth-form .field { position: relative; display: grid; gap: 7px; align-content: start; margin: 0 0 18px; }
#birth-form .field label { font: 600 14px/1.2 var(--sans); }
#birth-form .field input:not([type="checkbox"]), #birth-form .field select { width: 100%; height: 52px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; font: 400 16px/1 var(--sans); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
#birth-form .field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23485754' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center no-repeat; padding-right: 40px; }
#birth-form .field input:focus, #birth-form .field select:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 4px rgba(24, 63, 53, .12); }
#birth-form .field small { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
#birth-form .field .is-invalid { border-color: var(--red); background-color: #fff8f6; }
#birth-form .field .field-error { order: 3; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--red); }
#birth-form .field[hidden] { display: none !important; }
#birth-form .consent-field { grid-column: 1 / -1; }
#birth-form .consent-label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
#birth-form .consent-label input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--jade); }
.timezone-picker { position: relative; }
#birth-form .timezone-picker input { padding-right: 40px; }
.timezone-search-icon { position: absolute; right: 17px; top: 20px; width: 11px; height: 11px; border: 1.5px solid var(--ink-3); border-radius: 50%; pointer-events: none; }
.timezone-search-icon::after { content: ""; position: absolute; right: -4px; bottom: -2px; width: 5px; height: 1.5px; background: var(--ink-3); transform: rotate(45deg); }
.timezone-options { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); scroll-padding: 6px; }
.timezone-option { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 7px; cursor: pointer; line-height: 1.4; overflow-wrap: anywhere; }
.timezone-option:hover, .timezone-option[aria-selected="true"] { background: var(--paper); color: var(--jade); }
.timezone-option-label { font-size: 15px; font-weight: 600; }
.timezone-option-zone { font-size: 12px; color: var(--ink-3); }
.timezone-empty { padding: 12px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.timezone-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The time zone is set from the birthplace when it can be; the picker opens only when needed. */
.timezone-summary { display: none; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.timezone-summary .i { margin-right: 6px; color: var(--wood); }
.timezone-summary button { margin-left: 10px; padding: 0; border: 0; background: none; font-weight: 600; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.timezone-field.is-auto .timezone-summary { display: block; }
.timezone-field.is-auto .timezone-picker, .timezone-field.is-auto #time-zone-help { display: none; }
.step-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.step-count { font-size: 13.5px; color: var(--ink-3); }
.step-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 0; border: 0; background: none; font-weight: 500; color: var(--ink-2); }
.step-back:hover { color: var(--red); }
.verification-line { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-3); }
.turnstile-box { display: flex; justify-content: center; margin: 0 0 12px; }
.turnstile-box:empty { display: none; }
#birth-form .error-message { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #fbeee9; font-size: 14.5px; color: var(--red-deep); }
#birth-form button[type="submit"][aria-disabled="true"] { background: #8b857b; box-shadow: none; transform: none; }
#birth-form .form-disclaimer { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
#birth-form .form-disclaimer a { color: inherit; text-underline-offset: 3px; }
#birth-form .form-local-notice { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
#birth-form .paywall { margin: 0 0 16px; padding: 22px; border: 1px solid var(--line-2); border-radius: 14px; background: #fbf4e6; }
#birth-form .paywall-eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: var(--red); }
#birth-form .paywall h4 { margin: 0 0 8px; font-size: 22px; line-height: 1.3; color: var(--jade); }
#birth-form .paywall-wait, #birth-form .paywall-includes, #birth-form .paywall-note, #birth-form .paywall-status { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
#birth-form .paywall-price { margin: 0 0 8px; font-size: 15px; color: var(--jade); }
#birth-form .paywall-price strong { font-size: 22px; }
#birth-form .paywall-price span { display: block; font-size: 13px; color: var(--ink-3); }
#birth-form .paywall-consent { margin: 0 0 12px; }
#birth-form .paywall-note { font-size: 12.5px; }
#birth-form .paywall-status:empty { display: none; }

/* Your birth moment: the four pillars by the server's method, as the reader types */
.moment { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: clamp(26px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--jade); color: #ece6d8; }
.moment::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 300px; height: 220px; border-radius: 50%; background: url(assets/ink-landscape.webp) center 70% / cover; opacity: .14; filter: grayscale(1) brightness(2); pointer-events: none; }
.moment .eyebrow { color: var(--gold); }
.moment h3 { margin: 14px 0 6px; font-size: 24px; color: #fff; }
.moment-lunar { min-height: 21px; font: 500 15px/1.4 var(--zh); color: #cfd8d2; }
.moment-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 26px 0 20px; text-align: center; }
.moment-pillars .label { margin-bottom: 8px; font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9fb0a7; }
.moment-pillars .pair { display: grid; gap: 6px; }
.moment-pillars .pair span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 76px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .07); font: 600 30px/1 var(--zh); color: #fff; }
/* Revision 24: the pinyin under each stem and branch (app.js setPillar). */
.moment-pillars .pair span b { font: 600 30px/1 var(--zh); color: #fff; }
.moment-pillars .pair span small { font: 500 12.5px/1 var(--pinyin); letter-spacing: .02em; color: #cdd9d2; }
.moment-pillars .pair.day span:first-child small { color: #fde7df; }
.moment-pillars .pair.is-empty span { color: rgba(255, 255, 255, .25); }
.moment-pillars .pair.day span:first-child { border-color: var(--red); background: var(--red); }
.moment-dm { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.moment-dm .big { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 12px; background: var(--red); font: 600 30px/1 var(--zh); color: #fff; }
.moment-dm b { display: block; font: 600 15.5px/1.3 var(--sans); color: #fff; }
.moment-dm span { font-size: 14px; color: #c4cfc8; }
.moment-guide { position: relative; z-index: 1; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.moment-guide-title { margin-bottom: 8px !important; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.moment-guide > p:not(.moment-guide-title) { font-size: 14px; line-height: 1.55; color: #c4cfc8; }
.moment-elements { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.moment-elements li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); font: 500 12.5px/1 var(--sans); color: #dfe6e1; }
.moment-elements b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 13px/1 var(--zh); color: #fff; }
.moment-elements .wood b { background: var(--wood); }
.moment-elements .fire b { background: var(--fire); }
.moment-elements .earth b { background: #866629; }
.moment-elements .metal b { background: #66717a; }
.moment-elements .water b { background: #3d6489; }
.moment-note { position: relative; z-index: 1; margin-top: auto !important; padding-top: 22px; font-size: 12.5px; line-height: 1.5; color: #9aada3; }

.moment-inline { display: none; }
@media (max-width: 1020px) {
  .moment-inline { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px; border-radius: 12px; background: var(--jade); color: #c4cfc8; }
  .moment-inline .big { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--red); font: 600 24px/1 var(--zh); color: #fff; }
  .moment-inline b { display: block; font: 600 14.5px/1.3 var(--sans); color: #fff; }
  .moment-inline span:not(.big) { font-size: 14px; letter-spacing: .04em; }
}

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 2px; list-style: none; cursor: pointer; font: 500 19px/1.35 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--red); transition: transform .2s; }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details p { max-width: 680px; margin: -6px 0 22px; color: var(--ink-2); }

/* Closing call to action */
.closing { position: relative; overflow: hidden; background: var(--jade); color: #eee8db; }
.closing::before { content: ""; position: absolute; inset: 0 0 0 45%; background: url(assets/ink-landscape.webp) center 66% / cover; opacity: .16; filter: grayscale(.6); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
.closing .wrap { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; padding: 84px 0; }
.closing h2 { max-width: 14em; color: #fff; }
.closing p { margin-top: 14px; color: #b9c4bd; }

@media (max-width: 1020px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .tiers, .excerpt, .begin-grid { grid-template-columns: 1fr; }
  .name-styles { gap: 14px; }
  .name-style { padding: 22px 18px 14px; }
  .moment { position: relative; top: 0; }
  .classic { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding: 28px 0 56px; }
  .hero-art { width: 100%; opacity: .22; }
  .hero-samples { justify-self: center; }
  .name-styles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .steps, .form-fields { grid-template-columns: 1fr; }
  .hero-cta { gap: 16px; }
  .hero-cta .button { width: 100%; }
  .tier { padding: 26px 22px; }
  .tier-badge { position: static; align-self: flex-start; margin-bottom: 16px; }
  .tier-amount { font-size: 44px; }
  .peek-chapters { grid-template-columns: repeat(2, 1fr); }
  .closing .wrap { padding: 64px 0; }
  .closing .button { width: 100%; }
  .moment { padding: 24px 20px; }
  .moment-pillars .pair span { height: 58px; gap: 4px; font-size: 21px; }
  .moment-pillars .pair span b { font-size: 21px; }
  .moment-pillars .pair span small { font-size: 11px; }
  .step-actions .button { width: 100%; }
}

/* Revision 18w. The fan: the first three sample names on their share cards, held like a hand of cards. It is a
   slide like the name cards: the same crossfade, the same stamp easing, the same rise for the text. */
.sample-cards > .fan-card { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .5s, transform .5s; }
.sample-cards > .fan-card[aria-hidden="true"] { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
.fan { position: relative; width: 100%; height: 372px; }
.fan-item {
  --x: 0px; --y: 0px; --r: 0deg; --lift: 0px;
  position: absolute; left: 50%; top: 50%; width: 218px; aspect-ratio: 3 / 4; margin: 0; padding: 0; border: 0; border-radius: 9px; background: none; cursor: pointer;
  transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) + var(--lift))) rotate(var(--r));
  transform-origin: 50% 120%;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.fan-item img { display: block; width: 100%; height: 100%; border-radius: 9px; box-shadow: 0 0 0 1px rgba(25, 43, 43, .06), 0 4px 10px -4px rgba(15, 37, 32, .35), 0 22px 40px -18px rgba(15, 37, 32, .55); }
/* As in a hand of cards: the right card lies on top, each a little more turned. */
.fan-left { --x: -83px; --y: 15px; --r: -11deg; z-index: 1; }
.fan-middle { --x: 0px; --y: -4px; --r: -2deg; z-index: 2; }
.fan-right { --x: 85px; --y: 13px; --r: 8deg; z-index: 3; }
/* Pointing at the fan opens it a little; the card under the pointer lifts. */
.fan:hover .fan-left { --x: -96px; --r: -13deg; }
.fan:hover .fan-right { --x: 98px; --r: 10deg; }
.fan-item:hover, .fan-item:focus-visible { --lift: -16px; z-index: 4; }
.fan-item:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.fan-caption { margin-top: 4px; text-align: center; }
.fan-title { margin: 0; font: 400 22px/1.3 var(--serif); color: var(--ink); }
.fan-note { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* The deal: the cards leave one stack and spread into the hand, one after another, overshooting a
   touch and settling, as the name characters stamp and settle; then the caption rises, at .8 s
   like the name cards' text. */
@keyframes fan-deal {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 26px) rotate(0deg) scale(.9); }
  62% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 1.05), var(--y)) rotate(calc(var(--r) * 1.15)) scale(1.01); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
/* Revision 18x: the deal fills backwards only. Each card waits hidden for its turn, and once it lands its own
   transform (which the last keyframe equals) takes over again, so pointing at the fan can lift and ease the cards. */
.fan-card.is-revealing .fan-item { animation: fan-deal .8s cubic-bezier(.2, .8, .2, 1) backwards; }
.fan-card.is-revealing .fan-left { animation-delay: .06s; }
.fan-card.is-revealing .fan-middle { animation-delay: .22s; }
.fan-card.is-revealing .fan-right { animation-delay: .38s; }
.fan-card.is-revealing .fan-caption { animation: rise .6s ease both .8s; }
@media (prefers-reduced-motion: reduce) { .fan-item { transition: none; } }
@media (max-width: 560px) {
  .fan { height: 330px; }
  .fan-item { width: 196px; }
  .fan-left { --x: -74px; } .fan-right { --x: 78px; }
  .fan:hover .fan-left { --x: -84px; } .fan:hover .fan-right { --x: 88px; }
}
/* Revision 18w: proportions of the hero samples (founder 2026-11-04: the card was too big). The large parts (the
   name, the padding, the gaps) shrink; small text keeps its size so it stays easy to read. The
   samples column is no taller than the copy beside it. */
.hero-samples { max-width: 400px; }
.hero-samples .name-card { padding: 24px 26px 20px; }
.hero-samples .nc-hanzi { margin: 14px 0 8px; font-size: clamp(64px, 6.2vw, 86px); }
.hero-samples .nc-pinyin { gap: 10px; font-size: 20px; }
.hero-samples .play { width: 34px; height: 34px; }
.hero-samples .play .i { width: 16px; height: 16px; }
.hero-samples .nc-rule { margin: 16px 0 14px; }
.hero-samples .nc-chars { gap: 12px; }
.hero-samples .nc-char .h { font-size: 30px; }
.hero-samples .nc-char .element { margin-top: 5px; padding: 5px 9px; font-size: 11px; }
.hero-samples .nc-image { margin-top: 14px; font-size: 15.5px; }
.hero-samples .nc-badges { gap: 6px; margin-top: 14px; }
.hero-samples .chip { padding: 4px 11px 4px 4px; font-size: 13px; }
.hero-samples .chip .han { min-width: 24px; height: 24px; font-size: 13px; }
.hero-samples .nc-foot { margin-top: 14px; }
/* Short screens (laptops at 125-150% display scaling): a little tighter again, so the first
   screen holds the whole card. */
@media (min-width: 1021px) and (max-height: 760px) {
  .hero-grid { padding: 24px 0 32px; }
  .hero-samples { max-width: 372px; }
  .hero-samples .nc-hanzi { margin: 10px 0 6px; font-size: 68px; }
  .hero-samples .nc-rule { margin: 12px 0 10px; }
  .hero-samples .nc-image { margin-top: 10px; }
  .hero-samples .nc-badges, .hero-samples .nc-foot { margin-top: 10px; }
  .fan { height: 330px; }
  .fan-item { width: 194px; }
  .fan-left { --x: -74px; } .fan-right { --x: 76px; }
  .fan:hover .fan-left { --x: -86px; } .fan:hover .fan-right { --x: 88px; }
}
/* Very short screens: the smallest proportions that keep every line of the card. */
@media (min-width: 1021px) and (max-height: 620px) {
  .hero-grid { padding: 16px 0 24px; }
  /* Revision 25: the main button stays whole on the first screen of a 1920x1080 laptop at 150% (it was cut by 5px at 551px). */
  .hero-copy h1 { margin-top: 14px; font-size: 56px; }
  .hero-cta { margin-top: 22px; }
  .hero-samples { max-width: 350px; }
  .samples-label { margin-bottom: 8px; }
  .sample-dots button { width: 16px; } .sample-dots button[aria-selected="true"] { width: 26px; }
  .hero-samples .name-card { padding: 18px 22px 16px; }
  .hero-samples .nc-hanzi { margin: 6px 0 4px; font-size: 58px; }
  .hero-samples .nc-pinyin { font-size: 18px; }
  .hero-samples .play { width: 30px; height: 30px; }
  .hero-samples .nc-rule { margin: 10px 0 8px; }
  .hero-samples .nc-char .element { margin-top: 3px; }
  .hero-samples .nc-image { margin-top: 8px; font-size: 14.5px; }
  .hero-samples .nc-badges, .hero-samples .nc-foot { margin-top: 8px; }
  .fan { height: 290px; }
  .fan-item { width: 172px; }
  .fan-left { --x: -66px; } .fan-right { --x: 68px; }
  .fan:hover .fan-left { --x: -76px; } .fan:hover .fan-right { --x: 78px; }
}
@media (max-width: 560px) { .hero-samples .name-card { padding: 22px 18px 18px; } }
/* Revision 18z: a hyphenated word that should not break at its hyphen ("hand-picked"). */
.nowrap { white-space: nowrap; }
/* Revision 21: contrast and tap size (review of 2026-11-04). The earth and metal characters and the note in the birth-moment panel
   reach 4.5:1 (earth #866629 and metal #66717a under white, note #9aada3); each sample dot keeps its look but takes taps over 28 x 24 px. */
.sample-dots button { position: relative; }
.sample-dots button::after { content: ""; position: absolute; inset: -10px -3px; }