/* ============ repent.bio marketing + public pages ============ */

/* the skylight: one cold light from above, shared by marketing, auth and empty states */
.sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky::before { content: ""; position: absolute; left: var(--sky-x, 50%); top: -38vh; width: min(1100px, 120vw); height: 110vh; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(150, 172, 255, .16), rgba(110, 135, 255, .06) 45%, transparent 75%); filter: blur(10px); }
.sky::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity: .035; mix-blend-mode: overlay; }
.sw-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ---------- nav: a floating bar with the links centred ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-nav); padding-top: 12px; }
.nav-in { position: relative; display: flex; align-items: center; gap: var(--s6); height: 60px; padding: 0 10px 0 18px; border-radius: 18px; background: rgba(10, 11, 15, .72); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); transition: background var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease); }
.nav.scrolled .nav-in { background: rgba(8, 9, 13, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -22px rgba(0, 0, 0, .9); }
.logo { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; flex: none; }
.logo .mark { width: 26px; height: 26px; transition: transform var(--d-3) var(--ease-out); }
.logo:hover .mark { transform: translateY(-1px) rotate(-3deg); }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.nav-links a { position: relative; padding: 8px 12px; font-size: 14.5px; color: var(--text-2); border-radius: var(--r-sm); transition: color var(--d-2); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--blue); }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-burger { display: none; }
@media (max-width: 860px) {
  .nav-links, .nav-r .nav-hide { display: none; }
  .nav-burger { display: inline-flex; }
}
.sheet { position: fixed; inset: 0; z-index: calc(var(--z-nav) + 1); background: rgba(5, 5, 7, .97); backdrop-filter: blur(10px); display: flex; flex-direction: column; padding: 14px var(--gutter) 28px; animation: fadeIn var(--d-2); }
.sheet-top { display: flex; align-items: center; justify-content: space-between; height: 36px; margin-bottom: 28px; }
.sheet nav { display: flex; flex-direction: column; }
.sheet nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 26px; font-weight: 500; letter-spacing: -.03em; display: flex; justify-content: space-between; align-items: center; }
.sheet nav a .i { color: var(--text-3); width: 20px; height: 20px; }
.sheet .sheet-cta { margin-top: auto; display: grid; gap: 8px; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - 72px); display: flex; align-items: center; padding: var(--s8) 0 var(--s16); overflow: hidden; }
.hero .sky { --sky-x: 38%; }
.claim { margin-top: 34px; max-width: 470px; }
.claim .affix { height: 54px; border-radius: 12px; background: var(--ink-1); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9); }
.claim .affix > span { font-size: 15px; padding-left: 16px; }
.claim .affix > input { font-size: 15.5px; }
.claim .affix > .btn { height: 44px; margin: 5px; padding: 0 18px; }
.claim-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); min-height: 18px; }

@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: var(--s16); padding-bottom: 150px; }
}

/* centred hero: statue + giant wordmark, a lowercase line under it, the claim box below */
.hero { min-height: calc(100svh - 72px); padding-bottom: 120px; }
.hero-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-center .live-pill { transition: border-color var(--d-2), color var(--d-2); }
.hero-center .live-pill:hover { border-color: var(--line-3); color: var(--text); }
.live-pill > .i { width: 14px; height: 14px; margin-left: 2px; transition: transform var(--d-2) var(--ease-out); }
.live-pill:hover > .i { transform: translateX(2px); }
.hero h1.hero-brand { display: flex; align-items: center; justify-content: center; gap: .06em; margin: clamp(26px, 4vw, 44px) 0 0; font-size: clamp(64px, 13.5vw, 196px); line-height: .9; letter-spacing: 0; }
.hero-glyphs { position: absolute; inset: 0; z-index: 0; opacity: .9; -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 22%); mask-image: linear-gradient(180deg, transparent 2%, #000 22%); }
.hero-statue { margin-bottom: 0; }
.hero-brand .wm { letter-spacing: -.06em; font-weight: 700; color: #f3f2ee; text-shadow: 0 0 80px rgba(123, 149, 255, .22); }
.hero-brand .wm b { font-weight: 700; color: #f3f2ee; }
.hero-brand .wm .tear { width: .2em; height: .2em; margin: 0 .03em 0 .05em; filter: drop-shadow(0 0 .12em rgba(85, 118, 255, .8)); }
.hero-statue { position: relative; flex: none; width: .78em; height: .78em; margin-bottom: .06em; }
.hero-statue::before { content: ""; position: absolute; inset: -20% -10% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(123, 149, 255, .28), transparent 72%); animation: shaft 7s ease-in-out infinite; }
.hero-statue .mark { position: relative; width: 100%; height: 100%; animation: breathe 6s ease-in-out infinite; transform-origin: 50% 100%; }
/* the tear lives inside the shared sprite, so selectors can't reach it; a custom property inherits into the <use> copy */
.mark-tear { animation: var(--tear-anim, none); transform-box: fill-box; transform-origin: 50% 0; }
.hero-tag { margin-top: clamp(14px, 2vw, 22px); font-size: clamp(16px, 1.7vw, 21px); color: var(--text-2); letter-spacing: -.01em; }
.hero-tag .serif-i { color: var(--text); font-size: 1.15em; }
.hero-hint { margin-top: 10px; font-size: 12px; letter-spacing: .06em; color: var(--text-3); }
.hero-hint span { color: var(--text-2); }
.hero-center .claim { width: min(470px, 100%); margin-top: 30px; }
.hero-center .claim-meta { justify-content: center; }
.hero-center .claim-meta .avail:empty { display: none; }
.hero::after { -webkit-mask-image: radial-gradient(60% 55% at 50% 42%, #000, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 42%, #000, transparent 75%); opacity: .16; }
.hero .sky { --sky-x: 50%; }
@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: 72px; padding-bottom: 170px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 48px; }
  .hero h1.hero-brand { font-size: clamp(48px, 15.5vw, 80px); }
  .hero-tag { max-width: 30ch; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(72px, 12vw, 150px) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s10); align-items: end; margin-bottom: clamp(36px, 6vw, 64px); }
.sec-head h2 { font-size: var(--t-3xl); letter-spacing: -.045em; line-height: .98; font-weight: 600; }
.sec-head h2 .serif-i { letter-spacing: -.02em; }
.sec-head p { color: var(--text-2); font-size: var(--t-lg); line-height: 1.6; max-width: 46ch; justify-self: end; }
@media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; gap: var(--s4); } .sec-head p { justify-self: start; } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* feature index: numbered rows, each with a small live illustration */
.index { border-top: 1px solid var(--line); }
.ix { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.4fr) 220px; gap: var(--s6); align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); transition: background var(--d-3); }
.ix::before { content: ""; position: absolute; inset: 0 -24px; z-index: -1; border-radius: 14px; background: linear-gradient(90deg, transparent, rgba(123, 149, 255, .05), transparent); opacity: 0; transition: opacity var(--d-3); }
.ix:hover::before { opacity: 1; }
.ix-n { font: 500 12px var(--f-mono); color: var(--text-3); }
.ix h3 { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.03em; font-weight: 550; }
.ix p { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.ix-vis { height: 84px; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); overflow: hidden; position: relative; display: grid; place-items: center; }
@media (max-width: 960px) { .ix { grid-template-columns: 40px 1fr; } .ix p { grid-column: 2; } .ix-vis { grid-column: 2; width: 100%; max-width: 320px; } }

