/* SEQUOIA EXCHANGE — Sequoia Signal look (near-black, hairlines, one signal colour per product) */
:root, [data-theme="midnight"] {
  --void: #0E1626; --surface: #142038; --raised: #1D2B45; --well: #0A101C; --hair: #26344F;
  --outline: #5E6E8C; --ink: #E6ECF5; --muted: #A3B0C7; --faint: #8090AB; --live: #7fd1a8; --warn: #ff6b5e; --hold: #f2c14e;
  --sig: #E6ECF5; --sage: #A1BC96; --ember: #EA773C;
  --accent: #E2572B; --on-accent: #0E1626; --btn2: #9DB7E8; --on-btn2: #0E1626;
  --logo: #9DB7E8; --logo-t: #E2572B; --logo-sub: #E6ECF5;
  --nav-bg: rgba(14,22,38,.92);
  --stage: #0A101C; --stage-ink: #E6ECF5; --stage-faint: #8090AB;
  --f-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; /* one font everywhere; small labels and prices use Space Grotesk too */
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}
/* Visitor-picked color themes (footer and home page swatches). Midnight is the default. */
[data-theme="aubergine"] { --stage: #140F1B; --stage-ink: #EEF1F6; --stage-faint: #9AA3B5; --void: #1B1424; --surface: #221A2D; --raised: #2C2138; --well: #140F1B; --hair: #3A2D49; --outline: #7A6A8E; --ink: #EEE8F3; --muted: #B6A9C6; --faint: #998BAB; --sig: #EEE8F3;
  --accent: #2BB3A6; --on-accent: #1B1424; --btn2: #D8CCE6; --on-btn2: #1B1424; --logo: #D8CCE6; --logo-t: #2BB3A6; --logo-sub: #EEE8F3; --nav-bg: rgba(27,20,36,.92); color-scheme: dark; }
[data-theme="inkteal"] { --stage: #08171A; --stage-ink: #EEF1F6; --stage-faint: #9AA3B5; --void: #0C1F22; --surface: #11282B; --raised: #17322F; --well: #08171A; --hair: #21403D; --outline: #5F8580; --ink: #E8F1EE; --muted: #A3BDB7; --faint: #88A39D; --sig: #E8F1EE;
  --accent: #E0654B; --on-accent: #0C1F22; --btn2: #CFE3DE; --on-btn2: #0C1F22; --logo: #CFE3DE; --logo-t: #E0654B; --logo-sub: #E8F1EE; --nav-bg: rgba(12,31,34,.92); color-scheme: dark; }
[data-theme="storm"] { --stage: #0E141F; --stage-ink: #EEF1F6; --stage-faint: #9AA3B5; --void: #141B29; --surface: #1A2333; --raised: #212B3E; --well: #0E141F; --hair: #2B3650; --outline: #66728C; --ink: #E9EDF5; --muted: #A8B1C4; --faint: #8C97AB; --sig: #E9EDF5;
  --accent: #F0B23C; --on-accent: #141B29; --btn2: #5B86F0; --on-btn2: #0E141F; --logo: #5B86F0; --logo-t: #F0B23C; --logo-sub: #E9EDF5; --nav-bg: rgba(20,27,41,.92); color-scheme: dark; }
[data-theme="moonlight"] { --stage: #14213D; --stage-ink: #EEF1F6; --stage-faint: #9AA3B5; --void: #E9EEF5; --surface: #F4F7FB; --raised: #DCE3EE; --well: #FFFFFF; --hair: #C9D2DF; --outline: #8792A6; --ink: #14213D; --muted: #4C5870; --faint: #6B7690; --sig: #14213D; --live: #1f8a5b; --warn: #c8362c; --hold: #a26a00;
  --accent: #E2572B; --on-accent: #FFFFFF; --btn2: #1A2E66; --on-btn2: #FFFFFF; --logo: #1A2E66; --logo-t: #E2572B; --logo-sub: #14213D; --nav-bg: rgba(233,238,245,.92); color-scheme: light; }
[data-theme="bone"] { --stage: #1F2533; --stage-ink: #EEF1F6; --stage-faint: #9AA3B5; --void: #EDE7DC; --surface: #F5F0E7; --raised: #E2DACC; --well: #FFFDF8; --hair: #D5CBB8; --outline: #91877A; --ink: #1F2533; --muted: #57544E; --faint: #77716A; --sig: #1F2533; --live: #1f8a5b; --warn: #c8362c; --hold: #a26a00;
  --accent: #D7372F; --on-accent: #FFFFFF; --btn2: #14285C; --on-btn2: #FFFFFF; --logo: #14285C; --logo-t: #D7372F; --logo-sub: #1F2533; --nav-bg: rgba(237,231,220,.92); color-scheme: light; }
/* the CROWNFIRE Founding Ring page keeps its own dark look in every theme */
body.fr { --void: #08090a; --surface: #101114; --raised: #17181c; --well: #050506; --hair: #23242a; --outline: #6a6e77; --ink: #ece8e2; --muted: #a19d97; --faint: #86827c; --nav-bg: rgba(8,9,10,.92); --live: #7fd1a8; --warn: #ff6b5e; --hold: #f2c14e; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--void); color: var(--ink); }
body { font-variant-numeric: tabular-nums; font-family: var(--f-display); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; display: block; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--outline); }
a:hover { text-decoration-color: var(--ink); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

/* top bar */
.nav { border-bottom: 1px solid var(--hair); background: var(--nav-bg); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "brand main side"; align-items: center; gap: 12px 18px; min-height: 68px; padding-top: 12px; padding-bottom: 12px; }
.nav .brand { grid-area: brand; justify-self: start; }
.nav ul.nav-main { grid-area: main; margin: 0; justify-self: center; }
.nav ul.nav-side { grid-area: side; margin: 0; justify-self: end; }
@media (max-width: 640px) { .nav .wrap { grid-template-columns: 1fr auto; grid-template-areas: "brand side" "main main"; } }
.nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav .brand .brand-logo { display: block; height: 37px; aspect-ratio: 1409 / 270; width: auto; }
.nav .brand span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--hair); padding-left: 12px; }
.nav ul { list-style: none; display: flex; gap: 18px; margin: 0 0 0 auto; padding: 0; flex-wrap: wrap; align-items: center; }
.nav ul a { text-decoration: none; font-size: 15px; color: var(--muted); }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--ink); }
.nav ul a.nav-sell { display: inline-flex; align-items: center; justify-content: center; width: 104px; min-height: 40px; height: 40px; padding: 0; font-size: 25px; line-height: 1; border-radius: 10px; background: var(--ink); color: var(--void); font-weight: 700; transition: background .15s; }
.nav ul a.nav-sell:hover, .nav ul a.nav-sell[aria-current] { filter: brightness(1.12); color: var(--void); }
.nav ul li { display: flex; align-items: center; }
.nav ul a.nav-browse { display: inline-flex; align-items: center; justify-content: center; width: 104px; height: 40px; padding: 0; border-radius: 10px; background: var(--btn2); border: 0; color: var(--on-btn2); }
.nav ul a.nav-browse svg { width: 36px; height: 36px; flex: none; }
.nav ul a.nav-browse:hover { filter: brightness(1.1); }
.nav ul a.nav-signin { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ink); color: var(--ink); font-weight: 500; }
.nav ul a.nav-signin:hover, .nav ul a.nav-signin[aria-current] { background: var(--raised); }
.nav .count { font-family: var(--f-mono); font-size: 11px; background: var(--ink); color: var(--void); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }

main { flex: 1; width: 100%; padding: clamp(28px, 5vw, 64px) 0 72px; }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.eyebrow.eyebrow-big { font-size: 20px; color: var(--ink); letter-spacing: .14em; }
h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.06; font-weight: 500; letter-spacing: -.02em; margin: 0 0 16px; }
h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.15; font-weight: 500; letter-spacing: -.01em; margin: 48px 0 14px; }
h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.lede { color: var(--muted); font-size: 18px; margin: 0 0 28px; max-width: 60ch; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.mono { font-family: var(--f-mono); }
.small { font-size: 14px; }

/* buttons + forms */
button, .btn { font: 500 15px/1 var(--f-display); color: var(--ink); background: var(--raised); border: 1px solid var(--outline); border-radius: 10px; padding: 13px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
button:hover, .btn:hover { border-color: var(--ink); }
.primary { background: var(--ink) !important; color: var(--void) !important; border-color: var(--ink) !important; }
.primary:hover { filter: brightness(1.12); }
.danger { border-color: #7a3b36; color: #ffb4ab; }
.ghost { background: transparent; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
label { display: block; font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.field { margin: 0 0 18px; }
.hint { font-size: 13px; color: var(--faint); margin: 6px 0 0; }
input[type=text], input[type=email], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; font: 400 15px var(--f-display); color: var(--ink); background: var(--well); border: 1px solid var(--outline); border-radius: 10px; padding: 12px 14px; min-height: 44px; }
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 15px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > input { flex: 1 1 240px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* notices */
.notice { border: 1px solid var(--hair); border-left: 3px solid var(--sig); background: var(--surface); border-radius: 10px; padding: 14px 16px; margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.notice b { color: var(--ink); font-weight: 500; }
.notice.ok { --sig: var(--live); } .notice.err { --sig: var(--warn); } .notice.hold { --sig: var(--hold); }
.devbar { background: #2a2210; color: #f2d48c; font-family: var(--f-mono); font-size: 12px; padding: 8px var(--gutter); text-align: center; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: clamp(18px, 3vw, 26px); position: relative; overflow: hidden; }
.card.sig::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sig); }

/* listing grid */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.filters input[type=search] { flex: 1 1 260px; width: auto; }
.filters select { flex: 0 1 200px; width: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.chips a { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--hair); border-radius: 999px; text-decoration: none; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; min-height: 34px; }
.chips a i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.chips a[aria-current] { color: var(--ink); border-color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tile { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; text-decoration: none; transition: border-color .2s, transform .2s; }
.tile:hover { border-color: var(--sig); transform: translateY(-2px); }
.tile .pic { --ink: var(--stage-ink); --faint: var(--stage-faint); aspect-ratio: 4 / 3; background: var(--stage); display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--hair); overflow: hidden; }
.tile .pic img.photo { width: 100%; height: 100%; object-fit: cover; }
.tile .pic img.logo { width: 70%; max-height: 40%; object-fit: contain; }
.tile .body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.tile .logo-sm { height: 16px; width: auto; max-width: 60%; object-fit: contain; object-position: left; }
.tile .t { font-size: 16px; font-weight: 500; line-height: 1.3; }
.tile .p { font-family: var(--f-mono); font-size: 18px; }
.tile .meta { font-size: 13px; color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; }
.badge { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--hair); border-radius: 999px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.badge.ok { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent); }
.badge.hold { color: var(--hold); border-color: color-mix(in srgb, var(--hold) 40%, transparent); }
.badge.err { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge.ring { color: var(--sage); border-color: #3b4a36; }
.pic .badge { position: absolute; top: 10px; left: 10px; background: color-mix(in srgb, var(--void) 85%, transparent); }
.empty { border: 1px dashed var(--hair); border-radius: 14px; padding: 40px 20px; text-align: center; color: var(--muted); }

/* listing page */
.listing { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: start; }
@media (max-width: 860px) { .listing { grid-template-columns: 1fr; } }
.gallery .main { --ink: var(--stage-ink); --faint: var(--stage-faint); aspect-ratio: 4 / 3; background: var(--stage); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.gallery .main img { width: 100%; height: 100%; object-fit: contain; }
.gallery .main img.logo { width: 70%; height: auto; }
.thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.thumbs button { padding: 0; width: 72px; height: 54px; min-height: 0; overflow: hidden; border-radius: 8px; border: 1px solid var(--hair); background: var(--well); }
.thumbs button[aria-pressed=true] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.price { font-family: var(--f-mono); font-size: 34px; margin: 6px 0 4px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; margin: 18px 0; }
.facts dt { color: var(--faint); } .facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.desc { white-space: pre-wrap; color: var(--muted); overflow-wrap: anywhere; }
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.links a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 10px; text-decoration: none; overflow-wrap: anywhere; }
.links span { font-family: var(--f-mono); font-size: 12px; color: var(--faint); }
.seller { display: flex; gap: 14px; align-items: center; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--raised); border: 1px solid var(--hair); flex: none; text-transform: uppercase; }
.stars { color: var(--hold); letter-spacing: 2px; }
.stack { display: grid; gap: 14px; }
details.box { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 16px; background: var(--surface); }
details.box summary { cursor: pointer; font-weight: 500; }
details.box[open] summary { margin-bottom: 12px; }

/* tables / lists in account + admin */
.list { display: grid; gap: 10px; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.item .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.item .actions form { margin: 0; }
.item .actions button { min-height: 38px; padding: 9px 14px; font-size: 14px; }
@media (max-width: 640px) { .item { grid-template-columns: 1fr; } .item .actions { justify-content: flex-start; } }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); margin: 0 0 22px; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current] { color: var(--ink); border-color: var(--ink); }

/* messages */
.thread { display: grid; gap: 10px; margin: 0 0 18px; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hair); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.me { justify-self: end; background: var(--raised); }
.bubble .when { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--faint); margin-top: 6px; }
.bubble.held { border-color: color-mix(in srgb, var(--hold) 40%, transparent); }

/* how it works */
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: s; margin: 0; padding: 0; list-style: none; }
.steps3 li { counter-increment: s; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 20px; }
.steps3 li::before { content: "0" counter(s); font-family: var(--f-mono); font-size: 12px; color: var(--faint); display: block; margin-bottom: 10px; letter-spacing: .1em; }
.steps3 li > b { display: block; font-weight: 500; margin-bottom: 4px; }
.steps3 p b { font-weight: 600; color: var(--ink); }
.steps3 p { margin: 0; color: var(--muted); font-size: 15px; }
.steps3.contact-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.steps3.contact-cards li::before { content: none; }
.steps3.contact-cards a { display: inline-block; margin-top: 8px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 60px); align-items: center; margin-bottom: 40px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.ringart { width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: center; }
.ringart svg { width: 100%; height: 100%; display: block; }
.hero > .ringart { width: 550px; max-width: none; }
@media (max-width: 860px) { .hero > .ringart { width: 100%; max-width: 550px; } }
.promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; --sig: var(--sage); border-color: #2b3528; background: linear-gradient(120deg, #0f1411, var(--surface)); }
.promo img { height: clamp(48px, 7vw, 76px); width: auto; max-width: 100%; }
@media (max-width: 640px) { .promo { grid-template-columns: 1fr; } }

/* Founding Ring page */
.fr { --sig: var(--sage); }
.fr .logo-big { width: min(560px, 100%); height: auto; margin: 0 0 26px; }
.fr .seedpair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fr .seedpair figure { margin: 0; background: #0f1411; border: 1px solid #22301f; border-radius: 14px; padding: 14px; }
.fr .seedpair figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .08em; margin-top: 8px; text-align: center; }
.fr .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.fr .tiers .card h3 { color: var(--sage); }
.fr .tiers .card.heir h3 { color: var(--ember); }
.fr .tiers ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; }
.fr .honest { border-left: 3px solid var(--ember); padding: 4px 0 4px 18px; }
.fr .honest p { margin: 0 0 10px; color: var(--muted); }
.fr .signup { background: linear-gradient(120deg, #0f1411, #101114); border-color: #2b3528; }
.fr .primary { background: var(--sage) !important; border-color: var(--sage) !important; color: #08090a !important; }
.fr .primary:hover { background: #b9d2ae !important; }

footer { padding: 28px 0; border-top: 1px solid var(--hair); color: var(--faint); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
footer a { color: var(--muted); }
#photoPreview img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hair); }
input[type=file] { font: 400 14px var(--f-display); color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { font: 500 14px var(--f-display); color: var(--ink); background: var(--raised); border: 1px solid var(--outline); border-radius: 10px; padding: 10px 14px; margin-right: 12px; cursor: pointer; }
.fre-mark { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); margin: 0 0 26px; }
.fre-mark .fre-ring { height: clamp(88px, 11vw, 150px); width: auto; flex: none; }
.fre-mark .fre-word { display: block; height: clamp(64px, 8.1vw, 104px); aspect-ratio: 1409 / 270; width: auto; max-width: 100%; }
.btn-sage { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; font-weight: 700; letter-spacing: .06em; }
.btn-sage:hover { filter: brightness(1.1); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* phone: smaller search and Sell buttons */
@media (max-width: 640px) { .nav ul a.nav-browse, .nav ul a.nav-sell { width: 84px; height: 34px; min-height: 34px; border-radius: 9px; } .nav ul a.nav-browse svg { width: 26px; height: 26px; } .nav ul a.nav-sell { font-size: 20px; } }

/* "NEW PLUGINS" rotating spotlight (home page) */
.spot { margin: 0 0 44px; }
.spot .eyebrow-big { margin-bottom: 14px; }
.spot-stage { position: relative; }
.spot-slide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "tag tag" "logo line" "logo meta"; align-items: center; gap: 8px 32px; min-height: 230px; padding: 28px 84px; border-radius: 18px; text-decoration: none; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--hair)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), var(--surface); animation: spotIn .5s ease; }
.spot-slide[hidden] { display: none; }
@keyframes spotIn { from { opacity: 0; } to { opacity: 1; } }
.spot-tag { grid-area: tag; font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.spot-logo { grid-area: logo; max-height: 120px; max-width: 100%; width: auto; justify-self: start; }
.spot-line { grid-area: line; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.25; align-self: end; }
.spot-meta { grid-area: meta; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 15px; align-self: start; }
.spot-meta b { color: #08090a; background: var(--c); padding: 8px 16px; border-radius: 10px; font-weight: 700; }
.spot-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--hair); background: color-mix(in srgb, var(--void) 75%, transparent); color: var(--ink); font-size: 34px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; }
.spot-arrow:hover { background: var(--raised); }
.spot-arrow.prev { left: 16px; } .spot-arrow.next { right: 16px; }
.spot-dots { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.spot-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--hair); cursor: pointer; }
.spot-dot[aria-current] { background: var(--ink); }
@media (max-width: 640px) {
  .spot-slide { grid-template-columns: 1fr; grid-template-areas: "tag" "logo" "line" "meta"; padding: 22px 22px 70px; min-height: 0; gap: 12px; }
  .spot-logo { max-height: 72px; }
  .spot-arrow { top: auto; bottom: 12px; transform: none; width: 44px; height: 44px; font-size: 30px; }
  .spot-arrow.prev { left: auto; right: 66px; } .spot-arrow.next { right: 14px; }
}
.spot-dots .spot-dot { flex: 0 0 10px; width: 10px; height: 10px; min-height: 0; min-width: 0; padding: 0; display: block; }
.spot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.spot-head .eyebrow-big { margin: 0; }
.spot-head a { color: var(--accent); font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; }
.spot-head a:hover { filter: brightness(1.15); }
.spot-big { grid-area: logo; font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 56px); line-height: 1; letter-spacing: .02em; color: var(--c); }
.spot-open { border-style: dashed; }
.spot-meta small { flex-basis: 100%; font-size: 13px; color: var(--faint); margin-top: -6px; }
.spot-slide:hover .spot-meta b { filter: brightness(1.12); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-brand .foot-logo { display: block; height: 30px; aspect-ratio: 1409 / 270; width: auto; }
/* compact spotlight in the checkout column of a listing */
.spot.compact { margin: 6px 0 0; }
.spot.compact .spot-head { margin-bottom: 10px; }
.spot.compact .spot-head a { font-size: 13px; }
.spot.compact .spot-slide { grid-template-columns: 1fr; grid-template-areas: "tag" "logo" "line" "meta"; padding: 18px 18px 62px; min-height: 0; gap: 10px; }
.spot.compact .spot-logo { max-height: 56px; }
.spot.compact .spot-line { font-size: 18px; }
.spot.compact .spot-big { font-size: 30px; }
.spot.compact .spot-arrow { top: auto; bottom: 12px; transform: none; width: 42px; height: 42px; font-size: 28px; }
.spot.compact .spot-arrow.prev { left: auto; right: 62px; } .spot.compact .spot-arrow.next { right: 12px; }
.spot.compact .spot-dots { gap: 7px; } .spot.compact .spot-dots .spot-dot { width: 8px; height: 8px; flex-basis: 8px; }
/* sell form: who makes it */
.maker-pick { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.maker-pick legend { font-size: 14px; color: var(--muted); margin-bottom: 10px; padding: 0; }
[data-for][hidden], [data-odd][hidden] { display: none !important; }
/* other makers' plugins without a photo: name card instead of a logo */
.namecard { display: grid; gap: 6px; place-content: center; text-align: center; padding: 16px; width: 100%; height: 100%; }
.namecard b { font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.namecard span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.namecard.big b { font-size: clamp(28px, 4vw, 44px); }
.filters select[name="cat"] { max-width: 240px; }

/* hero title (the logo is the page's h1) */
.hero-title { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.01em; margin: 0 0 16px; font-weight: 500; }
.fre-mark { font-size: inherit; }
/* color picker: a small dropdown (current swatch + label); the six choices open below it */
.theme-pick { position: relative; display: inline-block; margin: 0 0 16px; }
.theme-pick summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 12px 6px 8px;
  border: 1px solid var(--hair); border-radius: 999px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); user-select: none; }
.theme-pick summary::-webkit-details-marker { display: none; }
.theme-pick summary:hover, .theme-pick[open] summary { color: var(--ink); border-color: var(--outline); }
.theme-pick summary b { font-size: 10px; transition: transform .15s; }
.theme-pick[open] summary b { transform: rotate(180deg); }
.theme-pick .sw { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--hair);
  background: linear-gradient(135deg, var(--b) 0 55%, var(--t) 55% 100%); }
.theme-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 190px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.theme-menu button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 0; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: 500 14px/1.2 var(--f-display); text-align: left; cursor: pointer; }
.theme-menu button:hover { background: var(--raised); }
.theme-menu button[aria-pressed="true"] { background: var(--raised); }
.theme-menu button[aria-pressed="true"]::after { content: "\2713"; margin-left: auto; color: var(--accent); }
footer .theme-pick { margin: 0; }
footer .theme-menu { top: auto; bottom: calc(100% + 6px); }
/* plugin logos are drawn for dark backgrounds: keep them on the dark stage in every theme */
.spot-slide { --ink: var(--stage-ink); --muted: var(--stage-faint); color: var(--stage-ink);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), var(--stage) !important; }
.spot-slide .spot-meta small { color: var(--stage-faint); }
.tile .logo-sm, .aside-logo { background: var(--stage); padding: 5px 9px; border-radius: 7px; box-sizing: content-box; }

