/* ReceiptNest shared stylesheet: home and privacy pages. */
/* Design tokens */
:root {
  --background: #1e6941;
  --surface: #3b9b68;
  --text: #fbfbfb;
  --muted-text: #c6ddd0;
  --primary: #e2f471;
  --secondary: #9aea86;
  --accent: #5af6a3;
  --button-text: #15151b;
  --font-display: 'Syncopate', sans-serif;
  --font-body: 'Saira', sans-serif;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;
  --radius-sm: .5rem; --radius-md: .75rem; --radius-lg: 1.5rem;
  --shadow-low: 0 .3rem .8rem color-mix(in srgb, var(--background) 28%, transparent), 0 .1rem .15rem color-mix(in srgb, var(--primary) 9%, transparent);
  --shadow-mid: 0 1rem 2.5rem color-mix(in srgb, var(--background) 45%, transparent), 0 .25rem .75rem color-mix(in srgb, var(--accent) 10%, transparent);
  --shadow-high: 0 2rem 5rem color-mix(in srgb, var(--background) 60%, transparent), 0 .5rem 1rem color-mix(in srgb, var(--primary) 14%, transparent);
  --hairline: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  --ease: cubic-bezier(.2,.8,.2,1);
  --speed: 210ms;
  --z-header: 10;
  --z-top: 20;
}
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, .55vw + 11px, 22px); overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--background); color: var(--text); }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: var(--button-text); background: var(--accent); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
/* Base typography */
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -.065em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 3.5rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.55rem); line-height: 1.35; font-weight: 600; letter-spacing: -.035em; }
p { text-wrap: pretty; margin-bottom: 1.15em; }
/* Layout and container */
.container { width: min(100% - 40px, 1360px); margin-inline: auto; }
body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(135deg, transparent 0, transparent 55px, color-mix(in srgb,var(--text) 2%, transparent) 56px, transparent 57px); pointer-events: none; z-index: 0; }
main, .footer, .site-header { position: relative; }
/* Components */
.skip { position: fixed; z-index: 30; top: -5rem; left: 1rem; background: var(--primary); color: var(--button-text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip:focus { top: 1rem; }
.site-header { z-index: var(--z-header); height: 76px; display: flex; align-items: center; width: 100%; padding-inline: 20px; }
.header-pill { width: min(100%, 1360px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: color-mix(in srgb, var(--background) 80%, var(--surface)); border: var(--hairline); border-radius: 100px; padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-mid); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.brand { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.brand__chip { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--text); padding: .15rem; }
.brand__chip img { display: block; width: 38px; height: 38px; object-fit: contain; }
.brand__name { font-family: var(--font-display); letter-spacing: -.055em; font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket { min-height: 48px; padding: .75rem 1.6rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; background: var(--primary); color: var(--button-text); font-weight: 600; letter-spacing: -.02em; clip-path: polygon(0 0, 43% 0, 46% 7%, 49% 0, 100% 0, 100% 100%, 49% 100%, 46% 93%, 43% 100%, 0 100%); transition: transform var(--speed) var(--ease), background var(--speed) var(--ease); }
.ticket:hover { background: var(--secondary); transform: translateY(-3px); }
.ticket--small { min-height: 48px; padding: .6rem 1.15rem; font-size: .9rem; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.eyebrow__line { display: inline-block; width: 3rem; height: 1px; background: currentColor; }
.back-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: var(--z-top); border: var(--hairline); border-radius: var(--radius-md); background: var(--primary); color: var(--button-text); width: 48px; height: 48px; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--speed), transform var(--speed); }
.back-top--visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
/* Page sections */
.hero-shell { height: 100vh; height: 100svh; height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); position: relative; background: radial-gradient(ellipse at 80% 8%, color-mix(in srgb,var(--secondary) 16%,transparent), transparent 52%), var(--background); }
.hero-shell .hero { min-height: 0; }
.hero { --hs: 1; display: grid; place-items: center; position: relative; isolation: isolate; padding: calc(var(--hs) * min(2.2svh, 28px)) 20px; }
.hero__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 1px); background-size: 3.5rem 3.5rem; mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.hero__wall { position: absolute; width: min(92%, 1050px); height: 78%; inset: 11% 4% auto; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); gap: min(2svh,1rem); transform: perspective(900px) rotateX(9deg) rotateY(-8deg); opacity: .52; pointer-events: none; }
.hero__wall span { border: var(--hairline); background: linear-gradient(125deg,color-mix(in srgb,var(--surface) 55%,transparent),color-mix(in srgb,var(--background) 40%,transparent)); border-radius: var(--radius-md); box-shadow: var(--shadow-low); padding: var(--space-4); font-size: .84rem; letter-spacing: .08em; color: var(--muted-text); }
.hero__wall span:nth-child(2n) { transform: rotate(5deg); }
.hero__wall span:nth-child(3n) { transform: rotate(-5deg); }
.hero__visual { position: absolute; z-index: 1; width: calc(var(--hs) * min(37svh, 32vw, 380px)); height: calc(var(--hs) * min(37svh, 32vw, 380px)); max-height: 48svh; aspect-ratio: 1; left: 50%; top: 44%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 20% 20%, color-mix(in srgb,var(--accent) 25%,transparent), transparent 65%); filter: drop-shadow(0 20px 35px color-mix(in srgb,var(--background) 65%,transparent)); opacity: .9; pointer-events: none; }
.orbit { position: absolute; inset: 7%; border: 1px solid color-mix(in srgb,var(--primary) 72%,transparent); border-radius: 50%; transform: rotate(-28deg) scaleY(.45); box-shadow: inset 0 0 18px color-mix(in srgb,var(--accent) 18%,transparent); }
.orbit--middle { inset: 20%; transform: rotate(52deg) scaleY(.66); border-color: var(--accent); }
.orbit--inner { inset: 31%; transform: rotate(115deg) scaleY(.8); border-width: 2px; }
.orbit__core { position: absolute; inset: 39%; border-radius: 50%; background: radial-gradient(circle at 34% 30%,var(--primary),var(--surface) 70%); box-shadow: 0 0 30px color-mix(in srgb,var(--accent) 55%,transparent); animation: breathe 7s ease-in-out infinite; }
.orbit__planet { position: absolute; border-radius: 50%; background: var(--primary); box-shadow: var(--shadow-low); }
.orbit__planet--a { width: 9%; height: 9%; left: 12%; top: 43%; }
.orbit__planet--b { width: 6%; height: 6%; right: 24%; top: 15%; background: var(--accent); }
.orbit__planet--c { width: 5%; height: 5%; right: 13%; bottom: 25%; background: var(--secondary); }
.hero__center { position: relative; z-index: 2; text-align: center; width: min(100%, 1100px); min-height: 0; max-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--hs) * min(2.5svh, 25px)); padding: calc(var(--hs) * min(3svh, 28px)); background: linear-gradient(135deg,color-mix(in srgb,var(--background) 92%,transparent),color-mix(in srgb,var(--surface) 55%,transparent)); border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-high); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.hero__center::before,.hero__center::after { content: ''; position: absolute; width: 3rem; height: 2px; background: var(--primary); top: var(--space-3); left: var(--space-3); }
.hero__center::after { top: auto; left: auto; bottom: var(--space-3); right: var(--space-3); }
.hero__kicker { color: var(--primary); font-size: calc(var(--hs) * clamp(12px, min(1.6vw,2.2svh), 20px)); letter-spacing: .13em; }
.hero__center h1 { margin: 0; max-width: 100%; overflow-wrap: anywhere; font-size: calc(var(--hs) * clamp(32px, min(7.5vw,10svh), 132px)); line-height: 1.13; letter-spacing: -.09em; }
.hero__center p { max-width: 34ch; margin: 0; color: var(--muted-text); font-size: calc(var(--hs) * clamp(16px,min(2.2vw,2.9svh),26px)); line-height: 1.4; }
.hero__side { position: absolute; right: 1rem; bottom: 1rem; font-size: .82rem; letter-spacing: .12em; color: var(--muted-text); writing-mode: vertical-rl; }
.hero--compact .hero__side { display: none; }
.detail-section { position: relative; padding: clamp(64px,10vw,128px) 0; min-height: 75svh; border-top: var(--hairline); }
.detail-section:nth-of-type(2n) { background: color-mix(in srgb,var(--surface) 29%,var(--background)); }
.detail-section:nth-of-type(3n) { background: color-mix(in srgb,var(--primary) 8%,var(--background)); }
.section-heading { max-width: 1000px; margin-bottom: var(--space-7); }
.section-heading h2 { max-width: 22ch; margin: var(--space-4) 0 var(--space-5); }
.section-heading p { max-width: 75ch; color: var(--muted-text); font-size: 1.1rem; }
.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); }
.feature-card { border: var(--hairline); border-radius: var(--radius-md); padding: var(--space-6); background: linear-gradient(125deg,color-mix(in srgb,var(--surface) 55%,transparent),color-mix(in srgb,var(--background) 72%,transparent)); box-shadow: var(--shadow-low); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-mid); }
.feature-card__index { display: block; margin-bottom: var(--space-5); color: var(--primary); font-size: .84rem; letter-spacing: .08em; }
.feature-card h3 { margin-bottom: var(--space-3); }
.feature-card p { color: var(--muted-text); margin-bottom: 0; }
.feature-grid--1 .feature-card:first-child,.feature-grid--2 .feature-card:first-child,.feature-grid--6 .feature-card:first-child { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: color-mix(in srgb,var(--surface) 65%,var(--background)); }
.feature-grid--2,.feature-grid--6 { grid-template-columns: 1.25fr 1fr 1fr; }
.feature-grid--2 .feature-card:first-child,.feature-grid--6 .feature-card:first-child { grid-row: span 2; }
.feature-grid--3 { position: relative; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-3); }
.feature-grid--3 .feature-card { padding: var(--space-5); }
.feature-grid--4 { grid-template-columns: 1fr 1fr; padding-left: min(22%,260px); }
.feature-grid--5 { grid-template-columns: 1fr 1fr; }
.feature-grid--5 .feature-card:nth-child(2n) { transform: translateY(var(--space-5)); }
.about-overlap { display: flex; align-items: end; gap: var(--space-5); margin-bottom: var(--space-6); }
.about-overlap__statement { font-family: var(--font-display); font-size: clamp(2.5rem,7vw,7rem); line-height: 1.05; letter-spacing: -.08em; color: var(--primary); }
.about-overlap__note { border: var(--hairline); background: var(--surface); padding: var(--space-5); border-radius: var(--radius-md); margin-left: -3rem; max-width: 19rem; box-shadow: var(--shadow-mid); }
.route-line { width: 100%; max-height: 160px; color: var(--primary); margin-bottom: var(--space-4); }
.shield-art { position: absolute; left: 3%; width: min(20%,250px); color: var(--primary); opacity: .76; }
.detail-section--4 { overflow: clip; }
.closing { background: var(--secondary); color: var(--button-text); padding: clamp(64px,10vw,128px) 0; }
.closing__inner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-7); }
.closing h2 { max-width: 22ch; }
.closing p { max-width: 63ch; margin-bottom: 0; }
.closing .eyebrow { color: var(--background); }
.closing .ticket { background: var(--background); color: var(--text); }
.closing .ticket:hover { background: var(--surface); }
.footer { padding: var(--space-8) 0 var(--space-6); background: color-mix(in srgb,var(--background) 74%,var(--surface)); border-top: var(--hairline); }
.footer__inner { display: flex; align-items: start; justify-content: space-between; gap: var(--space-6); }
.footer__brand { display: flex; align-items: center; gap: var(--space-4); }
.footer__brand img { border-radius: var(--radius-sm); width: 50px; height: 50px; }
.footer__brand strong, .footer__brand span, .footer__right span { display: block; }
.footer__brand strong { font-family: var(--font-display); font-size: 1rem; }
.footer__brand span,.footer__right { color: var(--muted-text); font-size: .9rem; }
.footer__right { display: grid; gap: var(--space-1); text-align: right; }
.footer__right a { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; }
.privacy-title { padding: var(--space-8) 0; background: var(--surface); border-top: var(--hairline); border-bottom: var(--hairline); }
.privacy-title__inner { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); }
.privacy-title h1 { font-size: clamp(2.3rem,5.5vw,5.5rem); margin: var(--space-3) 0 0; }
.privacy-title__name { color: var(--primary); font-family: var(--font-display); font-size: 1rem; }
.policy-column { width: min(calc(100% - 40px),760px); margin-inline: auto; padding-bottom: var(--space-8); }
.policy-band { display: grid; grid-template-columns: 95px minmax(0,1fr); gap: var(--space-5); padding: var(--space-7) var(--space-5); border-bottom: var(--hairline); border-left: 3px solid var(--primary); }
.policy-band--2 { background: color-mix(in srgb,var(--surface) 27%,var(--background)); }
.policy-band--3 { background: color-mix(in srgb,var(--secondary) 8%,var(--background)); }
.policy-band__side { font-size: .82rem; letter-spacing: .08em; color: var(--primary); writing-mode: vertical-rl; }
.policy-band__copy h2 { font-family: var(--font-body); font-size: clamp(1.2rem,2vw,1.5rem); letter-spacing: -.03em; line-height: 1.4; margin-bottom: var(--space-5); }
.policy-band__copy p { color: var(--text); margin-bottom: var(--space-4); }
.policy-band__copy p:last-child { margin-bottom: 0; }
.policy-band:nth-child(4n)::after { content: ''; grid-column: 1/-1; background: repeating-linear-gradient(120deg,var(--primary) 0,var(--primary) 3px,transparent 3px,transparent 12px); height: 5px; opacity: .5; }
/* Utilities */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 650ms var(--ease),transform 650ms var(--ease); }
.feature-card.reveal:nth-child(2n) { transition-delay: 80ms; }
.feature-card.reveal:nth-child(3n) { transition-delay: 130ms; }
/* Responsive rules */
@media (min-width:768px) { .container { width: min(100% - 64px,1360px); } .site-header { padding-inline:32px; } }
@media (min-width:1280px) { .container { width: min(100% - 96px,1360px); } .site-header { padding-inline:48px; } }
@media (max-width:1023px) { .feature-grid--2,.feature-grid--6 { grid-template-columns:repeat(2,minmax(0,1fr)); } .feature-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); } .feature-grid--4 { padding-left:0; } .shield-art { opacity:.12; width:50%; left:auto; right:0; } }
@media (max-width:767px) { .site-header { height:68px; } .brand__name { font-size:.77rem; } .feature-grid,.feature-grid--2,.feature-grid--3,.feature-grid--4,.feature-grid--5,.feature-grid--6 { grid-template-columns:minmax(0,1fr); } .feature-grid--1 .feature-card:first-child,.feature-grid--2 .feature-card:first-child,.feature-grid--6 .feature-card:first-child { grid-row:auto; } .feature-grid--5 .feature-card:nth-child(2n) { transform:none; } .section-heading h2 { overflow-wrap:anywhere; } .about-overlap { display:block; } .about-overlap__note { margin:var(--space-4) 0 0; } .closing__inner { grid-template-columns:1fr; } .footer__inner { flex-direction:column; } .footer__right { text-align:left; } .privacy-title__inner { display:block; } .privacy-title__name { display:block; margin-top:var(--space-5); } .policy-band { grid-template-columns:1fr; gap:var(--space-3); padding:var(--space-6) var(--space-4); } .policy-band__side { writing-mode:horizontal-tb; } .hero__wall { grid-template-columns:repeat(2,1fr); } .hero__wall span:nth-child(n+5) { display:none; } .hero__visual { width:calc(var(--hs) * min(46svh,70vw)); height:calc(var(--hs) * min(46svh,70vw)); } .hero__side { display:none; } }
@media (max-width:480px) { .header-pill { gap:var(--space-2); } .brand__chip img { width:32px; height:32px; } .ticket--small { padding:.55rem .7rem; font-size:.78rem; } .brand__name { font-size:.69rem; } .hero__center { padding:var(--space-5) var(--space-3); } .hero__center h1 { letter-spacing:-.09em; } .hero__center .ticket { padding:.65rem 1rem; } .detail-section { padding:var(--space-8) 0; } }
@media (max-height:600px) and (min-width:600px) { .hero__center { max-width:75%; margin-left:-12%; } .hero__visual { left:79%; top:50%; width: min(36svh,250px); height:min(36svh,250px); } .hero__wall { grid-template-columns:repeat(3,1fr); } .hero__center h1 { font-size:calc(var(--hs) * clamp(30px,min(6vw,10svh),80px)); } }
@media (max-height:420px) { .hero__visual,.hero__side { display:none; } .hero__center { padding:var(--space-2) var(--space-4); gap:min(2svh,8px); } .hero__center h1 { font-size:calc(var(--hs) * clamp(26px,8svh,56px)); } .hero__center .ticket { min-height:44px; } }
/* Motion and reduced motion */
@keyframes breathe { 50% { box-shadow:0 0 54px color-mix(in srgb,var(--accent) 70%,transparent); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms; animation-iteration-count:1; transition-duration:.01ms; } .reveal { opacity:1; transform:none; } }
/* Print */
@media print { body { color:#1e6941; background:#fbfbfb; } .site-header,.footer,.back-top { display:none; } .policy-band { color:#1e6941; break-inside:avoid; } .policy-band__copy p { color:#1e6941; } }