/* index illustrations */
.v-layouts { display: flex; gap: 8px; }
.v-layouts i { width: 30px; height: 54px; border-radius: 5px; border: 1px solid var(--line-3); position: relative; background: var(--ink-2); transition: border-color .3s, transform .3s; }
.v-layouts i::before, .v-layouts i::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--line-3); }
.v-layouts i::before { top: 18px; } .v-layouts i::after { top: 25px; right: 12px; }
.v-layouts i:nth-child(2) { border-radius: 15px 15px 5px 5px; }
.v-layouts i:nth-child(3) { width: 48px; }
.v-layouts i.on { border-color: var(--blue); transform: translateY(-3px); }
.v-type { font-size: 40px; line-height: 1; color: var(--text); transition: opacity .3s; }
.v-motion { position: absolute; inset: 0; }
.v-motion i { position: absolute; left: 50%; top: 60%; width: 10px; height: 4px; border: 1px solid var(--blue); border-radius: 50%; transform: translate(-50%, -50%); animation: vRip 3.2s var(--ease-out) infinite; opacity: 0; }
.v-motion i:nth-child(2) { animation-delay: 1.05s; } .v-motion i:nth-child(3) { animation-delay: 2.1s; }
@keyframes vRip { 0% { width: 6px; height: 2px; opacity: .9; } 100% { width: 200px; height: 46px; opacity: 0; } }
.v-motion b { position: absolute; left: 50%; top: 8px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--tear); animation: vDrop 3.2s var(--ease-in) infinite; }
@keyframes vDrop { 0% { top: 6px; opacity: 0; } 15% { opacity: 1; } 32% { top: 46px; opacity: 1; } 33%, 100% { top: 46px; opacity: 0; } }
.v-links { width: 150px; display: grid; gap: 5px; }
.v-links i { height: 16px; border-radius: 5px; background: var(--ink-3); border: 1px solid var(--line-2); position: relative; transition: transform .4s var(--ease-out); }
.v-links i::after { content: ""; position: absolute; left: 22px; top: 6px; height: 3px; width: 50%; border-radius: 2px; background: var(--line-3); }
.v-links i::before { content: ""; position: absolute; left: 6px; top: 4px; width: 7px; height: 7px; border-radius: 2px; background: var(--text-3); }
.v-links i.hot { border-color: var(--blue-line); } .v-links i.hot::before { background: var(--blue); }
.v-badges { display: flex; gap: 10px; }
.v-badges span { filter: drop-shadow(0 0 8px rgba(123, 149, 255, .4)); }
.v-badges svg { width: 30px; height: 30px; }
.v-spark { width: 180px; height: 56px; }
.v-spark path { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.v-spark .area { fill: url(#spg); stroke: none; }

/* pages people made */
.made { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 230px); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.made-c { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 16px 18px; border-radius: 999px 999px var(--r-md) var(--r-md); background: var(--ink-2); border: 1px solid var(--line); text-align: center; overflow: hidden; transition: border-color var(--d-2), transform var(--d-3) var(--ease-out); isolation: isolate; }
.made-c::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45; background: var(--bgimg, none) center / cover, radial-gradient(90% 60% at 50% 0%, var(--a2, #1a2040), transparent 75%); }
.made-c::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 5, 7, .2), rgba(5, 5, 7, .85) 70%); }
.made-c:hover { border-color: var(--line-3); transform: translateY(-4px); }
.made-c .av { --s: 64px; }
.made-c b { font-size: 15px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.made-c small { font: 12px var(--f-mono); color: var(--text-3); }
.made-c p { font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* three steps, roman numerals */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.step { padding: 30px 28px 6px 0; border-right: 1px solid var(--line); margin-right: 28px; }
.step:last-child { border-right: 0; margin-right: 0; }
.step .roman { font-family: var(--f-serif); font-style: italic; font-size: 64px; line-height: 1; color: var(--text-3); }
.step h3 { margin-top: 22px; font-size: 20px; letter-spacing: -.02em; }
.step p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 36ch; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); padding: 24px 0; } }

/* pricing */
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* faq */
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--text-3); transition: transform var(--d-3) var(--ease-out); }
.faq details[open] summary .i { transform: rotate(45deg); color: var(--text); }
.faq details p { padding: 0 0 22px; color: var(--text-2); line-height: 1.65; max-width: 68ch; }