/* top bar buttons (search + Sell): one button's width of space between them.
   Home page: no small logo (the big one is in the hero), so the buttons sit on the left where it was. */
.nav ul.nav-main { gap: 104px; }   /* one button's width between search and Sell */
.nav.is-home .brand { display: none; }
.nav.is-home ul.nav-main { grid-area: brand; justify-self: start; }
@media (max-width: 640px) {
  .nav ul.nav-main { gap: clamp(16px, calc(100vw - 310px), 84px); flex-wrap: nowrap; }   /* up to one 84px phone button of space, less on narrow phones so all fits on one line */
  .nav.is-home .wrap { grid-template-areas: "brand side"; column-gap: 8px; }
  .nav.is-home ul.nav-main { gap: clamp(8px, calc(100vw - 380px), 84px); }   /* home: search, Sell, Sign up and Sign in share one row */
  .nav.is-home ul a.nav-browse, .nav.is-home ul a.nav-sell { width: clamp(64px, calc((100vw - 200px) / 2), 84px); }
}

/* NEW PLUGINS slides: say plainly what each plugin is, above its one-line pitch */
.spot-what { display: block; margin: 0 0 8px; font-family: var(--f-mono); font-weight: 600; font-size: clamp(14px, 1.4vw, 17px); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.spot.compact .spot-what { font-size: 13px; margin-bottom: 6px; }

/* order page: three-step progress */
.track { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 22px; counter-reset: s; }
.track li { flex: 1; counter-increment: s; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  border-top: 3px solid var(--hair); padding-top: 8px; }
.track li::before { content: counter(s) " · "; }
.track li.done { color: var(--ink); border-top-color: var(--accent); }
button.big { font-size: 18px; padding: 14px 26px; }

/* Terms of Use and Privacy Policy */
.legal { color: var(--muted); font-size: 15px; line-height: 1.65; }
.legal h2 { color: var(--ink); font-size: 20px; margin: 34px 0 10px; scroll-margin-top: 90px; }
.legal b { color: var(--ink); }
.legal ul { padding-left: 20px; } .legal li { margin: 6px 0; }
.legal .callout { border-left: 3px solid var(--accent); background: var(--surface); padding: 14px 16px; border-radius: 8px; }
.legal-toc { columns: 2; column-gap: 28px; font-size: 14px; padding-left: 20px; margin: 18px 0 8px; }
.legal-toc li { break-inside: avoid; margin: 3px 0; }
@media (max-width: 640px) { .legal-toc { columns: 1; } }

/* The exchange's own account shows the TEQHNE logo as its name */
h1.official-name { line-height: 0; margin-bottom: 14px; }
h1.official-name .official-logo { display: block; height: clamp(52px, 7vw, 76px); aspect-ratio: 1409 / 270; width: auto; max-width: 100%; }

/* Plugin maker application: one row per plugin */
.maker-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
@media (max-width: 640px) { .maker-row { grid-template-columns: 1fr 1fr; } .maker-row .field:first-child { grid-column: 1 / -1; } }

/* Messages, Account and Admin: solid buttons like Sell, with smaller words */
.nav ul.nav-side { gap: 10px; }
.nav ul a.nav-pill { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--ink); color: var(--void); font-size: 16px; font-weight: 600; line-height: 1; }
.nav ul a.nav-pill:hover, .nav ul a.nav-pill[aria-current] { filter: brightness(1.12); color: var(--void); }
.nav ul a.nav-pill .count { background: var(--void); color: var(--ink); }
@media (max-width: 640px) { .nav ul a.nav-pill { height: 32px; padding: 0 9px; font-size: 13px; border-radius: 8px; } .nav ul.nav-side { gap: 5px; flex-wrap: nowrap; } .nav .brand .brand-logo { height: 28px; } }

