/*
 * Pearls of Quran — public inner pages: About, Competition, Help, Contact, Privacy Policy, Delete Account, 404.
 * Shared building blocks first (hero art, split layouts, real-page compositions, device mock), then one block per page.
 * Animations use transform + opacity only.
 */

/* ───────────────────────────── shared ───────────────────────────── */
.page-hero .wave path, .section .wave path { fill: var(--wave, var(--pearl-50)); }
.page-hero .lead { max-width: 54ch; color: #C6D8E4; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.page-hero--center .page-hero__text { justify-items: center; text-align: center; max-width: 820px; margin-inline: auto; }
.page-hero--center .lead { margin-inline: auto; }
.page-hero--slim { padding-bottom: clamp(5rem, 11vw, 8.5rem); }
.section--deep { background: linear-gradient(180deg, var(--deep-900), var(--deep-950)); overflow: hidden; overflow: clip; isolation: isolate; }
.section--abyss { background: linear-gradient(180deg, var(--deep-950), var(--abyss)); overflow: hidden; overflow: clip; isolation: isolate; }
.section--deep > .container, .section--abyss > .container, .band > .container { position: relative; z-index: 1; }
.band { overflow: hidden; overflow: clip; isolation: isolate; }
.cta-band { border-top: 1px solid rgba(229, 197, 104, .22); }
.cta-band__shell svg { width: 100%; height: auto; }
.cta-band__shell { cursor: pointer; border-radius: 50%; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split--wide-art { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.copy { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; }
.copy p { color: var(--text-soft); max-width: 58ch; }
.copy .lead { color: var(--text); }
.copy h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
.art { position: relative; min-width: 0; display: grid; place-items: center; }
@media (max-width: 860px) {
  .split, .split--wide-text, .split--wide-art { grid-template-columns: minmax(0, 1fr); }
  .split--flip > .art { order: -1; }
}

/* a floating pearl placed around a composition */
.orb { position: absolute; width: var(--s, 56px); height: var(--s, 56px); z-index: 3; pointer-events: none; }
.orb svg { width: 100%; height: 100%; }
.orb:nth-of-type(2n) .pearl--float { animation-delay: -1.8s; }
.orb:nth-of-type(3n) .pearl--float { animation-delay: -3.1s; animation-duration: 6.4s; }

/* fan of real book pages */
.fan { position: relative; width: min(100%, 470px); aspect-ratio: 1 / .96; margin-inline: auto; }
.fan__page { position: absolute; left: 50%; bottom: 5%; width: 46%; margin-left: -23%; aspect-ratio: 987 / 1418; height: auto; object-fit: cover; border-radius: 5px; background: #fff; box-shadow: 0 2px 6px rgba(2, 10, 20, .3), 0 24px 50px rgba(2, 10, 20, .45); transform-origin: 50% 135%; transition: transform .9s var(--ease-out); }
.fan__page:nth-child(1) { transform: rotate(-17deg); }
.fan__page:nth-child(2) { transform: rotate(17deg); }
.fan__page:nth-child(3) { transform: translateY(-3%); }
@media (hover: hover) {
  .fan:hover .fan__page:nth-child(1) { transform: rotate(-22deg); }
  .fan:hover .fan__page:nth-child(2) { transform: rotate(22deg); }
  .fan:hover .fan__page:nth-child(3) { transform: translateY(-7%); }
}
[data-theme="pearl"] .fan__page { box-shadow: 0 2px 6px rgba(40, 56, 80, .12), 0 22px 46px rgba(40, 56, 80, .22); }

/* white plate that carries the printed cover (the photo has a white ground) */
.plate { position: relative; border-radius: var(--r-xl); padding: clamp(.9rem, 2.4vw, 1.6rem); background: linear-gradient(160deg, #FFFFFF, #F4EDDD); border: 1px solid rgba(229, 197, 104, .55); box-shadow: var(--shadow-3); overflow: hidden; }
.plate img { width: 100%; height: auto; border-radius: calc(var(--r-xl) - 14px); }

/* phone mock used to show the online side */
.device { position: relative; width: min(100%, 236px); aspect-ratio: 9 / 18.6; padding: 9px; border-radius: 38px; background: #04101C; border: 1.5px solid rgba(229, 197, 104, .6); box-shadow: 0 0 0 5px rgba(4, 16, 28, .5), var(--shadow-3); color: #F3F7FA; }
.device__screen { position: relative; height: 100%; border-radius: 29px; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, #14677F 0%, #0C3550 45%, var(--deep-900) 100%); font-size: .7rem; line-height: 1.3; }
.device__bar { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: 1rem .8rem .55rem; font-weight: 650; }
.device__bar small { font-size: .62rem; font-weight: 600; color: #B4C8D6; }
.device__body { flex: 1; min-height: 0; display: grid; place-items: center; padding: .2rem .9rem; }
.device__body img { width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 24px rgba(2, 10, 20, .5); }
.device__foot { display: grid; gap: .5rem; padding: .6rem .8rem .95rem; }
.device__dots { display: flex; justify-content: center; gap: 4px; }
.device__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.device__dots i.on { background: var(--gold-300); }
.device__btn { display: grid; place-items: center; min-height: 30px; border-radius: 30px; background: linear-gradient(180deg, #EBCB72, var(--gold-500)); color: #1B1303; font-weight: 700; font-size: .68rem; }
.device__menu { display: grid; gap: 2px; padding: .2rem .55rem; align-content: start; flex: 1; }
.device__menu span { display: flex; align-items: center; gap: .5rem; padding: .5rem .55rem; border-radius: 10px; color: #C6D8E4; font-weight: 600; }
.device__menu .i { width: 1.1em; height: 1.1em; color: var(--gold-300); }
.device__menu .is-danger { background: rgba(229, 72, 77, .18); color: #FFB3B5; box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .55); }
.device__menu .is-danger .i { color: #FF8B8F; }

/* small facts row (email / phone / address) */
.facts { display: grid; gap: .9rem; }
.facts li { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; }
.facts__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(229, 197, 104, .45); background: rgba(204, 153, 51, .12); color: var(--accent); }
.facts__k { display: block; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.facts__v { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
a.facts__v:hover { color: var(--accent); }
.facts--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 820px) { .facts--row { grid-template-columns: 1fr; } }

/* "get involved" tiles: a sea scene with art on top, words below */
.involve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); }
.involve__tile { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); transition: transform .5s var(--ease-out), border-color var(--t-med); }
.involve__scene { position: relative; aspect-ratio: 16 / 11; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #17708A 0%, #0D3B58 60%, #0A2438 100%); }
.involve__scene .rays { animation-duration: 14s; }
.involve__scene > .plate { width: 38%; padding: 6px; border-radius: 12px; transform: rotate(-6deg); z-index: 1; }
.involve__scene > .plate img { border-radius: 7px; }
.involve__scene > .fan { width: 74%; z-index: 1; margin-top: 6%; }
.involve__scene > .shellbox { width: 52%; z-index: 1; }
.involve__body { display: grid; gap: .55rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; align-content: start; }
.involve__body h3 { font-size: 1.45rem; }
.involve__body p { color: var(--text-soft); font-size: .97rem; }
.involve__go { display: inline-flex; align-items: center; gap: .45em; margin-top: .5rem; font-weight: 650; color: var(--accent); }
.involve__go .i { transition: transform var(--t-med) var(--ease-out); }
.involve__tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) {
  .involve__tile:hover { transform: translateY(-6px); border-color: var(--gold-300); }
  .involve__tile:hover .involve__go .i { transform: translateX(5px); }
}
@media (max-width: 900px) { .involve { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.shellbox svg { width: 100%; height: auto; }

/* ───────────────────────────── About ───────────────────────────── */
.hero-fan { position: relative; width: min(100%, 470px); }
.hero-fan .orb:nth-of-type(1) { --s: 74px; left: -2%; top: 8%; }
.hero-fan .orb:nth-of-type(2) { --s: 46px; right: 2%; top: 0; }
.hero-fan .orb:nth-of-type(3) { --s: 58px; right: -3%; bottom: 14%; }
.hero-fan .orb:nth-of-type(4) { --s: 34px; left: 8%; bottom: 6%; }

/* one real page with its three parts pointed out */
.anno { position: relative; width: min(100%, 540px); padding-right: 36%; margin-inline: auto; }
.anno__page { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 6px rgba(40, 56, 80, .1), 0 26px 60px rgba(40, 56, 80, .22); transform: rotate(-2.5deg); }
.anno__tag { position: absolute; left: 66%; display: grid; gap: .1rem; padding-left: 2.6rem; line-height: 1.25; }
.anno__tag::before { content: ''; position: absolute; left: 0; top: .72em; width: 2.1rem; height: 1px; background: var(--gold-500); }
.anno__tag::after { content: ''; position: absolute; left: -4px; top: calc(.72em - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px rgba(204, 153, 51, .2); }
.anno__tag b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 650; color: var(--text); }
.anno__tag span { font-size: var(--fs-sm); color: var(--text-soft); }
@media (max-width: 520px) { .anno { padding-right: 40%; } .anno__tag { left: 62%; padding-left: 1.6rem; } .anno__tag::before { width: 1.2rem; } .anno__tag b { font-size: .92rem; } .anno__tag span { display: none; } }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 1.2rem clamp(1.2rem, 3vw, 2.6rem); margin-top: .8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); width: 100%; }
.stats .stat__num { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); }
.stats .stat__label { font-size: .7rem; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the Aayaatul Quran family: three rings of beads, one per programme */
.family { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: end; position: relative; }
.family__item { display: grid; justify-items: center; gap: .7rem; text-align: center; min-width: 0; }
.family__ring { position: relative; width: min(100%, 250px); aspect-ratio: 1; display: grid; place-items: center; }
.family__item--main .family__ring { width: min(100%, 320px); }
.family__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.family__ring svg.spin { animation: ring-spin 90s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.family__count { position: relative; display: grid; line-height: 1; }
.family__count b { font-family: var(--font-display); font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); font-weight: 750; letter-spacing: -.05em; }
.family__item--main .family__count b { font-size: clamp(3.2rem, 2rem + 5vw, 6rem); }
.family__count small { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-top: .3rem; }
.family__item h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); }
.family__item p { color: var(--text-soft); font-size: .96rem; max-width: 30ch; }
.family__here { margin-bottom: -.2rem; }
.family__link { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem, 5vw, 3.5rem); padding: 1.1rem 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--glass); text-align: center; }
.family__link p { color: var(--text-soft); }
.family__link strong { color: var(--text); }
@media (max-width: 760px) {
  .family { grid-template-columns: 1fr; gap: 2.4rem; }
  .family__item--main { order: -1; }
  .family__ring, .family__item--main .family__ring { width: min(72%, 250px); }
}

/* book + online composition */
.duo { position: relative; width: min(100%, 500px); aspect-ratio: 1 / .98; margin-inline: auto; }
.duo .plate { position: absolute; left: 0; top: 4%; width: 56%; transform: rotate(-4deg); }
.duo .device { position: absolute; right: 2%; bottom: 0; width: 46%; }
.duo .orb:nth-of-type(1) { --s: 64px; right: 40%; top: 0; }
.duo .orb:nth-of-type(2) { --s: 40px; left: 6%; bottom: 3%; }
.ticks { display: grid; gap: .7rem; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 2.1rem; color: var(--text-soft); }
.ticks li::before { content: ''; position: absolute; left: 0; top: .12em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--gold-200) 45%, var(--gold-500)); box-shadow: 0 2px 6px rgba(166, 123, 36, .35); }
.ticks li strong { color: var(--text); }

/* vision & mission panels */
.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.vm__panel { position: relative; display: flex; flex-direction: column; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--line-strong); background: linear-gradient(180deg, #0F3550, #0A2438); box-shadow: var(--shadow-3); min-width: 0; }
.vm__pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #1A7C94 0%, #0E4463 70%, #0F3550 100%); }
.vm__pic--deep { background: linear-gradient(180deg, #0E4C6C 0%, #0A2C4C 70%, #0F3550 100%); }
.vm__pic .strand { width: 90%; position: relative; z-index: 1; }
.vm__pic .fan { width: 58%; position: relative; z-index: 1; margin-top: 8%; }
.vm__pic .plate { position: absolute; z-index: 2; width: 21%; right: 9%; bottom: 8%; padding: 5px; border-radius: 10px; transform: rotate(7deg); }
.vm__pic .plate img { border-radius: 6px; }
.vm__body { display: grid; gap: .9rem; padding: clamp(1.4rem, 3vw, 2.4rem); }
.vm__body .quote { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); color: #F3F7FA; }
@media (max-width: 820px) { .vm { grid-template-columns: 1fr; } }

/* the hadith */
.hadith { text-align: center; display: grid; justify-items: center; gap: 1.4rem; }
.hadith__shell { width: clamp(130px, 18vw, 190px); }
.hadith__ar { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); color: var(--gold-600); line-height: 1.9; }
.hadith .quote { font-size: clamp(2.1rem, 1.1rem + 5vw, 5rem); max-width: 17ch; color: var(--text); }
.hadith__ref { display: inline-flex; align-items: center; gap: .8rem; font-size: var(--fs-sm); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hadith__ref::before, .hadith__ref::after { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }
.hadith p.muted { max-width: 56ch; font-size: var(--fs-lg); }

.involve-foot { margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }

/* ───────────────────────────── Competition ───────────────────────────── */
.prize { position: relative; display: grid; justify-items: center; gap: 1rem; width: min(100%, 440px); padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r-2xl); border: 1px solid rgba(229, 197, 104, .45); background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow-3); text-align: center; }
.prize__k { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300); }
.prize__num { font-family: var(--font-display); font-size: clamp(2.9rem, 1.6rem + 5.4vw, 4.9rem); font-weight: 780; letter-spacing: -.05em; line-height: .95; white-space: nowrap; }
.prize__pearls { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 330px; }
.prize__pearls svg { width: 100%; height: auto; }
.prize__note { color: #C6D8E4; font-size: .95rem; max-width: 32ch; }
.status { display: inline-flex; align-items: center; gap: .55rem; min-height: 38px; padding: 0 1rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 650; border: 1px solid rgba(47, 184, 138, .5); background: rgba(47, 184, 138, .14); color: #7CE6C0; }
.status::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.status.is-closed { border-color: rgba(242, 169, 59, .55); background: rgba(242, 169, 59, .14); color: #FFCC7A; }
.status.is-loading { border-color: var(--line-strong); background: var(--glass); color: var(--text-soft); }
[data-theme="pearl"] .status { color: #0F7A57; }
[data-theme="pearl"] .status.is-closed { color: #8A5605; }
[data-theme="pearl"] .status.is-loading { color: var(--text-soft); }

.poster { position: relative; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; max-width: 1080px; border-radius: clamp(14px, 2.4vw, 30px); overflow: hidden; border: 1px solid rgba(229, 197, 104, .6); background: #fff; box-shadow: 0 0 0 clamp(4px, .8vw, 9px) rgba(255, 255, 255, .07), var(--shadow-3); }
.poster img { width: 100%; height: auto; }
.poster figcaption { position: absolute; left: 0; right: 0; bottom: 0; }

/* the five steps as a descent */
.journey { position: relative; display: grid; gap: clamp(2rem, 5vw, 3.6rem); padding: 0; margin: 0; list-style: none; counter-reset: step; }
.journey::before { content: ''; position: absolute; left: 50%; top: 30px; bottom: 30px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--gold-300), var(--teal-500) 45%, var(--deep-600)); opacity: .55; }
.step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; gap: clamp(.5rem, 2vw, 1.6rem); }
.step__node { grid-column: 2; grid-row: 1; position: relative; justify-self: center; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2); }
.step__node svg { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.step__node b { position: relative; font-family: var(--font-display); font-size: 1.35rem; font-weight: 750; color: #1B1303; }
.step__text { grid-column: 1; grid-row: 1; display: grid; gap: .5rem; justify-items: end; text-align: right; }
.step__vis { grid-column: 3; grid-row: 1; display: grid; justify-items: start; min-width: 0; }
.step:nth-child(even) .step__text { grid-column: 3; justify-items: start; text-align: left; }
.step:nth-child(even) .step__vis { grid-column: 1; justify-items: end; }
.step__k { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.step__text h3 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); max-width: 18ch; }
.step__text p { color: var(--text-soft); max-width: 40ch; }
.step__card { width: min(100%, 330px); border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-2); padding: 1rem; display: grid; gap: .7rem; }
.step__card--sea { background: linear-gradient(180deg, #14677F, #0A2438); border-color: rgba(229, 197, 104, .4); color: #F3F7FA; overflow: hidden; position: relative; }
.step__card .fan { width: 82%; margin-top: 4%; }
.step__card .cert-preview { width: 62%; margin-inline: auto; box-shadow: var(--shadow-2); }
.mock-phone { display: flex; align-items: center; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--field-line); background: var(--field-bg); overflow: hidden; font-weight: 650; font-variant-numeric: tabular-nums; }
.mock-phone b { padding: 0 .8rem; align-self: stretch; display: grid; place-items: center; border-right: 1.5px solid var(--field-line); background: var(--glass); color: var(--accent); }
.mock-phone span { padding: 0 .8rem; letter-spacing: .08em; color: var(--text-soft); }
.mock-btn { display: grid; place-items: center; min-height: 42px; border-radius: 42px; background: linear-gradient(180deg, #EBCB72, var(--gold-500)); color: #1B1303; font-weight: 700; font-size: .92rem; }
.mock-label { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.pass { display: grid; gap: .55rem; }
.pass__row { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); padding-bottom: .5rem; border-bottom: 1px dashed var(--line-strong); }
.pass__row span { color: var(--text-mute); }
.pass__row b { font-family: var(--font-display); letter-spacing: .02em; }
.live { display: grid; gap: .6rem; justify-items: start; }
.live__dot { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.live__dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; transform: scale(.8); } }
.live__when { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.live p { font-size: var(--fs-sm); color: #C6D8E4; }
@media (max-width: 820px) {
  .journey::before { left: 27px; }
  .step, .step:nth-child(even) { grid-template-columns: 54px minmax(0, 1fr); align-items: start; gap: .4rem 1rem; }
  .step__node { grid-column: 1; grid-row: 1 / span 2; width: 54px; height: 54px; }
  .step__node b { font-size: 1.1rem; }
  .step .step__text, .step:nth-child(even) .step__text { grid-column: 2; grid-row: 1; justify-items: start; text-align: left; }
  .step .step__vis, .step:nth-child(even) .step__vis { grid-column: 2; grid-row: 2; justify-items: start; margin-top: .6rem; }
}

/* matching demo */
.match { display: grid; gap: 1.1rem; width: 100%; padding: clamp(1rem, 2.6vw, 1.8rem); border-radius: var(--r-xl); border: 1px solid var(--line-strong); background: linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: var(--shadow-3); }
.match__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.match__score { font-family: var(--font-display); font-weight: 650; }
.match__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(.6rem, 2vw, 1.2rem); }
.match__col { display: grid; gap: .6rem; align-content: start; grid-auto-rows: minmax(74px, 1fr); }
.match__item { position: relative; display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 66px; padding: .5rem .9rem; border-radius: var(--r-md); border: 1.5px solid var(--field-line); background: rgba(3, 13, 26, .4); color: var(--text); text-align: left; font-weight: 550; font-size: .95rem; line-height: 1.35; transition: border-color var(--t-med), background-color var(--t-med), transform var(--t-fast), opacity var(--t-med); }
.match__item.ar { justify-content: flex-start; text-align: right; font-size: clamp(1.1rem, .9rem + .8vw, 1.4rem); line-height: 1.9; padding-block: .2rem; }
.match__item:active { transform: scale(.98); }
@media (hover: hover) { .match__item:not(.is-done):hover { border-color: var(--gold-300); } }
.match__item.is-picked { border-color: var(--gold-300); background: rgba(204, 153, 51, .18); }
.match__item.is-done { border-color: rgba(47, 184, 138, .6); background: rgba(47, 184, 138, .12); cursor: default; }
.match__item.is-wrong { border-color: var(--danger); background: var(--danger-soft); animation: field-shake .4s var(--ease-out); }
.match__dot { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; opacity: 0; transform: scale(.4); transition: opacity var(--t-med), transform .5s var(--ease-spring); }
.match__dot svg { width: 100%; height: 100%; }
.match__item.is-done .match__dot { opacity: 1; transform: none; }
.match__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; min-height: 40px; }
.match__msg { font-weight: 650; }
.match__msg.is-ok { color: var(--ok); }
.match__msg.is-bad { color: #FF8B8F; }
@media (max-width: 480px) { .match__item { min-height: 74px; padding-inline: .65rem; font-size: .86rem; } }

/* eligibility */
.elig { position: relative; width: min(100%, 420px); margin-inline: auto; }
.elig .cert-preview { transform: rotate(-3deg); }
.elig__stamp { position: absolute; right: -4%; bottom: 7%; z-index: 2; display: grid; justify-items: center; gap: .1rem; padding: .8rem 1.1rem; border-radius: var(--r-lg); background: var(--deep-800); color: #F3F7FA; border: 1px solid rgba(229, 197, 104, .6); box-shadow: var(--shadow-3); transform: rotate(4deg); }
.elig__stamp small { font-size: .66rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #B4C8D6; }
.elig__stamp b { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-300); letter-spacing: .02em; }
.elig .orb { --s: 66px; left: -5%; top: 10%; }
.closed-note { margin-top: .4rem; }
@media (max-width: 520px) { .elig__stamp { right: 0; } .elig .orb { left: 0; --s: 52px; } }

/* compact FAQ column */
.faq-narrow { max-width: 860px; margin-inline: auto; }
.faq-side { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-side__art { position: sticky; top: 110px; display: grid; gap: 1.2rem; justify-items: start; }
.faq-side__art .shellbox { width: min(60%, 220px); }
@media (max-width: 860px) { .faq-side { grid-template-columns: 1fr; } .faq-side__art { position: static; } .faq-side__art .shellbox { width: 130px; } }

/* ───────────────────────────── Help ───────────────────────────── */
.search { position: relative; width: min(100%, 640px); }
.search .i { position: absolute; left: 1.3rem; top: 50%; translate: 0 -50%; width: 1.4rem; height: 1.4rem; color: var(--gold-300); pointer-events: none; }
.search input { width: 100%; min-height: 66px; padding: 0 3.6rem 0 3.6rem; border-radius: var(--r-pill); border: 1.5px solid rgba(229, 197, 104, .5); background: rgba(3, 13, 26, .55); color: #F3F7FA; font-size: 1.08rem; font-weight: 550; appearance: none; -webkit-appearance: none; box-shadow: var(--shadow-2); transition: border-color var(--t-med), box-shadow var(--t-med); }
.search input::placeholder { color: #8FA8BA; font-weight: 400; }
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus, .search input:focus-visible { outline: none; border-color: var(--gold-300); box-shadow: 0 0 0 4px var(--gold-glow), var(--shadow-2); }
.search__clear { position: absolute; right: .8rem; top: 50%; translate: 0 -50%; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #B4C8D6; }
.search__clear:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.search__clear .i { position: static; translate: none; width: 1.1rem; height: 1.1rem; color: inherit; }
.search__hints { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; align-items: center; font-size: var(--fs-sm); color: #B4C8D6; }

/* quick start: read → quiz → pearl */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.4rem); position: relative; counter-reset: q; }
.quick__item { position: relative; display: grid; gap: .9rem; justify-items: center; text-align: center; align-content: start; min-width: 0; }
.quick__scene { position: relative; width: 100%; aspect-ratio: 4 / 3.3; border-radius: var(--r-xl); overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #17708A 0%, #0D3B58 62%, #0A2438 100%); border: 1px solid rgba(229, 197, 104, .35); box-shadow: var(--shadow-2); }
.quick__scene > img { position: relative; z-index: 1; width: 40%; height: auto; border-radius: 4px; box-shadow: 0 16px 34px rgba(2, 10, 20, .5); transform: rotate(-4deg); }
.quick__scene .shellbox { position: relative; z-index: 1; width: 52%; }
.quick__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #EBCB72, var(--gold-500)); color: #1B1303; font-family: var(--font-display); font-weight: 750; }
.quick__item h3 { font-size: 1.45rem; }
.quick__item p { color: var(--text-soft); max-width: 32ch; font-size: .97rem; }
.quick__item:not(:last-child)::after { content: ''; position: absolute; top: clamp(70px, 11vw, 130px); right: calc(clamp(1rem, 3vw, 2.4rem) / -2 - 9px); width: 18px; height: 18px; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--gold-200) 45%, var(--gold-500)); box-shadow: 0 0 0 5px var(--bg); }
.quiz-mock { position: relative; z-index: 1; width: 78%; display: grid; gap: .4rem; color: #F3F7FA; }
.quiz-mock span { display: flex; align-items: center; gap: .55rem; min-height: 34px; padding: 0 .7rem; border-radius: 10px; border: 1.5px solid rgba(181, 221, 236, .3); background: rgba(3, 13, 26, .45); font-size: .8rem; font-weight: 600; }
.quiz-mock b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .12); font-size: .7rem; }
.quiz-mock i { flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.quiz-mock .on { border-color: var(--gold-300); background: rgba(204, 153, 51, .2); }
.quiz-mock .on b { background: var(--gold-300); color: #1B1303; }
.quiz-mock em { justify-self: center; margin-top: .2rem; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300); }
@media (max-width: 760px) { .quick { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } .quick__item:not(:last-child)::after { display: none; } .quick__scene { aspect-ratio: 16 / 10; } .quick__scene > img { width: 30%; } .quick__scene .shellbox { width: 40%; } .quiz-mock { width: 64%; } }

/* FAQ */
.faq { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.faq__nav { position: sticky; top: 96px; display: grid; gap: .45rem; }
.faq__nav .mock-label { margin-bottom: .3rem; }
.faq__chip { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 46px; padding: .3rem .9rem .3rem .5rem; border-radius: var(--r-pill); border: 1px solid transparent; color: var(--text-soft); font-weight: 600; font-size: .95rem; text-align: left; transition: background-color var(--t-med), border-color var(--t-med), color var(--t-med); }
.faq__chip svg { flex: none; width: 28px; height: 28px; }
.faq__chip span { flex: 1; }
.faq__chip small { font-size: var(--fs-xs); font-weight: 650; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.faq__chip:hover { background: var(--glass); color: var(--text); }
.faq__chip[aria-pressed="true"] { background: var(--glass-2); border-color: var(--gold-300); color: var(--text); }
.faq__group { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.faq__group > h3 { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); padding-bottom: .6rem; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 100px; }
.faq__group > h3 svg { width: 30px; height: 30px; flex: none; }
.faq__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; min-height: 38px; }
.acc__content a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.acc__content strong { color: var(--text); }
.acc summary { scroll-margin-top: 100px; }
.acc summary > span { min-width: 0; }
.faq .empty__art svg { width: 100%; height: auto; }
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
  .faq__nav { position: static; display: flex; flex-wrap: wrap; gap: .45rem; }
  .faq__nav .mock-label { width: 100%; margin: 0; }
  .faq__chip { width: auto; min-height: 40px; padding: .2rem .85rem .2rem .35rem; border-color: var(--line); font-size: .88rem; }
  .faq__chip svg { width: 22px; height: 22px; }
  .faq__chip small { display: none; }
}

.stuck { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-2xl); background: linear-gradient(160deg, #0F3A55, var(--deep-900)); color: #F3F7FA; border: 1px solid rgba(229, 197, 104, .4); box-shadow: var(--shadow-3); position: relative; overflow: hidden; isolation: isolate; --text: #F3F7FA; --text-soft: #C6D8E4; --text-mute: #9DB5C6; --accent: var(--gold-300); --link: var(--gold-300); }
.stuck > :not(.decor) { position: relative; z-index: 1; }
.stuck .copy p { color: #C6D8E4; }
.stuck .facts__v { color: #F3F7FA; }
.stuck .shellbox { width: min(70%, 240px); margin-inline: auto; cursor: pointer; }
@media (max-width: 760px) { .stuck { grid-template-columns: 1fr; } .stuck .art { order: -1; } .stuck .shellbox { width: 150px; } }

/* ───────────────────────────── Contact ───────────────────────────── */
.contact { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.form-card { position: relative; padding: clamp(1.2rem, 3.2vw, 2.4rem); border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); margin-top: calc(clamp(5rem, 11vw, 8.5rem) * -.62); z-index: 3; }
.form-card h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.form-card__head { display: grid; gap: .4rem; margin-bottom: 1.5rem; }
.form-card__head p { color: var(--text-soft); }
.form-card .btn--block { margin-top: 1.5rem; }
.form-card .field-row + .field, .form-card .field-row + .field-row, .form-card .field + .field-row { margin-top: var(--s-4); }
.demo-note { font-size: var(--fs-sm); color: var(--text-mute); }
.form-note { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1rem; font-size: var(--fs-sm); color: var(--text-mute); }
.form-note .i { flex: none; margin-top: .1em; color: var(--accent); }
.counter { font-size: var(--fs-xs); font-weight: 600; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.done { display: grid; justify-items: center; gap: .9rem; text-align: center; padding: clamp(1rem, 4vw, 2.5rem) 0; }
.done__shell { width: 168px; padding: 1.1rem 1.5rem .5rem; border-radius: var(--r-xl); background: linear-gradient(180deg, #17708A, #0A2438); border: 1px solid rgba(229, 197, 104, .45); }
.done__shell svg { width: 100%; height: auto; }
.done h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); max-width: 16ch; }
.done p { color: var(--text-soft); max-width: 44ch; }
.done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .5rem; }
.aside { display: grid; gap: 1.4rem; padding-top: clamp(0rem, 2vw, 1.5rem); }
.aside__scene { position: relative; border-radius: var(--r-2xl); overflow: hidden; isolation: isolate; padding: clamp(1.3rem, 3vw, 2rem); background: linear-gradient(170deg, #14677F, #0A2438 70%); color: #F3F7FA; border: 1px solid rgba(229, 197, 104, .4); box-shadow: var(--shadow-2); --text: #F3F7FA; --text-mute: #9DB5C6; --accent: var(--gold-300); }
.aside__scene > :not(.decor) { position: relative; z-index: 1; }
.aside__scene h2 { font-size: 1.5rem; margin-bottom: 1.1rem; }
.aside__scene .facts__v { font-size: 1.08rem; }
.aside__seal { position: absolute !important; right: 1.2rem; top: 1.2rem; width: 58px; }
.quicklinks { display: grid; gap: .8rem; padding: 1.2rem; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); }
.quicklinks .cluster { --gap: .5rem; }
.quicklinks a.chip { white-space: normal; min-height: 36px; padding-block: .3rem; transition: border-color var(--t-med), color var(--t-med); }
.quicklinks a.chip:hover { border-color: var(--accent); color: var(--text); }
.reply { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--surface); }
.reply svg { flex: none; width: 46px; height: 46px; }
.reply p { font-size: var(--fs-sm); color: var(--text-soft); }
.reply strong { display: block; font-size: var(--fs-md); color: var(--text); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .form-card { margin-top: calc(clamp(5rem, 11vw, 8.5rem) * -.5); } }

/* ───────────────────────────── Legal (privacy, delete account) ───────────────────────────── */
.legal-art { position: relative; width: min(100%, 360px); aspect-ratio: 1; display: grid; place-items: center; }
.legal-art__ring { position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed rgba(229, 197, 104, .45); animation: ring-spin 70s linear infinite; }
.legal-art__ring::before, .legal-art__ring::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--gold-200) 45%, var(--gold-500)); }
.legal-art__ring::before { left: 50%; top: -7px; }
.legal-art__ring::after { left: 8%; bottom: 12%; }
.legal-art__ring--in { inset: 17%; border-style: solid; border-color: rgba(181, 221, 236, .2); animation-duration: 50s; animation-direction: reverse; }
.legal-art .shellbox { position: relative; width: 56%; z-index: 1; cursor: pointer; }
.legal-art .orb { --s: 44px; right: 4%; top: 14%; }
.legal-art .orb + .orb { --s: 30px; right: auto; left: 9%; top: auto; bottom: 18%; }
.meta-row { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 100%; }
.meta-row .chip { white-space: normal; padding-block: .35rem; line-height: 1.3; overflow-wrap: anywhere; }
.page-hero__text { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.page-hero__text > * { max-width: 100%; }
.page-hero .chip { background: rgba(3, 13, 26, .35); border-color: rgba(181, 221, 236, .25); color: #DCE8F0; }

ul.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid rgba(181, 221, 236, .2); }
.glance__item { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.glance__item svg { flex: none; width: 58px; height: 58px; }
.glance__item b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1; letter-spacing: -.03em; }
.glance__item span { font-size: var(--fs-sm); color: #C6D8E4; }
@media (max-width: 760px) { ul.glance { grid-template-columns: 1fr; gap: 1rem; } .glance__item svg { width: 46px; height: 46px; } }

.legal { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.toc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); list-style: none; cursor: pointer; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .i { color: var(--accent); transition: transform var(--t-med); }
.toc[open] summary .i { transform: rotate(180deg); }
.toc ol { display: grid; gap: 2px; padding: 0 .6rem .7rem; margin: 0; list-style: none; counter-reset: toc; }
.toc a { display: flex; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; color: var(--text-soft); font-size: .92rem; font-weight: 550; line-height: 1.3; transition: background-color var(--t-fast), color var(--t-fast); }
.toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--accent); padding-top: .08em; }
.toc a:hover { background: var(--glass); color: var(--text); }
.toc a.is-active { background: rgba(204, 153, 51, .16); color: var(--text); }
.toc__print { display: flex; margin: 0 .8rem .9rem; }
@media (min-width: 961px) { .toc summary { pointer-events: none; } .toc summary .i { display: none; } }
@media (max-width: 960px) { .legal { grid-template-columns: 1fr; } .toc { position: static; max-height: none; } }

.prose--legal { max-width: 76ch; }
.prose--legal > h2:first-child { margin-top: 0; }
.prose--legal h2 { display: flex; align-items: baseline; gap: .7rem; padding-top: .2em; }
.prose--legal h2 .num { flex: none; font-size: .62em; font-weight: 700; color: var(--accent); letter-spacing: 0; }
.callout { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.2rem; align-items: start; padding: clamp(1.1rem, 2.6vw, 1.7rem); border-radius: var(--r-lg); border: 1px solid rgba(204, 153, 51, .45); background: linear-gradient(160deg, #FFFFFF, #FBF3DF); box-shadow: var(--shadow-1); }
.callout > span { display: block; width: 60px; }
.callout h3 { margin-top: 0 !important; font-size: 1.3rem; }
.callout > div > * + * { margin-top: .7em; }
.callout--sea { background: linear-gradient(165deg, #0F3A55, var(--deep-900)); border-color: rgba(229, 197, 104, .45); color: #C6D8E4; --text: #F3F7FA; --text-soft: #C6D8E4; --link: var(--gold-300); }
.callout--sea h3, .callout--sea strong { color: #F3F7FA; }
.callout--sea li::marker { color: var(--gold-300); }
@media (max-width: 520px) { .callout { grid-template-columns: 1fr; } .callout > span { width: 48px !important; } }

/* responsive table: rows become stacked cards on phones */
.rtable { width: 100%; font-size: .95rem; border-radius: var(--r-md); border: 1px solid var(--line-strong); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--surface); }
.rtable th { text-align: left; padding: .85rem 1rem; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); background: var(--glass-2); }
.rtable td { padding: 1rem; border-top: 1px solid var(--line); vertical-align: top; color: var(--text-soft); }
.rtable td:first-child { font-family: var(--font-display); font-weight: 650; font-size: 1.05rem; color: var(--text); width: 22%; }
@media (min-width: 721px) { .rtable--wide2 td:nth-child(2) { width: 36%; } }
.rtable ul { padding-left: 1.1em; margin: 0; display: grid; gap: .3em; }
.rtable .badge { font-size: .74rem; }
@media (max-width: 720px) {
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtable tr + tr { border-top: 6px solid var(--bg-2); }
  .rtable td { border-top: 0; padding: .4rem 1rem; }
  .rtable td:first-child { width: 100%; padding-top: 1rem; font-size: 1.15rem; }
  .rtable td:last-child { padding-bottom: 1.1rem; }
  .rtable td:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .68rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
}

/* delete account */
.methods { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.method { display: grid; gap: 1.2rem; min-width: 0; }
.method__k { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.method__k b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #EBCB72, var(--gold-500)); color: #1B1303; font-family: var(--font-display); font-size: .95rem; letter-spacing: 0; }
.method h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.method > p { color: var(--text-soft); }
.method--app { position: sticky; top: 96px; }
.method__app { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.4rem; border-radius: var(--r-2xl); background: linear-gradient(165deg, #14677F, #0A2438 75%); border: 1px solid rgba(229, 197, 104, .4); color: #F3F7FA; box-shadow: var(--shadow-2); position: relative; overflow: hidden; isolation: isolate; }
.method__app > :not(.decor) { position: relative; z-index: 1; }
.method__app .device { width: 150px; border-radius: 28px; padding: 7px; }
.method__app .device__screen { border-radius: 21px; font-size: .6rem; }
.method__app .device__bar { padding: .8rem .6rem .4rem; }
.method__app .device__menu span { padding: .38rem .4rem; border-radius: 8px; }
.method__app ol { display: grid; gap: .7rem; padding-left: 1.2em; margin: 0; font-size: .95rem; color: #DCE8F0; }
.method__app ol li::marker { color: var(--gold-300); font-weight: 700; }
.method__app ol strong { color: #fff; }
.method .form-card { margin-top: 0; }
@media (max-width: 900px) { .methods { grid-template-columns: 1fr; } .method--app { position: static; } }
@media (max-width: 440px) { .method__app { grid-template-columns: 1fr; justify-items: center; } }

.receipt { display: grid; gap: 0; width: 100%; margin-top: .4rem; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--surface-2); overflow: hidden; text-align: left; }
.receipt div { display: flex; justify-content: space-between; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; padding: .85rem 1.1rem; }
.receipt div + div { border-top: 1px dashed var(--line-strong); }
.receipt dt { font-size: var(--fs-sm); color: var(--text-mute); font-weight: 600; }
.receipt dd { margin: 0; font-family: var(--font-display); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }

.timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; list-style: none; }
.timeline::before { content: ''; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: linear-gradient(90deg, var(--gold-500), var(--teal-500), var(--ok)); opacity: .6; }
.timeline li { position: relative; display: grid; gap: .45rem; align-content: start; min-width: 0; }
.timeline li > span:first-child { display: block; width: 44px; height: 44px; position: relative; background: var(--bg); border-radius: 50%; max-width: none; }
.timeline b { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.timeline span { font-size: .95rem; color: var(--text-soft); max-width: 30ch; }
@media (max-width: 680px) { .timeline { grid-template-columns: 1fr; gap: 1.4rem; } .timeline::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: linear-gradient(180deg, var(--gold-500), var(--teal-500), var(--ok)); } .timeline li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; } .timeline li > span:first-child { grid-row: 1 / span 2; } }

/* ───────────────────────────── 404 ───────────────────────────── */
.lost { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(76px + 2rem) 0 clamp(4rem, 9vw, 7rem); background: linear-gradient(180deg, #12607A 0%, var(--deep-700) 38%, var(--deep-900) 72%, var(--abyss) 100%); color: #F3F7FA; text-align: center; }
.lost .container { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.1rem; }
.lost__code { display: flex; align-items: center; justify-content: center; gap: clamp(.2rem, 2vw, 1.2rem); font-family: var(--font-display); font-size: clamp(5.5rem, 3rem + 17vw, 14rem); font-weight: 780; line-height: .9; letter-spacing: -.06em; color: rgba(243, 247, 250, .13); -webkit-text-stroke: 1.5px rgba(229, 197, 104, .55); user-select: none; }
.lost__shell { position: relative; flex: none; width: clamp(120px, 24vw, 230px); border-radius: 50%; cursor: pointer; -webkit-text-stroke: 0; }
.lost__shell svg { width: 100%; height: auto; }
.lost h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.8rem); }
.lost p { max-width: 46ch; color: #C6D8E4; font-size: var(--fs-lg); }
.lost__hint { font-size: var(--fs-sm) !important; color: var(--gold-300) !important; font-weight: 600; min-height: 1.6em; }
.lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .6rem; }

/* ───────────────────────────── print (privacy policy, deletion receipt) ───────────────────────────── */
@media print {
  .page-hero { padding: 0 0 1rem; background: none !important; color: #000; }
  .page-hero .decor, .page-hero .wave, .page-hero__art, .page-hero__actions, .crumbs, .glance, .toc, .skip-link, .toast-stack { display: none !important; }
  .page-hero h1, .page-hero .lead, .page-hero .chip { color: #000 !important; }
  .page-hero .text-grad { background: none; color: #000; }
  .page-hero__grid, .legal { display: block; }
  .section { padding-block: 0; }
  .js [data-reveal], .js [data-split] .sw__i { opacity: 1 !important; transform: none !important; }
  .prose--legal { max-width: none; font-size: 11pt; color: #222; }
  .callout, .callout--sea { background: none !important; color: #222 !important; border-color: #999; box-shadow: none; }
  .callout--sea h3, .callout--sea strong { color: #000 !important; }
}

/* ───────────────────────────── verify (certificate check) ───────────────────────────── */
.vcheck { width: min(100%, 560px); margin-top: .4rem; }
.vcheck .field { gap: .55rem; }
.vcheck__box { display: flex; align-items: center; gap: .6rem; padding: .4rem .4rem .4rem 1.1rem; border-radius: var(--r-pill); border: 1.5px solid rgba(229, 197, 104, .55); background: rgba(3, 13, 26, .55); box-shadow: var(--shadow-2); transition: border-color var(--t-med), box-shadow var(--t-med); }
.vcheck__box > .i { flex: none; width: 1.4rem; height: 1.4rem; color: var(--gold-300); }
.vcheck__box:focus-within { border-color: var(--gold-300); box-shadow: 0 0 0 4px var(--gold-glow), var(--shadow-2); }
.vcheck__input { flex: 1; min-width: 0; width: 0; min-height: 54px; padding: 0 .2rem; border: 0; background: transparent; color: #F3F7FA; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; outline: none; font-variant-numeric: tabular-nums; }
.vcheck__input::placeholder { color: #6F8BA0; font-weight: 500; }
.vcheck__input:focus, .vcheck__input:focus-visible { outline: none; }
.vcheck__btn { flex: none; min-height: 54px; }
.vcheck__hint { color: #9DB5C6 !important; padding-left: 1.1rem; }
.vcheck .has-error .vcheck__box { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.vcheck .field__error { padding-left: 1.1rem; color: #FF9EA1; }
@media (max-width: 420px) { .vcheck__btn { padding-inline: 1.1em; } .vcheck__btn .btn__arrow { display: none; } .vcheck__box { padding-left: .9rem; } }

.vseal-art__seal { position: relative; z-index: 1; width: 60%; }
.vseal svg, .vseal-art__seal svg { width: 100%; height: auto; overflow: visible; }
.vseal .vs-text { transform-origin: 100px 100px; animation: ring-spin 40s linear infinite; }
.vseal .vs-glint { transform-box: fill-box; transform-origin: 50% 50%; animation: pearl-breathe 3.6s ease-in-out infinite; }

.vresult { position: relative; z-index: 3; margin-top: clamp(-4.5rem, -7vw, -2.2rem); padding: clamp(1.2rem, 3.4vw, 2.4rem); border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); outline: none; }
.vresult__state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem 1.4rem; align-items: center; }
.vresult__state p { color: var(--text-soft); }
.vresult__icon { display: block; width: 58px; }
.vresult__title { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: .35rem; overflow-wrap: anywhere; }
.vresult__card { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 2.6rem); align-items: start; animation: vt-in .5s var(--ease-out) both; }
.vresult__seal { width: 100%; max-width: 200px; }
.vresult__body { display: grid; gap: .8rem; justify-items: start; min-width: 0; }
.vresult__body > p { color: var(--text-soft); }
.vresult__body .receipt { margin-top: .2rem; }
.vresult__note { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-mute) !important; }
.vresult__note .i { flex: none; margin-top: .1em; color: var(--accent); }
.vresult__tips { display: grid; gap: .45rem; padding-left: 1.2em; margin: 0; color: var(--text-soft); }
.vresult__tips li::marker { color: var(--accent-strong); }
.vresult__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.vresult .loader { padding: 1.5rem 1rem; }
@media (max-width: 640px) {
  .vresult__card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .vresult__seal { max-width: 150px; }
  .vresult__body { justify-items: stretch; }
  .vresult__body > .badge { justify-self: start; }
  .vresult__state { grid-template-columns: minmax(0, 1fr); }
  .vresult__icon { width: 48px; }
}

.vwhere { position: relative; width: min(100%, 430px); margin-inline: auto; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-3); transform: rotate(-2deg); }
.vwhere img { width: 100%; height: auto; display: block; }
.vwhere { container-type: inline-size; }
.vwhere__ring b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Helvetica, Arial, sans-serif; font-size: 2.7cqw; font-weight: 700; color: #282D30; white-space: nowrap; }
.vwhere__ring { position: absolute; left: 78.6%; top: 13%; width: 26%; aspect-ratio: 1.8; border-radius: 50%; border: 3px solid var(--gold-300); transform: translate(-50%, -50%); box-shadow: 0 0 0 999px rgba(3, 13, 26, .42); }
.vwhere__ring::after { content: ''; position: absolute; inset: -10px; border-radius: inherit; border: 2px solid var(--gold-300); animation: vwhere-pulse 2.2s ease-out infinite; }
@keyframes vwhere-pulse { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.vwhere__tag { position: absolute; left: 46%; top: 24%; display: grid; gap: .1rem; padding: .6rem .9rem; border-radius: var(--r-md); background: var(--deep-800); border: 1px solid rgba(229, 197, 104, .6); color: #B4C8D6; font-size: .68rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow-2); }
.vwhere__tag b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em; color: var(--gold-300); }