/* The current app's cream, sage and gold surfaces, with tactile relief. */
:root { --sage: #536946; --sage-soft: #eff2e6; --cream: #f5f0e2; --ledge: #d8d6c7; }
[data-theme="dark"] { --sage: #b3c69b; --sage-soft: #2b3328; --cream: #302d24; --ledge: #424338; }
.brand img { border-radius: 11px; box-shadow: 0 3px 0 var(--ledge); }
.button-primary { border-radius: 15px; box-shadow: 0 5px 0 #aa9046, 0 12px 20px #a0872920, inset 0 1px 0 #fff9; }
.button-primary:hover { box-shadow: 0 7px 0 #aa9046, 0 16px 25px #a0872920; }
.button-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #aa9046; }
.button-secondary { box-shadow: 0 4px 0 var(--border); border-radius: 15px; }
.nav-download { box-shadow: 0 3px 0 #aa9046; }
.feature-card { box-shadow: 0 6px 0 var(--ledge), 0 12px 25px #25292205; border-radius: 24px; }
.feature-icon { width: 52px; height: 52px; border-radius: 17px; box-shadow: 3px 6px 0 var(--ledge), inset 0 2px 0 #fff9; transform: rotate(-6deg); }
.feature-card:nth-child(3) .feature-icon { background: var(--sage-soft); color: var(--sage); }
.network-card, .review-card, .stat-card, .extra-card { box-shadow: 0 5px 0 color-mix(in srgb, var(--ledge) 65%, var(--surface)); border-radius: 21px; }
.hero { padding-top: 45px; }
.hero-grid { grid-template-columns: 1fr 1.05fr; gap: 38px; }
.hero h1 { font-size: clamp(43px, 4.55vw, 66px); letter-spacing: -.065em; }
.hero-copy > .eyebrow { border: 0; background: transparent; padding: 0; letter-spacing: 1.7px; font-size: 10px; }
.hero-copy > .eyebrow::before { width: 20px; height: 1px; box-shadow: none; border-radius: 0; }
.hero-description { max-width: 430px; }
.hero-buttons { gap: 14px; }
.hero-proof { margin-top: 26px; padding-top: 22px; }
.hero-proof img { width: 31px; height: auto; border: 2px solid var(--surface); border-radius: 6px; box-shadow: 0 3px 8px #0002; }
.hero-proof .proof-screens { display: flex; align-items: center; padding: 0 8px; }
.proof-screens img:nth-child(1) { rotate: -9deg; }.proof-screens img:nth-child(2) { rotate: 7deg; margin-left: -4px; }
.hero-proof .text-link { font-size: 11px; margin-top: 4px; }

/* Physical medal geometry is drawn by coin-3d.js. This stage is also its fallback. */
.coin-scene { position: relative; background: radial-gradient(ellipse at 50% 33%, #fffbef, #f3eddd); border-radius: 36px; border: 1px solid #e8dfc9; isolation: isolate; overflow: hidden; }
[data-theme="dark"] .coin-scene { background: radial-gradient(ellipse at 50% 33%, #403926, #242622); border-color: #454235; }
.hero-coin { min-height: 565px; width: 100%; }
.coin-scene::before { content: ''; position: absolute; width: 340px; height: 340px; border: 1px solid #b99a4040; border-radius: 50%; top: 48px; left: calc(50% - 170px); transform: rotateX(28deg) rotateZ(-20deg); z-index: -1; }
.coin-scene::after { content: ''; position: absolute; width: 285px; height: 285px; border: 1px dashed #b99a4025; border-radius: 50%; top: 80px; left: calc(50% - 142px); z-index: -1; }
.coin-scene-heading { position: absolute; top: 28px; left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: 2px; color: var(--gold-dark); }
.coin-interaction { position: relative; width: min(390px, 100%); height: 380px; margin: 45px auto 0; cursor: grab; touch-action: pan-y; z-index: 2; border-radius: 30px; }
.coin-interaction:active { cursor: grabbing; }
.coin-interaction canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.webgl-ready canvas { opacity: 1; }
.coin-fallback { position: absolute; width: 66%; height: auto; top: 10%; left: 17%; transform: perspective(600px) rotateY(-24deg) rotateZ(-8deg); filter: drop-shadow(8px 5px 0 #a48233); }
.webgl-ready .coin-fallback { visibility: hidden; }
.coin-pedestal { position: absolute; width: 235px; height: 59px; background: linear-gradient(180deg,#fbf5e3,#dbce9e); border: 1px solid #c6b470; border-radius: 50%; left: calc(50% - 117px); top: 360px; box-shadow: 0 8px 0 #b3a471, 0 13px 0 #d8c99b, 0 28px 35px #7f713525, inset 0 0 0 7px #efe6c8, inset 0 0 0 9px #c9b876; }
.coin-pedestal::before { content: ''; position: absolute; inset: 7px 34px; border-radius: 50%; background: #75632955; filter: blur(10px); }
.coin-controls { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 3; margin-top: 17px; }
.coin-controls button { font-size: 11px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--border)); border-radius: 100px; min-height: 35px; padding: 7px 15px; color: var(--gold-dark); }
.coin-controls button:hover { background: var(--surface); }
.coin-hint { position: relative; text-align: center; font-size: 10px; color: var(--text-muted); margin-top: 12px; }
.coin-scene:not(.webgl-ready) .coin-controls { display: none; }
.coin-scene:not(.webgl-ready) .coin-hint { visibility: hidden; }
.coin-scene .motion-toggle { position: absolute; bottom: 13px; left: 20px; font-size: 9px; }
.coin-edition { position: absolute; right: 23px; bottom: 23px; color: var(--gold-dark); font-size: 8px; letter-spacing: 1.2px; }
.collection-coin { min-height: 370px; border: 0; border-radius: 0; align-self: stretch; }
.collection-coin .coin-scene-heading { display: none; }
.collection-coin .coin-interaction { width: 270px; height: 270px; margin-top: 5px; }
.collection-coin .coin-pedestal { width: 180px; height: 44px; left: calc(50% - 90px); top: 238px; }
.collection-coin .coin-controls { margin-top: 10px; }.collection-coin .coin-hint { margin-top: 7px; }
.collection-coin::before { width: 255px; height: 255px; left: calc(50% - 127px); top: 15px; }
.collection-coin::after { width: 205px; height: 205px; left: calc(50% - 102px); top: 35px; }
.collection-copy { padding-left: 28px; }

/* The souvenir note shares the medal controls, with a lighter paper setting. */
.collection-ticket { background: radial-gradient(ellipse at 50% 35%, #f8f3fc, #eae2f0); }
[data-theme="dark"] .collection-ticket { background: radial-gradient(ellipse at 50% 35%, #3c3049, #27232e); }
.collection-ticket::before, .collection-ticket::after { border-color: #9475ad35; }
.collection-ticket .coin-scene-heading { display: block; color: var(--violet-light); top: 23px; font-size: 8px; }
.collection-ticket .coin-interaction { width: min(420px, 100%); height: 270px; margin-top: 5px; }
.collection-ticket .coin-fallback { width: 76%; left: 12%; top: 27%; filter: drop-shadow(1px 2px 0 #a892bd); transform: perspective(650px) rotateY(-20deg) rotateZ(-7deg); }
.collection-ticket .coin-controls button { color: var(--violet-light); border-color: #9475ad50; }
.collection-ticket .coin-controls button:focus-visible { outline-color: var(--violet-light); }
.ticket-shadow { position: absolute; width: 210px; height: 20px; top: 238px; left: calc(50% - 105px); border-radius: 50%; background: #7a558e28; filter: blur(10px); pointer-events: none; }

/* Eight new app screens, with a stable, fully proportioned phone frame. */
.preview-section { background: var(--sage-soft); border-color: color-mix(in srgb,var(--sage) 20%,var(--border)); }
.preview-section::before { box-shadow: 0 0 0 60px #bcb18b08, 0 0 0 120px #bcb18b06; }
.preview-heading { max-width: 650px; }
.preview-heading h2 { font-size: clamp(32px,3.4vw,46px); }
.preview-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: min(770px,100%); padding: 7px; margin-bottom: 37px; background: color-mix(in srgb,var(--surface) 65%,transparent); border: 1px solid var(--border); border-radius: 18px; }
.preview-tab { justify-content: center; padding: 12px 10px; min-height: 43px; font-size: 12px; white-space: nowrap; }
.preview-tab[aria-selected="true"] { color: var(--gold-dark); background: var(--surface); box-shadow: 0 3px 0 var(--ledge); border-radius: 11px; }
.preview-panel { max-width: 850px; gap: 65px; grid-template-columns: 320px 1fr; }
.preview-image { width: 250px; padding: 0; border: 5px solid #343838; border-radius: 30px; background: #f8f9fa; box-shadow: 6px 10px 0 #a8a99650, 0 30px 45px #36372012; }
.preview-image img { width: 100%; height: auto; border-radius: 23px; }
.preview-copy h3 { font-size: 32px; font-weight: 600; }
.preview-index { background: var(--surface); color: var(--sage); border: 1px solid var(--border); }
.screen-features { list-style: none; padding: 0; margin: 25px 0; display: grid; gap: 12px; }
.screen-features li { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 12px; }
.screen-features li::before { content: '✓'; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: var(--surface); color: var(--sage); box-shadow: 0 2px 0 var(--ledge); }
.gallery-count { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 13px; font-size: 11px; color: var(--text-muted); }
.gallery-count::before, .gallery-count::after { content: ''; width: 30px; height: 1px; background: var(--border); }
.story-visual { background: linear-gradient(145deg,var(--cream),var(--sage-soft)); }
.story-visual > img { width: 211px; box-shadow: 4px 8px 0 #a8a99650, 0 15px 30px #36372012; transform: rotate(-4deg); }
.map-label { color: var(--sage); box-shadow: 0 4px 0 var(--ledge); }
.download-panel { background: #262b25; box-shadow: 0 7px 0 #434b3d; }
.collections-shell { box-shadow: 0 6px 0 var(--ledge); }
.image-dialog { width: min(490px,calc(100% - 24px)); }
.image-dialog img { object-fit: contain; width: auto; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) { .hero-grid { gap: 25px; }.hero-coin { min-height: 540px; }.coin-interaction { height: 360px; }.coin-pedestal { top: 350px; }.coin-edition { font-size: 7px; }.preview-panel { max-width: 760px; gap: 40px; } }
@media (max-width: 900px) { .hero h1 { font-size: 49px; }.hero-coin { min-height: 510px; }.coin-interaction { height: 320px; margin-top: 54px; }.coin-pedestal { width: 200px; left: calc(50% - 100px); top: 318px; }.coin-scene-heading { font-size: 8px; }.collection-coin .coin-pedestal { width: 180px; left: calc(50% - 90px); top: 238px; }.collection-copy { padding: 28px; }.preview-tab { font-size: 11px; }.preview-panel { grid-template-columns: 280px 1fr; gap: 25px; } }
@media (max-width: 700px) {
 .hero { padding-top: 33px; }.hero-grid { grid-template-columns: 1fr; gap: 30px; }.hero h1 { font-size: clamp(42px,10.6vw,62px); }.hero h1 br { display: block; }.hero-copy>.eyebrow { font-size: 9px; line-height: 1.6; }
 .hero-coin { width: min(460px,100%); justify-self: center; min-height: 490px; border-radius: 29px; }.hero-coin .coin-interaction { height: 310px; margin-top: 44px; }.hero-coin .coin-pedestal { top: 307px; }.hero-coin .coin-controls { margin-top: 24px; }.coin-scene::before { width: 285px; height: 285px; left: calc(50% - 142px); }.coin-scene::after { width: 245px; height: 245px; left: calc(50% - 122px); }
 .coin-edition { font-size: 7px; bottom: 21px; }.hero-coin .motion-toggle { font-size: 8px; bottom: 13px; left: 14px; }.coin-controls button { min-height: 39px; }.coin-hint { font-size: 9px; }
 .collection-coin { min-height: 364px; border-radius: 0; }.collection-coin .coin-interaction { height: 260px; margin-top: 8px; }.collection-coin .coin-pedestal { top: 232px; }.collection-copy { padding: 24px; }
 .preview-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; padding: 6px; margin-bottom: 28px; }.preview-tab { flex-direction: column; gap: 6px; font-size: 9px; padding: 9px 2px; min-height: 57px; }.preview-tab .icon { width: 18px; height: 18px; }
 .preview-panel { grid-template-columns: 1fr; gap: 25px; }.preview-copy { grid-row: 1; max-width: 380px; }.preview-copy h3 { font-size: 27px; }.preview-copy p { font-size: 13px; }.screen-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 12px; margin: 18px 0; }.screen-features li { font-size: 10px; gap: 5px; }.screen-features li::before { width: 17px; height: 17px; font-size: 9px; border-radius: 5px; }
 .preview-image { width: 236px; }.gallery-count { margin-top: 25px; }.story-visual > img { width: 204px; }.feature-icon { width: 47px; height: 47px; }.hero-proof { max-width: none; }
}
@media (max-width:370px) { .hero h1 { font-size: 41px; }.hero-coin { min-height: 455px; }.hero-coin .coin-interaction { height: 285px; }.hero-coin .coin-pedestal { top: 280px; width: 180px; left: calc(50% - 90px); }.hero-coin .coin-controls { margin-top: 20px; }.coin-scene-heading { font-size: 7px; letter-spacing: 1.4px; }.coin-edition { right: 13px; font-size: 6px; }.preview-tab { font-size: 8px; }.preview-image { width: 223px; } }