/* Phones: Admin moves from the top bar to a button on the account page, so Messages and Account fit beside the logo */
.admin-phone-link { display: none; }
@media (max-width: 640px) { .nav ul a.nav-admin { display: none; } .admin-phone-link { display: block; margin: 0 0 14px; } }

/* Plugin ads on the order / checkout page */
.order-spot { margin-top: 36px; }

/* Sign-up box on the home page (visitors who aren't signed in) */
.join { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; margin: 8px 0 34px; }
.join h2 { margin: 0 0 8px; }
.join .join-form .field:last-of-type { margin-bottom: 14px; }
@media (max-width: 760px) { .join { grid-template-columns: 1fr; gap: 10px; } }

/* Signed out: Create account (solid) next to Sign in (outlined), same height */
.nav ul a.nav-signin { height: 40px; min-height: 40px; }
@media (max-width: 640px) { .nav ul a.nav-signin { height: 32px; min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; } }
.nav ul a { white-space: nowrap; }
.lbl-short { display: none; }
@media (max-width: 640px) { .lbl-long { display: none; } .lbl-short { display: inline; } }

/* Sign in: solid light blue, the same colors as the search (magnifying glass) button */
.nav ul a.nav-signin { background: var(--btn2); color: var(--on-btn2); border: 0; font-weight: 600; }
.nav ul a.nav-signin:hover, .nav ul a.nav-signin[aria-current] { background: var(--btn2); color: var(--on-btn2); filter: brightness(1.1); }