/* final call */
.finale { position: relative; isolation: isolate; text-align: center; padding: clamp(90px, 14vw, 180px) 0 clamp(80px, 10vw, 140px); overflow: hidden; }
.finale .niche { width: 150px; height: 210px; margin: 0 auto 36px; border-radius: 999px 999px 18px 18px; border: 1px solid var(--line-2); background: radial-gradient(80% 55% at 50% 0%, rgba(150, 172, 255, .18), transparent 70%), var(--ink-1); display: grid; place-items: end center; padding-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -40px rgba(123, 149, 255, .4); }
.finale .niche .mark { width: 120px; height: 120px; }
.finale h2 { font-size: var(--t-3xl); letter-spacing: -.045em; line-height: 1; }
.finale p { margin: 16px auto 0; color: var(--text-2); max-width: 42ch; }
.finale .claim { margin: 32px auto 0; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s8); }
.foot-brand p { margin-top: 14px; color: var(--text-3); font-size: 14px; max-width: 28ch; }
.foot h4 { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.foot nav { display: flex; flex-direction: column; gap: 10px; }
.foot nav a { font-size: 14px; color: var(--text-2); transition: color var(--d-2); width: fit-content; }
.foot nav a:hover { color: var(--text); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- inner pages (explore, docs, legal, status) ---------- */
.page { position: relative; isolation: isolate; min-height: 70vh; padding: clamp(40px, 7vw, 80px) 0 clamp(60px, 8vw, 110px); }
.page-head { max-width: 760px; margin-bottom: clamp(28px, 5vw, 48px); }
.page-head h1 { font-size: var(--t-3xl); letter-spacing: -.045em; line-height: 1; }
.page-head p { margin-top: 14px; color: var(--text-2); font-size: var(--t-lg); line-height: 1.6; }
.crumbs { display: flex; gap: 8px; align-items: center; font: 500 12px var(--f-mono); color: var(--text-3); margin-bottom: 18px; }
.crumbs a:hover { color: var(--text); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.toolbar .affix { max-width: 320px; height: 38px; }
.toolbar .seg { padding: 3px; }
.toolbar .seg span { height: 30px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.grid-cards .made-c { border-radius: 999px 999px var(--r-md) var(--r-md); }

.prose { max-width: 720px; color: var(--text-2); font-size: 16px; line-height: 1.75; }
.prose h2 { color: var(--text); font-size: 22px; margin: 40px 0 12px; letter-spacing: -.02em; }
.prose h3 { color: var(--text); font-size: 17px; margin: 28px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--blue); }
.prose ol { list-style: decimal; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--blue); }
.prose b, .prose strong { color: var(--text); font-weight: 600; }
.prose .callout { padding: 14px 16px; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line); margin: 16px 0; font-size: 15px; }

.docs-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); }
.docs-side { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 22px; max-height: calc(100vh - 110px); overflow: auto; }
.docs-side h4 { font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.docs-side a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: 7px; font-size: 14px; color: var(--text-2); }
.docs-side a:hover { color: var(--text); background: var(--ink-2); }
.docs-side a[aria-current="page"] { color: var(--text); background: var(--ink-3); }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.doc-card { padding: 16px; border-radius: var(--r-md); background: var(--ink-2); border: 1px solid var(--line); transition: border-color var(--d-2); }
.doc-card:hover { border-color: var(--line-3); }
.doc-card .i { color: var(--blue); width: 18px; height: 18px; }
.doc-card b { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.doc-card p { margin-top: 4px; font-size: 13px; color: var(--text-3); line-height: 1.5; }
@media (max-width: 860px) { .docs-grid { grid-template-columns: 1fr; } .docs-side { position: static; max-height: none; } }

.status-banner { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-2); font-weight: 500; margin-bottom: 26px; }
.status-row { padding: 18px 0; border-top: 1px solid var(--line); }
.status-row h3 { font-size: 15px; display: flex; align-items: center; gap: 10px; }
.status-row h3 .chip { margin-left: auto; }
.st-bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 30px; margin-top: 12px; }
.st-bars i { border-radius: 2px; background: var(--ink-4); }
.st-bars i.g { background: rgba(94, 224, 160, .7); } .st-bars i.o { background: var(--warn); } .st-bars i.r { background: var(--bad); }
.st-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; font: 12px var(--f-mono); color: var(--text-3); }

.nf { position: relative; isolation: isolate; min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.nf h1 { font-size: var(--t-3xl); letter-spacing: -.045em; }
.nf p { margin: 12px auto 0; color: var(--text-2); max-width: 46ch; }
.nf .nf-actions { display: flex; gap: 8px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ---------- view transitions ---------- */
::view-transition-old(root) { animation: vtOut .18s var(--ease-in) both; }
::view-transition-new(root) { animation: vtIn .34s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- auth: one card on black, the form on the left, the glyph field with the figure on the right ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 24px; background: radial-gradient(60% 50% at 50% 0%, rgba(85, 118, 255, .07), transparent 70%), #030304; }
.auth-card { width: min(1180px, 100%); min-height: min(700px, calc(100dvh - 64px)); display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); border-radius: 24px; border: 1px solid var(--line-2); background: #09090c; overflow: hidden; box-shadow: 0 40px 120px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.auth-main { display: flex; flex-direction: column; justify-content: center; padding: 40px 38px; min-width: 0; background: linear-gradient(180deg, #0d0d11, #09090c); }
.auth-box { width: 100%; }
.auth-mark { display: block; width: 52px; height: 52px; margin: 0 auto 14px; }
.auth-mark .mark { width: 100%; height: 100%; transition: transform var(--d-3) var(--ease-out); }
.auth-mark:hover .mark { transform: translateY(-2px) rotate(-3deg); }
.auth-box h1 { text-align: center; font-size: 21px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.auth-sub { margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.55; text-align: center; }
.auth-sub b { color: var(--text); font-weight: 500; }
.auth-box form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.auth-box .field > label { color: var(--text); font-size: 13.5px; font-weight: 600; }
.ifield { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 14px; border-radius: 11px; background: #050507; border: 1px solid transparent; transition: border-color var(--d-2), box-shadow var(--d-2), background var(--d-2); }
.ifield:hover { background: #060609; border-color: var(--line); }
.ifield:focus-within { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); background: #060609; }
.ifield > .i { flex: none; width: 16px; height: 16px; color: var(--text-3); transition: color var(--d-2); }
.ifield:focus-within > .i { color: var(--blue); }
.ifield > .pre { flex: none; font-size: 14px; color: var(--text-3); margin-right: -10px; user-select: none; }
.ifield > input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 400 14px var(--f-sans); color: var(--text); }
.ifield > input::placeholder { color: var(--text-4); }
.ifield > input:focus { outline: none; }
.ifield > input[aria-invalid] { color: var(--bad); }
.ifield .pw-toggle { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: -6px; border-radius: 8px; color: var(--text-3); }
.ifield .pw-toggle:hover { color: var(--text); background: var(--ink-3); }
.ifield .pw-toggle .i { width: 16px; height: 16px; }
.auth-box .avail { margin-top: -8px; font-size: 12.5px; min-height: 0; }
.auth-box .avail:empty, .auth-box form > .err:empty { display: none; }
.btn.auth-go { height: 44px; margin-top: 4px; border-radius: 11px; font-weight: 600; font-size: 14.5px; color: #fff; background: linear-gradient(180deg, #6f8cff, #4b6bff); border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 30px -12px rgba(85, 118, 255, .8); transition: filter var(--d-2), box-shadow var(--d-2), background var(--d-2), color var(--d-2); }
.btn.auth-go:hover:not(:disabled) { filter: brightness(1.08); }
.btn.auth-go:disabled { background: #2a2b31; color: var(--text-3); box-shadow: none; cursor: not-allowed; opacity: 1; }
.auth-box .or { margin: 20px 0 12px; }
.auth-box .oauth { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.auth-box .oauth .btn { height: 40px; border-radius: 11px; background: #050507; }
.or { display: flex; align-items: center; gap: 12px; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-switch { margin-top: 20px; font-size: 13.5px; color: var(--text-3); text-align: center; }
.auth-switch .link, .auth-box .check .link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.auth-legal { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--text-4); text-align: center; }
.auth-legal .link { color: var(--text-3); }
.link.small { font-size: 12.5px; font-weight: 400; color: var(--text-3); }
button.link { font: inherit; padding: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); cursor: pointer; line-height: 1.45; }
.check input { appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 5px; border: 1px solid var(--line-3); background: var(--ink-1); display: grid; place-items: center; cursor: pointer; transition: background var(--d-1), border-color var(--d-1); }
.check input:checked { background: var(--blue-2); border-color: var(--blue-2); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.affix.pw > input { font-family: var(--f-sans); padding-left: 13px; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -8px; }
.pw-meter i { height: 3px; border-radius: 2px; background: var(--ink-4); transition: background var(--d-2); }
.pw-meter i.on.s1, .pw-meter i.on.s2 { background: var(--warn); }
.pw-meter i.on.s3 { background: var(--blue); }
.pw-meter i.on.s4 { background: var(--ok); }
.hint { font-size: 12.5px; color: var(--text-3); margin-top: -10px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts:empty { display: none; }
.form-err { padding: 10px 12px; border-radius: var(--r); background: var(--bad-soft); border: 1px solid rgba(255, 125, 125, .25); color: var(--bad); font-size: 13.5px; }
.notice { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line-2); color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.notice .i { color: var(--blue); margin-top: 2px; }
.input.code { font: 500 18px var(--f-mono); letter-spacing: .2em; text-align: center; height: 50px; }
.auth-state { text-align: center; }
.auth-state .auth-sub { margin-left: auto; margin-right: auto; max-width: 34ch; }
.state-ic { width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 16px; display: grid; place-items: center; background: var(--ink-3); border: 1px solid var(--line-2); color: var(--text); }
.state-ic .i { width: 24px; height: 24px; }
.state-ic.ok { color: var(--ok); } .state-ic.bad { color: var(--bad); }
.state-ic .i[class] { animation: none; }
.auth-art { position: relative; isolation: isolate; overflow: hidden; border-left: 1px solid var(--line); background: radial-gradient(70% 60% at 70% 30%, rgba(85, 118, 255, .08), transparent 70%), #040406; min-height: 100%; }
.glyphs { position: absolute; inset: 0; z-index: 0; }
.glyphs canvas { display: block; }
.auth-art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(4, 4, 6, .92) 0%, transparent 34%), linear-gradient(90deg, rgba(4, 4, 6, .5), transparent 22%); }
.auth-logo { position: absolute; z-index: 2; top: 22px; right: 26px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; padding: 6px 10px; border-radius: 10px; background: rgba(4, 4, 6, .6); backdrop-filter: blur(6px); }
.auth-logo .mark { width: 22px; height: 22px; }
.auth-preview { position: absolute; z-index: 2; left: 9%; top: 44%; display: flex; align-items: center; gap: 14px; padding: 14px 26px 14px 14px; border-radius: 18px; background: rgba(9, 10, 14, .82); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(123, 149, 255, .06); animation: pvIn .7s var(--ease-out) both .2s; }
.pv-av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 17px; color: #fff; background: radial-gradient(circle at 30% 25%, #a9bcff, #4b6bff 60%, #2a3fb0); box-shadow: 0 0 24px -4px rgba(85, 118, 255, .7); }
.auth-preview small { display: block; font-size: 12px; color: var(--text-3); }
.auth-preview b { display: block; margin-top: 2px; font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--text-2); max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-preview b span { color: #fff; font-weight: 700; }
@keyframes pvIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.auth-cap { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 30px; }
.auth-cap span { font: 600 11.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.auth-cap p { margin-top: 6px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: var(--text); }
@media (max-width: 900px) {
  .auth { padding: 0; place-items: stretch; }
  .auth-card { grid-template-columns: minmax(0, 1fr); min-height: 100dvh; border-radius: 0; border: 0; }
  .auth-art { display: none; }
  .auth-main { padding: 40px max(20px, calc(50% - 210px)); }
}

.niche-drop { position: absolute; left: 67.5%; top: 63.4%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--tear); box-shadow: 0 0 10px rgba(85, 118, 255, .6); opacity: 0; animation: nicheDrop 5s cubic-bezier(.5, 0, 1, .6) infinite; }
.niche-ring { position: absolute; left: 67.5%; top: 100%; width: 10px; height: 3px; margin-left: -5px; border: 1px solid var(--blue); border-radius: 50%; opacity: 0; animation: nicheRing 5s ease-out infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012); } }
@keyframes nicheGlow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 60px 120px -50px rgba(123, 149, 255, .35); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 60px 130px -40px rgba(123, 149, 255, .6); } }
@keyframes shaft { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes tearForm { 0% { transform: scale(0); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 56% { transform: scale(1.1, 1.25); opacity: 1; } 58%, 92% { transform: scale(0); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
@keyframes nicheDrop { 0%, 57% { transform: translateY(0) rotate(45deg); opacity: 0; } 58% { opacity: 1; } 80% { transform: translateY(160px) rotate(45deg); opacity: 1; } 81%, 100% { transform: translateY(160px) rotate(45deg); opacity: 0; } }
@keyframes nicheRing { 0%, 80% { width: 10px; height: 3px; margin-left: -5px; opacity: 0; } 81% { opacity: .9; } 100% { width: 190px; height: 34px; margin-left: -95px; opacity: 0; } }

/* ---------- landing: live pill, blue halftone glow, phone ---------- */
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 9px; background: rgba(13, 14, 20, .8); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); backdrop-filter: blur(8px); }
.live-pill b { font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); padding-right: 8px; border-right: 1px solid var(--line-3); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(123, 149, 255, .5) 1px, transparent 1.5px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(115deg, transparent 15%, #000 38%, transparent 62%); mask-image: linear-gradient(115deg, transparent 15%, #000 38%, transparent 62%); opacity: .22; }
.hero .sky::before { background: radial-gradient(closest-side, rgba(100, 135, 255, .28), rgba(70, 105, 255, .09) 50%, transparent 78%); }

/* ---------- landing sections (stats, features, faq, finale, footer) ---------- */
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 8px; background: var(--ink-3); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.stats-sec { position: relative; text-align: center; overflow: hidden; }
.ghost-n { position: absolute; left: 50%; top: clamp(10px, 3vw, 40px); transform: translateX(-50%); font-size: clamp(160px, 30vw, 420px); font-weight: 700; letter-spacing: -.07em; line-height: .8; white-space: nowrap; color: transparent; background: linear-gradient(180deg, rgba(243, 242, 238, .1), rgba(243, 242, 238, 0) 80%); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; }
.stats-head { position: relative; max-width: 22ch; margin: clamp(40px, 8vw, 110px) auto 0; font-size: var(--t-3xl); letter-spacing: -.045em; line-height: 1.02; }
.stats-head span { color: var(--text-3); }
.stat-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(60px, 9vw, 120px); text-align: left; }
.stat-c { padding: 4px 22px; border-left: 1px solid var(--line-2); }
.stat-c b { display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.stat-c span { display: block; margin-top: 10px; font-weight: 500; font-size: 15px; }
.stat-c small { display: block; margin-top: 4px; color: var(--text-3); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
.love { position: relative; display: flex; align-items: center; gap: 22px; margin-top: 56px; padding: 12px 18px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line-2); text-align: left; overflow-x: auto; scrollbar-width: none; }
.love-t { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 600; font-size: 14px; }
.love-t .i { color: #ff5c8a; fill: #ff5c8a; width: 16px; height: 16px; }
.love-list { display: flex; gap: 24px; flex: 1; }
.love-list a { display: flex; align-items: center; gap: 10px; flex: none; }
.love-list a .av { box-shadow: none; font-size: 12px; }
.love-list b { display: block; font-size: 13.5px; font-weight: 500; }
.love-list small { display: block; font-size: 12px; color: var(--text-3); }
.love-more { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; font-size: 13.5px; color: var(--text-2); }
.love-more:hover { color: var(--text); }
@media (max-width: 980px) {
  .love { flex-wrap: wrap; overflow: visible; padding: 16px 18px; gap: 14px 22px; }
  .love-list { order: 3; flex: 1 1 100%; flex-direction: column; gap: 12px; min-width: 0; }
  .love-list a { min-width: 0; }
  .love-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.feat-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.feat-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.feat-i { display: flex; gap: 14px; padding: 24px 0; border-top: 1px solid var(--line); }
.feat-i > .i { color: var(--text-2); width: 18px; height: 18px; margin-top: 3px; }
.feat-i h3 { font-size: 16px; letter-spacing: -.01em; }
.feat-i p { margin-top: 6px; color: var(--text-3); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .feat-items { grid-template-columns: 1fr; } }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }
.faq.boxed { border-top: 0; display: grid; gap: 10px; max-width: none; }
.faq.boxed details { border: 1px solid var(--line-2); border-radius: 14px; background: var(--ink-2); padding: 0 20px; }
.faq.boxed summary { font-size: 15px; padding: 18px 0; }
.faq.boxed details[open] summary .i { transform: rotate(180deg); }
.faq.boxed details p { padding-bottom: 18px; font-size: 14.5px; }
.finale { padding: clamp(110px, 14vw, 170px) 0 clamp(70px, 9vw, 110px); }
.finale-arc { position: absolute; left: 0; right: 0; top: 0; height: 420px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 1px solid rgba(123, 149, 255, .55); background: radial-gradient(60% 70% at 50% 0%, rgba(85, 118, 255, .18), transparent 70%); box-shadow: 0 -1px 40px -10px rgba(123, 149, 255, .5); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.finale-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 26px; }
.finale-brand .mark { width: 30px; height: 30px; }
.finale h2 { max-width: 16ch; margin: 0 auto; }
.finale h2 .serif-i { display: block; }
.joined { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 13.5px; color: var(--text-3); text-align: left; }
.joined b { color: var(--text); font-weight: 600; }
.join-av { display: flex; }
.join-av .av { box-shadow: 0 0 0 2px var(--ink-0); font-size: 13px; margin-left: -8px; }
.join-av .av:first-child { margin-left: 0; }
.finale-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
/* footer: a rounded card with a logo tab and a giant glowing wordmark */
.foot { border-top: 0; padding: 0 12px 12px; }
.foot-card { position: relative; margin-top: 40px; border-radius: 24px; background: linear-gradient(180deg, #121319, #0b0c11); border: 1px solid var(--line-2); padding-top: 96px; overflow: hidden; }
.foot-tab { position: absolute; top: -1px; left: -1px; padding: 12px 22px 12px 20px; background: var(--ink-0); border: 1px solid var(--line-2); border-top: 0; border-left: 0; border-radius: 0 0 18px 0; }
.foot-brand .foot-line { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: var(--text); max-width: none; margin-top: 0 !important; }
.foot-brand .foot-line span { color: var(--text-3); }
.foot-contact { display: grid; gap: 10px; margin-top: 22px; }
.foot-contact a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.foot-contact .i, .foot-contact .bi { width: 16px; height: 16px; }
.foot .foot-bottom { margin-top: 44px; }
.foot-giant { display: flex; align-items: flex-end; justify-content: center; margin-top: 18px; font-size: clamp(64px, 17vw, 250px); font-weight: 700; letter-spacing: -.06em; line-height: .78; white-space: nowrap; color: transparent; background: linear-gradient(180deg, #a9bcff 0%, #5576ff 55%, rgba(61, 92, 240, .15) 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 30px rgba(85, 118, 255, .45)); user-select: none; margin-bottom: -.12em; }
.foot-giant i { display: inline-block; width: .16em; height: .16em; margin: 0 .03em .02em; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: linear-gradient(180deg, #cdd7ff, #5576ff); }

/* ---------- landing: shared section heading (big, with a dimmed tail) ---------- */
.big-h { margin-top: 14px; font-size: var(--t-3xl); font-weight: 650; letter-spacing: -.05em; line-height: .98; }
.big-h .dim { color: var(--text-4); }
.big-h .tear { width: .16em; height: .16em; margin-left: .04em; vertical-align: baseline; }

/* ---------- landing: the wall of pages, drifting over the glyph field ---------- */
.wall-sec { position: relative; isolation: isolate; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); overflow: hidden; }
.wall-glyphs { position: absolute; inset: 0; z-index: -1; opacity: .8; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.wall-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.wall-head .eyebrow { font-family: var(--f-mono); text-transform: uppercase; }
.wall { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wall-row { overflow: hidden; contain: layout paint; }
.wall-track { will-change: transform; backface-visibility: hidden; display: flex; gap: 16px; width: max-content; animation: wallDrift calc(var(--n) * 7s) linear infinite; }
.wall-row.rev .wall-track { animation-direction: reverse; }
.wall-row:hover .wall-track { animation-play-state: paused; }
.wall-dup { display: contents; }
@keyframes wallDrift { to { transform: translateX(calc(-50% - 8px)); } }
.win { flex: none; width: 290px; border-radius: 14px; overflow: hidden; background: #0b0b0f; border: 1px solid var(--line-2); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9); transition: transform var(--d-3) var(--ease-out), border-color var(--d-2); }
.win:hover { transform: translateY(-4px); border-color: var(--line-3); }
.win-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; background: #0e0e13; border-bottom: 1px solid var(--line); }
.win-bar > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.win-url { flex: 1; min-width: 0; margin-left: 8px; padding: 3px 8px; border-radius: 6px; background: #07070a; font: 11px var(--f-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-body { position: relative; isolation: isolate; height: 184px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 22px; text-align: center; background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--acc2) 30%, transparent), transparent 70%), linear-gradient(180deg, var(--t2), var(--t1)); }
.win-body::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bgimg, none) center / cover; opacity: .7; }
.win-body::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)); }
.win-body > * { flex-shrink: 0; }
.win-av { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--acc) 85%, #fff), var(--acc2)); border: 2px solid rgba(255, 255, 255, .85); font-weight: 700; color: #08080c; }
.win-av img { width: 100%; height: 100%; object-fit: cover; }
.win-av .mark { width: 80%; height: 80%; }
.win-body b { margin-top: 2px; font-size: 14.5px; font-weight: 700; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-body small { font-size: 11px; color: rgba(255, 255, 255, .62); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-dots { display: flex; gap: 3px; margin-top: 1px; }
.win-dots i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.win-links { display: grid; gap: 5px; width: 72%; margin-top: 5px; }
.win-links i { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
.win-links i:first-child { background: rgba(255, 255, 255, .88); }
@media (prefers-reduced-motion: reduce) { .wall-row { overflow-x: auto; scrollbar-width: none; } .wall-track { animation: none; } }

/* ---------- landing: your page, with the sample card that leans toward the pointer ---------- */
.yours-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 100px); align-items: center; }
.yours .lede { margin-top: 18px; max-width: 46ch; }
.num-list { margin-top: 30px; max-width: 560px; border-top: 1px solid var(--line); }
.num-list li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.num-list li > span { font: 12px var(--f-mono); color: var(--text-4); padding-top: 3px; }
.num-list b { font-size: 16px; font-weight: 600; }
.num-list p { margin-top: 4px; font-size: 14px; color: var(--text-3); }
.tilt-wrap { justify-self: center; width: min(360px, 100%); perspective: 1100px; padding: 20px; }
.tilt-card { --rx: 4deg; --ry: -8deg; display: flex; flex-direction: column; align-items: center; padding: 30px 22px 20px; border-radius: 26px; background: linear-gradient(180deg, #121217, #0b0b0f); border: 1px solid var(--line-2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 30px 80px -40px rgba(85, 118, 255, .35); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease-out); transform-style: preserve-3d; }
.tc-av { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #1d2133, #0a0b10); border: 1px solid var(--line-3); box-shadow: 0 0 40px -10px rgba(123, 149, 255, .5); }
.tc-av .mark { width: 62%; height: 62%; }
.tc-name { margin-top: 14px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.tc-bio { margin-top: 3px; font-size: 12.5px; color: var(--text-3); }
.tc-badges { display: flex; gap: 8px; margin-top: 10px; color: var(--text-2); }
.tc-badges .i, .tc-badges .bi { width: 15px; height: 15px; }
.tc-badges .i:nth-child(2) { color: var(--blue); }
.tc-links { display: grid; gap: 8px; width: 100%; margin-top: 20px; }
.tc-l { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 12px; background: #16161c; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--text); transition: background .35s, color .35s, transform .35s var(--ease-out); }
.tc-l .bi { width: 15px; height: 15px; }
.tc-l.on { background: #f3f2ee; color: #0a0a0d; transform: scale(1.025); }
.tc-foot { margin-top: 16px; font: 11.5px var(--f-mono); color: var(--text-4); }

/* ---------- landing: music player demo ---------- */
.music-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 7vw, 100px); align-items: center; }
.music-sec .lede { margin-top: 18px; max-width: 46ch; }

/* ---------- landing: pricing tiers ---------- */
.price-head { margin-bottom: clamp(32px, 5vw, 52px); }
.price-head .lede { margin-top: 14px; max-width: 54ch; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tier { position: relative; display: flex; flex-direction: column; padding: 28px 26px 30px; border-radius: 22px; background: linear-gradient(180deg, #121217, #0c0c10); border: 1px solid var(--line-2); }
.tier.feat { background: radial-gradient(100% 60% at 50% 0%, rgba(85, 118, 255, .16), transparent 70%), linear-gradient(180deg, #13141c, #0c0c10); border-color: var(--blue-line); }
.tier-tab { position: absolute; top: -1px; right: -1px; padding: 8px 16px; border-radius: 0 22px 0 14px; background: #050507; border: 1px solid var(--blue-line); border-top: 0; border-right: 0; font-size: 12.5px; font-weight: 600; }
.tier h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.tier h3 .i { width: 16px; height: 16px; color: var(--blue); }
.tier-price { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.tier-price b { font-size: 50px; font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.tier-price small { font-size: 14px; color: var(--text-3); }
.tier-sub { margin-top: 14px; min-height: 3em; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.tier-btn { height: 46px; margin-top: 22px; border-radius: 999px; font-weight: 600; }
.tier h4 { margin-top: 30px; font-size: 14px; font-weight: 600; }
.tier ul { margin-top: 14px; display: grid; gap: 11px; }
.tier li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.tier li .i { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--text-3); }
.tier.feat li .i { color: var(--blue); }
.tier-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-radius: 18px; background: #0c0c10; border: 1px solid var(--line-2); }
.tier-strip > div { display: flex; gap: 12px; padding: 18px 22px; }
.tier-strip > div + div { border-left: 1px solid var(--line); }
.tier-strip .i { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--blue); }
.tier-strip b { display: block; font-size: 14.5px; font-weight: 600; }
.tier-strip small { display: block; margin-top: 3px; font-size: 13px; color: var(--text-3); line-height: 1.45; }

@media (max-width: 980px) {
  .yours-grid, .music-grid { grid-template-columns: minmax(0, 1fr); }
  .music-grid .lp { order: 2; }
  .tiers, .tier-strip { grid-template-columns: minmax(0, 1fr); }
  .tier-strip > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .tier-sub { min-height: 0; }
}
@media (max-width: 600px) {
  .win { width: 240px; }
  .win-body { height: 172px; }
}

/* the whole tear gathers, swells, lets go and falls to the plinth, then a new one forms */
@keyframes tearFall { 0% { transform: translateY(0) scale(0); opacity: 0; } 14% { transform: translateY(0) scale(1); opacity: 1; } 46% { transform: translateY(0) scale(1.1, 1.2); opacity: 1; } 78% { transform: translateY(29px) scale(1, 1.15); opacity: 1; } 84%, 100% { transform: translateY(32px) scale(.6); opacity: 0; } }

/* the wall before any pages exist: two lines of text drifting opposite ways */
.wall-msg { flex: none; display: inline-flex; align-items: center; gap: .45em; padding: 6px 0; font-size: clamp(28px, 4.4vw, 62px); font-weight: 650; letter-spacing: -.045em; line-height: 1.1; color: var(--text-4); white-space: nowrap; }
.wall-msg.hot { color: var(--text); }
.wall-msg .tear { width: .26em; height: .26em; margin: 0 .5em 0 .15em; }

/* ---------- landing: the sample music player. Its colours come from the cover art (set in JS as --pc / --pa) ---------- */
.lp { --pc: 52, 58, 56; --pa: 255, 150, 70; position: relative; isolation: isolate; overflow: hidden; width: min(440px, 100%); justify-self: center; padding: 18px 20px 14px; border-radius: 26px; background: rgb(var(--pc)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95), 0 40px 100px -50px rgba(var(--pa), .45); transition: background .6s; }
.lp-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.lp-bg::before { content: ""; position: absolute; inset: -30%; background: url("/brand/music/sky-cover.png") center / cover; filter: blur(34px) saturate(1.35); opacity: .55; }
.lp-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .5)); }
.lp-top { display: flex; align-items: center; gap: 14px; }
.lp-art { width: 64px; height: 64px; flex: none; border-radius: 15px; object-fit: cover; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7); }
.lp-t { flex: 1; min-width: 0; }
.lp-t b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-t small { display: block; margin-top: 3px; font-size: 14px; color: rgba(255, 255, 255, .62); }
.lp-vol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: rgba(255, 255, 255, .7); align-self: flex-start; transition: color var(--d-2), background var(--d-2); }
.lp-vol:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.lp-vol .i { width: 16px; height: 16px; }
.lp-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.lp-ctl { display: flex; align-items: center; gap: 6px; }
.lp-ctl button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(255, 255, 255, .75); transition: color var(--d-2), background var(--d-2); }
.lp-ctl button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.lp-ctl .i { width: 15px; height: 15px; }
.lp-ctl .lp-play { width: 42px; height: 42px; background: #fff; color: #111; }
.lp-ctl .lp-play:hover { background: #fff; color: #000; transform: scale(1.05); }
.lp-ctl .lp-play .i { fill: currentColor; width: 16px; height: 16px; }
.lp-time { font: 12px var(--f-mono); color: rgba(255, 255, 255, .65); min-width: 2.6em; }
.lp-seek { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--pa)) var(--p, 0%), rgba(255, 255, 255, .2) var(--p, 0%)); cursor: pointer; }
.lp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: rgb(var(--pa)); border: 0; box-shadow: 0 0 0 4px rgba(var(--pa), .3); }
.lp-seek::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: rgb(var(--pa)); border: 0; box-shadow: 0 0 0 4px rgba(var(--pa), .3); }
.lp-lyrics { height: 120px; margin-top: 12px; overflow: hidden; text-align: center; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); }
.lp-lyrics [data-lp-lines] { transition: transform .55s var(--ease-out); }
.lp-lyrics p { height: 30px; line-height: 30px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: rgba(255, 255, 255, .34); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .35s, transform .35s; }
.lp-lyrics p.on { color: #fff; transform: scale(1.03); }

/* nav: scroll down and the bar folds into a compact pill (logo + buttons), then opens back out at the top */
.nav { transition: padding-top .5s var(--ease-out); }
.nav-in { width: 100%; margin-inline: auto; transition: width .6s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1), padding .5s cubic-bezier(.22, 1, .36, 1), border-radius .5s var(--ease-out), background var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease); }
.nav-links { transition: opacity .3s var(--ease), transform .55s cubic-bezier(.22, 1, .36, 1); }
@media (min-width: 861px) {
  .nav.scrolled { padding-top: 10px; }
  .nav.scrolled .nav-in { width: min(100%, 470px); height: 52px; padding-left: 14px; border-radius: 16px; }
  .nav.scrolled .nav-links { opacity: 0; transform: translateX(-50%) scale(.9); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .nav, .nav-in, .nav-links { transition: none; } }

/* a few real pages: they stay put, once each, left-aligned under the heading */
.wall:has(.wall-static) { -webkit-mask-image: none; mask-image: none; }
.wall-static { display: flex; flex-wrap: wrap; gap: 16px; }
.wall-static .win { width: min(290px, 100%); }

/* nav: shop + settings buttons, the signed-in user chip with its menu, and a blue Log in */
.nav-r { gap: 8px; }
.nav-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); transition: background var(--d-2), border-color var(--d-2), transform .25s var(--ease-out); }
.nav-ic:hover { background: rgba(255, 255, 255, .09); border-color: var(--line-3); transform: translateY(-1px); }
.nav-ic .i { width: 16px; height: 16px; }
.btn.blue { background: linear-gradient(180deg, #7f98ff, #4f6fff); color: #fff; border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 26px -12px rgba(85, 118, 255, .9); transition: transform .2s var(--ease-out), filter .2s; }
.btn.blue:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nav-user { position: relative; }
.nav-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 5px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); font-size: 14px; font-weight: 500; transition: background var(--d-2), border-color var(--d-2); }
.nav-chip:hover, .nav-chip[aria-expanded="true"] { background: rgba(255, 255, 255, .09); border-color: var(--line-3); }
.nav-chip > .i { width: 14px; height: 14px; color: var(--text-3); transition: transform .25s var(--ease-out); }
.nav-chip[aria-expanded="true"] > .i { transform: rotate(180deg); }
.nav-av { display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 8px; background: #ececf2; color: #0a0a0d; font-weight: 700; font-size: 13px; }
.nav-av img { width: 100%; height: 100%; object-fit: cover; }
.nav-un { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; min-width: 210px; padding: 8px; border-radius: 16px; background: #0c0c11; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); animation: navMenu .2s var(--ease-out); transform-origin: top right; }
.nav-menu[hidden] { display: none; }
@keyframes navMenu { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.nav-menu a, .nav-menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; color: var(--text); text-align: left; }
.nav-menu a:hover, .nav-menu button:hover { background: rgba(255, 255, 255, .07); }
.nav-menu .i { width: 16px; height: 16px; color: var(--text-2); }
.nav-menu .danger, .nav-menu .danger .i { color: var(--bad); }
.nav-sep { height: 1px; margin: 6px 4px; background: var(--line-2); }
@media (max-width: 860px) { .nav-un { display: none; } .nav-chip { padding-right: 8px; } }

/* marketplace */
.mk-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mk-how { padding: 24px; border-radius: 22px; background: linear-gradient(180deg, #121217, #0c0c10); border: 1px solid var(--line-2); }
.mk-how h3 { font-size: 16px; font-weight: 650; margin-bottom: 16px; }
.mk-how ol { display: grid; gap: 18px; margin-bottom: 22px; }
.mk-how li { display: flex; gap: 14px; }
.mk-how li > span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font: 600 13px var(--f-mono); }
.mk-how b { font-size: 14.5px; font-weight: 600; }
.mk-how p { margin-top: 3px; font-size: 13.5px; color: var(--text-3); line-height: 1.5; }
@media (max-width: 860px) { .mk-grid { grid-template-columns: minmax(0, 1fr); } }

/* testing notice */
.tnotice { position: fixed; z-index: 90; left: 50%; top: 84px; width: min(1120px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(36, 28, 10, .92); border: 1px solid rgba(245, 197, 107, .35); color: #f4efe2; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); opacity: 0; transform: translate(-50%, -10px); transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.tnotice.in { opacity: 1; transform: translate(-50%, 0); }
.tn-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: #f5c56b; }
.tn-ic .i { width: 20px; height: 20px; }
.tn-t { flex: 1; min-width: 0; }
.tn-t b { display: block; font-size: 14.5px; font-weight: 700; }
.tn-t p { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: rgba(244, 239, 226, .78); }
.tn-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: rgba(244, 239, 226, .6); }
.tn-x:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.tn-x .i { width: 14px; height: 14px; }
.dash ~ .tnotice, html[data-section="dashboard"] .tnotice { top: auto; bottom: 18px; width: min(560px, calc(100vw - 32px)); }
@media (max-width: 700px) { .tnotice { top: 78px; } }

/* FAQ: the chevron turns with the open state while the answer glides; the box lights up when open */
.faq.boxed details { transition: border-color .3s, background .3s, box-shadow .3s; }
.faq.boxed details[open], .faq.boxed details.opening { border-color: var(--blue-line); background: linear-gradient(180deg, rgba(123, 149, 255, .06), var(--ink-2)); box-shadow: 0 18px 40px -26px rgba(85, 118, 255, .5); }
.faq.boxed details.closing { border-color: var(--line-2); background: var(--ink-2); box-shadow: none; }
.faq summary .i { transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .3s; }
.faq.boxed details.closing summary .i { transform: rotate(0); }
.faq.boxed summary:hover { color: #fff; }

/* the account dropdown must sit above the testing notice while it's open; compact look with white icons */
.nav:has([data-umenu][aria-expanded="true"]) { z-index: 95; }
.nav-menu { min-width: 236px; padding: 8px; border-radius: 18px; background: rgba(10, 10, 12, .97); }
.nav-menu a, .nav-menu button { height: 46px; padding: 0 14px; gap: 16px; font-size: 15px; font-weight: 500; }
.nav-menu .i { width: 20px; height: 20px; color: var(--text); }
.nav-menu .nav-sep { margin: 6px 0; }
.nav-menu .danger, .nav-menu .danger .i { color: var(--bad); }