/* ---------- installed app ---------- */
.tabbar { display: none; }
.app-install { margin: 0 0 22px; }
@media (display-mode: standalone) {
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; align-items: flex-start;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--nav-bg); border-top: 1px solid var(--hair); backdrop-filter: blur(8px); }
  .tabbar .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; text-decoration: none; color: var(--muted); font-size: 11px; }
  .tabbar .tab svg { width: 24px; height: 28px; padding: 2px 0; box-sizing: border-box; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar .tab[aria-current] { color: var(--ink); font-weight: 600; }
  .tabbar .tab-sell svg { width: 40px; height: 28px; padding: 4px 10px; box-sizing: border-box; border-radius: 9px; background: var(--ink); color: var(--void); stroke-width: 2.4; }
  .tabbar .tab-dot { position: absolute; top: -4px; right: 10px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--hold, #E2572B); color: #0E1626; font-size: 10px; line-height: 16px; text-align: center; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .nav { padding-top: env(safe-area-inset-top); }
  .nav ul.nav-main, .nav ul.nav-side { display: none; }   /* the tab bar does their job in the app */
  .nav .wrap { grid-template-areas: "brand"; grid-template-columns: 1fr; min-height: 56px; }
  .nav.is-home { display: none; }   /* home already shows the big logo */
  .app-install, .foot-app { display: none !important; }
}

/* Sign up: white like Sell, bold */
.nav ul a.nav-pill.nav-signup { font-weight: 700; }

.app-hero { display: flex; align-items: center; gap: 22px; margin-bottom: 8px; }
.app-hero h1 { margin: 0; }
.app-hero .eyebrow { margin-top: 0; }
.app-icon { width: 112px; height: 112px; flex: none; border-radius: 26px; box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px var(--hair); }
@media (max-width: 560px) { .app-hero { gap: 16px; } .app-icon { width: 84px; height: 84px; border-radius: 20px; } }

/* Get-the-app banner across the top of every page */
.appbar { background: var(--surface); border-bottom: 1px solid var(--hair); }
.appbar[hidden] { display: none; }
.appbar .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.appbar-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: 0 0 0 1px var(--hair); }
.appbar-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.appbar-txt b { font-weight: 600; color: var(--ink); font-size: 15px; }
.appbar-txt span { color: var(--muted); font-size: 13px; }
.appbar-get { flex: none; background: #E2572B; color: #fff; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.appbar-get:hover { filter: brightness(1.08); }
.appbar-x { flex: none; background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; padding: 4px 6px; cursor: pointer; }
.appbar-x:hover { color: var(--ink); }
@media (max-width: 420px) { .appbar-txt span { font-size: 12px; } .appbar-get { padding: 8px 13px; } }
@media (display-mode: standalone) { .appbar { display: none !important; } }

/* App card inside the home page sign-up box */
.join-app { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px; border: 1px solid var(--hair); border-radius: 14px; background: var(--void); }
.join-app-icon { width: 56px; height: 56px; border-radius: 13px; flex: none; box-shadow: 0 0 0 1px var(--hair); }
.join-app-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.join-app-txt b { color: var(--ink); font-weight: 600; font-size: 16px; }
.join-app-txt span { color: var(--muted); font-size: 13px; }
@media (max-width: 420px) { .join-app { flex-wrap: wrap; } .join-app .appbar-get { width: 100%; text-align: center; } }
@media (display-mode: standalone) { .join-app { display: none !important; } }

/* App square in the middle of the top bar (no words) */
.nav a.nav-app { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px var(--hair); transition: transform .15s; }
.nav a.nav-app img { width: 100%; height: 100%; display: block; }
.nav a.nav-app:hover { transform: scale(1.06); }
.nav.is-home > .wrap > a.nav-app { grid-area: main; justify-self: center; }
.nav:not(.is-home) ul.nav-side { justify-self: stretch; }
.nav ul.nav-side li.nav-app-li { margin: 0 auto; }
@media (max-width: 640px) { .nav a.nav-app, .nav ul.nav-side li.nav-app-li { display: none; } .nav:not(.is-home) ul.nav-side { justify-self: end; } }
@media (display-mode: standalone) { .nav a.nav-app, .nav ul.nav-side li.nav-app-li { display: none !important; } }

/* Footer: logo twice the size, everything else spread evenly across */
.foot-brand .foot-logo { height: 60px; }
footer .wrap { justify-content: space-between; gap: 16px 14px; }
@media (max-width: 1100px) { footer .wrap { justify-content: center; gap: 14px 26px; } .foot-brand { flex-basis: 100%; justify-content: center; margin-bottom: 6px; } }

/* Search + Sell close together (same gap as Sign up / Sign in); app T icon just left of Sign up */
.nav ul.nav-main { gap: 10px; }
.nav:not(.is-home) ul.nav-side { justify-self: end; }
.nav ul.nav-side li.nav-app-li { margin: 0; }
@media (max-width: 640px) {
  .nav ul.nav-main, .nav.is-home ul.nav-main { gap: 6px; }
  .nav ul.nav-side li.nav-app-li { display: flex; }
  .nav a.nav-app { display: inline-flex; width: 32px; height: 32px; border-radius: 8px; }
  .nav.is-home ul a.nav-browse, .nav.is-home ul a.nav-sell { width: clamp(60px, calc((100vw - 230px) / 2), 84px); }
}
@media (max-width: 379px) { .nav:not(.is-home) ul.nav-side li.nav-app-li { display: none; } }
@media (max-width: 339px) { .nav ul.nav-side li.nav-app-li { display: none; } }
@media (max-width: 640px) { .nav.is-in ul.nav-side li.nav-app-li { display: none; } }

/* Home page: big centered TEQHNE logo above everything so it pops */
.fre-mark.home-mark { justify-content: center; margin: clamp(14px, 3vw, 34px) auto clamp(36px, 4vw, 48px); }
.fre-mark.home-mark .fre-word { height: auto; width: min(100%, 880px); }

/* Phones: the T app icon sits centered in the space before Sign up */
@media (max-width: 640px) {
  .nav .wrap { grid-template-columns: auto 1fr; }
  .nav ul.nav-side, .nav:not(.is-home) ul.nav-side { justify-self: stretch; }
  .nav ul.nav-side li.nav-app-li { margin: 0 auto; }
  .nav.is-in ul.nav-side li:nth-child(2) { margin-left: auto; }
  .nav .wrap, .nav.is-home .wrap { column-gap: 5px; }   /* same as the gap after the T, so it sits dead center */
}

/* Footer: app T icon with the Get the app link */
footer a.foot-app-link { display: inline-flex; align-items: center; gap: 9px; }
footer a.foot-app-link img { width: 32px; height: 32px; border-radius: 8px; flex: none; box-shadow: 0 0 0 1px var(--hair); }
@media (display-mode: standalone) { footer a.foot-app-link { display: none !important; } }

/* Inner pages: bigger TEQHNE logo in the top bar */
.nav .brand .brand-logo { height: 56px; }
@media (max-width: 640px) { .nav .brand .brand-logo { height: 34px; } }
/* Only one app T at a time: while the app banner is showing, hide the T next to Sign up */
.has-appbar .nav ul.nav-side li.nav-app-li { display: none !important; }

/* Phones: no T in the top bar (the app card / banner already offer the app) */
@media (max-width: 640px) { .nav ul.nav-side li.nav-app-li { display: none !important; } .nav ul.nav-side li:first-child + li { margin-left: auto; } }

/* Home logo one quarter smaller */
.fre-mark.home-mark .fre-word { width: min(75%, 660px); }

/* Sign-in code box */
.code-form { max-width: 420px; margin: 0 0 22px; }
.code-input { font-size: 28px; letter-spacing: .3em; text-align: center; font-family: var(--f-mono, monospace); }

/* Inside the TEQHNE iPhone/Android app (marked by the app's user agent): same as the installed web app */
html.is-app .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; align-items: flex-start;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--nav-bg); border-top: 1px solid var(--hair); backdrop-filter: blur(8px); }
html.is-app .tabbar .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; text-decoration: none; color: var(--muted); font-size: 11px; }
html.is-app .tabbar .tab svg { width: 24px; height: 28px; padding: 2px 0; box-sizing: border-box; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.is-app .tabbar .tab[aria-current] { color: var(--ink); font-weight: 600; }
html.is-app .tabbar .tab-sell svg { width: 40px; height: 28px; padding: 4px 10px; box-sizing: border-box; border-radius: 9px; background: var(--ink); color: var(--void); stroke-width: 2.4; }
html.is-app .tabbar .tab-dot { position: absolute; top: -4px; right: 10px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--hold, #E2572B); color: #0E1626; font-size: 10px; line-height: 16px; text-align: center; }
html.is-app body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
html.is-app .nav { padding-top: env(safe-area-inset-top); }
html.is-app .nav ul.nav-main, html.is-app .nav ul.nav-side { display: none; }
html.is-app .nav .wrap { grid-template-areas: "brand"; grid-template-columns: 1fr; min-height: 56px; }
html.is-app .nav.is-home { display: none; }
html.is-app .app-install, html.is-app .foot-app { display: none !important; }
html.is-app .appbar { display: none !important; }
html.is-app .join-app { display: none !important; }
html.is-app .nav a.nav-app, html.is-app .nav ul.nav-side li.nav-app-li { display: none !important; }
html.is-app footer a.foot-app-link { display: none !important; }
html.is-app body:has(.nav.is-home) { padding-top: env(safe-area-inset-top); }
@media (display-mode: standalone) { body:has(.nav.is-home) { padding-top: env(safe-area-inset-top); } }

/* "?" help that opens in place (What's a plugin? / Where do I find my license?) */
details.qhelp { margin: 10px 0 18px; max-width: 640px; }
details.qhelp > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 500; font-size: 15px; }
details.qhelp > summary::-webkit-details-marker { display: none; }
details.qhelp .q { width: 24px; height: 24px; border-radius: 50%; background: var(--btn2); color: var(--on-btn2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
details.qhelp[open] > summary { margin-bottom: 8px; }
details.qhelp > p { margin: 0 0 8px 33px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.qtypes { display: flex; flex-wrap: wrap; gap: 6px; }
.qtypes span { border: 1px solid var(--hair); border-radius: 999px; padding: 3px 10px; font-size: 13px; color: var(--ink); }
details.license-help { margin: 0 0 20px; }
.help-steps { padding-left: 22px; max-width: 680px; }
.help-steps li { margin-bottom: 18px; }
.help-steps li p { margin: 4px 0 0; color: var(--muted); line-height: 1.55; }

/* Home: small line under "Plugins, resold." */
.hero-sub { font-size: clamp(18px, 2.2vw, 23px); font-weight: 500; color: var(--ink); opacity: .9; margin: -6px 0 18px; line-height: 1.35; }

/* Share TEQHNE */
.share-box { margin: 22px 0; max-width: 640px; }
.share-box h2 { margin-top: 0; }
.share-box .row { gap: 10px; flex-wrap: wrap; align-items: center; }
.share-link { flex: 1; min-width: 220px; font-size: 14px; }

/* Language dropdown */
.lang-pick { display: inline-flex; align-items: center; margin: 0; }
.lang-pick label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hair); border-radius: 999px; padding: 4px 10px 4px 12px; cursor: pointer; }
.lang-pick select { background: transparent; border: 0; color: var(--muted); font: inherit; font-size: 13px; letter-spacing: .04em; padding: 2px 2px; min-height: 0; width: auto; cursor: pointer; }
.lang-pick select option { color: #111; }
.lang-globe { font-size: 14px; line-height: 1; filter: grayscale(1) brightness(1.4); }
.lang-pick .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-pickers { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.hero-pickers > * { margin: 0 !important; }
/* Grow with us */
.grow-box { margin: 34px 0 10px; }
.grow-box h2 { margin-top: 0; }
.grow-box .row { gap: 10px; flex-wrap: wrap; }
/* Japanese: let lines break naturally */
html[lang="ja"] .hero-title, html[lang="ja"] .hero-sub { word-break: keep-all; overflow-wrap: anywhere; }

/* Longer words in other languages: keep the top bar inside the screen on phones */
@media (max-width: 640px) {
  html[lang="de"] .nav ul a.nav-sell, html[lang="es"] .nav ul a.nav-sell, html[lang="pt"] .nav ul a.nav-sell, html[lang="nl"] .nav ul a.nav-sell { font-size: 15px; letter-spacing: -.01em; }
  html:not([lang="en"]) .nav ul a.nav-pill { padding-left: 9px; padding-right: 9px; }
  .hero-title { overflow-wrap: anywhere; }
}
@media (max-width: 380px) { html:not([lang="en"]) .nav .brand .brand-logo { height: 28px; } }
@media (min-width: 641px) { html:not([lang="en"]):not([lang="ja"]) .nav ul a.nav-sell { width: auto; min-width: 104px; padding: 0 18px; } }

/* Start here: simple questions */
.start-link { margin: -4px 0 14px; }
.start-link a { color: var(--btn2); font-weight: 600; text-decoration: none; }
.start-link a:hover { text-decoration: underline; }
.start-card { max-width: 640px; }
.start-q { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 18px; }
.start-opts { display: grid; gap: 10px; }
.start-opt { display: block; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 12px; background: var(--void); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; }
.start-opt:hover { border-color: var(--btn2); }
.start-opt::after { content: '→'; float: right; color: var(--btn2); }
.start-a { color: var(--ink); line-height: 1.6; margin-bottom: 18px; }
.start-steps ol { padding-left: 22px; margin: 8px 0 0; }
.start-steps li { margin-bottom: 8px; }
.start-card .row { gap: 10px; flex-wrap: wrap; }

/* Suggest a correction */
.fix-search { width: 100%; margin: 6px 0 16px; }
.fix-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fix-list li { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.fix-text { margin: 0 0 4px; color: var(--ink); }
.fix-en { margin: 0 0 6px; color: var(--faint); font-size: 13px; }
.fix-list summary { cursor: pointer; color: var(--btn2); font-weight: 600; font-size: 14px; }
.fix-list form { display: grid; gap: 8px; margin-top: 10px; }
.fix-list textarea { width: 100%; }

/* TEQHNE hero art (orange-to-blue loop). Its cut-out shapes take the page colour, so it sits cleanly on every theme. */
.tq-art { width: 100%; max-width: 560px; aspect-ratio: 3400 / 1760; justify-self: center; --tq-art-bg: var(--void); }
.tq-art svg { width: 100%; height: 100%; display: block; }
/* Bigger loop on the home page: give the art more of the row on desktop */
@media (min-width: 861px) { .hero:has(.tq-art) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.hero > .tq-art { max-width: 700px; }