/* ─────────────────────────────────────────────────────────────────────────────
   Perchd — design tokens translated from frontend/hooks/theme/tokens.ts
   Warm, premium, lifestyle-oriented. Item images are the visual centrepiece;
   the UI is a neutral warm frame.
───────────────────────────────────────────────────────────────────────────── */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Backgrounds */
    --bg-primary:    #FDFBF8;   /* warm white page surface */
    --bg-secondary:  #F8F4F0;   /* warm card */
    --bg-elevated:   #FFFCF9;   /* modals / elevated */

    /* Text */
    --text-primary:   #2C2421;  /* warm near-black */
    --text-secondary: #6E6259;  /* warm mid-grey */
    --text-tertiary:  #8E8279;  /* warm light grey */

    /* Accent */
    --accent: #B0805A;          /* muted clay / warm taupe */

    /* Semantic */
    --price-drop:   #7B9E7B;    /* soft sage */
    --price-rising: #D4964A;    /* warm amber */

    /* Borders */
    --border-subtle: rgba(44, 36, 33, 0.08);
    --border-mid:    rgba(44, 36, 33, 0.14);

    /* Shadows */
    --shadow-low:  0 2px 6px  rgba(44, 36, 33, 0.10);
    --shadow-med:  0 4px 12px rgba(44, 36, 33, 0.10);

    /* Typography */
    --font-serif: 'Palatino Linotype', Palatino, Georgia, serif;
    --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Layout */
    --max-width: 1080px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

/* Base */
body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }


/* ── Navigation ─────────────────────────────────────────────────────────── */

.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(253, 251, 248, 0.90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
}
.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
}
.nav-logo:hover { text-decoration: none; }
.nav-logo-img { width: 26px; height: 26px; border-radius: 6px; }
.nav-logo-text {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.nav-links { display: flex; gap: 24px; }
.nav-links a {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.active {
    color: var(--text-primary);
    text-decoration: none;
}


/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    padding: 90px 16px 0px;
    margin-bottom: 8px;
    overflow: hidden;
}
/* .hero::before { */
/*     content: ''; */
/*     position: absolute; */
/*     top: 44.1%; */
/*     left: -100px; */
/*     transform: translateY(-50%); */
/*     width: 700px; */
/*     height: 700px; */
/*     background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="softGlow" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23CFBFAD" stop-opacity="0.3"/><stop offset="100%" stop-color="%23CFBFAD" stop-opacity="0"/></radialGradient></defs><g transform="translate(50, 20)"><path d="M850,720 Q650,700 450,760 T150,800" stroke="%23AC9A89" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.45"/><path d="M410,710 L300,810 Q280,830 315,830 L430,765 Z" fill="%23A08E7F" opacity="0.3"/><path d="M410,730 C500,780 680,750 720,600 C750,450 740,280 620,250 C500,220 400,350 380,500 Q370,650 410,730 Z" fill="%23A49280" opacity="0.3"/><path d="M460,520 C450,580 470,660 510,670 Q580,665 610,540 Q615,490 530,490 Z" fill="%23948277" opacity="0.35"/><path d="M580,720 Q680,680 710,550 Q650,600 580,580 Z" fill="%23AF9C8C" opacity="0.2"/><path d="M725,360 Q755,368 765,375 Q730,388 720,388 Z" fill="%2376655A" opacity="0.5"/><ellipse cx="655" cy="345" rx="7" ry="9" fill="%2364524A" opacity="0.5"/><path d="M510,755 L508,775" stroke="%2376655A" stroke-width="3" stroke-linecap="round" opacity="0.35"/><path d="M540,745 L538,765" stroke="%2376655A" stroke-width="3" stroke-linecap="round" opacity="0.35"/></g></svg>'); */
/*     background-repeat: no-repeat; */
/*     background-position: center; */
/*     background-size: contain; */
/*     opacity: 0.3; */
/*     pointer-events: none; */
/*     z-index: 0; */
/* } */
.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.hero-title {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 68px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1.5px;
    margin-bottom: 48px;
    color: var(--text-primary);
}
.hero-subtitle {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 48px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
.store-badge { height: 40px; width: auto; }
.badge-link { transition: opacity 0.15s; }
.badge-link:hover { opacity: 0.72; }


/* ── Download ────────────────────────────────────────────────────────────── */

.download {
    padding: 50px 16px 64px;
}
.download-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.download-badges {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ── Screenshot ─────────────────────────────────────────────────────────── */

.screenshot { margin: 0px 0; padding: 0px 24px 36px; }
.screenshot-inner {
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    gap: 130px;
    justify-content: center;
    align-items: center;
}
.screenshot-inner--sm {
    max-width: 860px;
    gap: 110px;
}
.screenshot-image {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    height: auto;
}
.screenshot-placeholder {
    aspect-ratio: 9 / 16;
    background: var(--bg-secondary);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.screenshot-placeholder-text {
    color: var(--text-tertiary);
    font-size: 14px;
    letter-spacing: 0.5px;
}


/* ── Features ────────────────────────────────────────────────────────────── */

.features { padding: 0 24px 0; }
.features-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    border-top: 1px solid var(--border-subtle);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.features-inner--single {
    grid-template-columns: 1fr;
    max-width: 440px;
}
.features-inner--two {
    grid-template-columns: repeat(2, 1fr);
}
.features-inner--two .feature {
    text-align: center;
}
.features-inner--center {
    grid-template-columns: 1fr;
    justify-items: center;
}
.features-inner--center .feature {
    max-width: 440px;
    text-align: center;
}
.feature { padding: 38px 38px; }
.feature + .feature { border-left: 1px solid var(--border-subtle); }
.features-inner--single .feature + .feature { border-left: none; }
.feature-num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.feature-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.feature-desc {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
}


/* ── Share feature ──────────────────────────────────────────────────────── */

.share-feature { margin: 0px 0px 0px; }
.share-feature-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.share-feature-screenshot {
    max-width: 250px;
    width: 100%;
    margin: 0 auto 0px;
}
.feature .share-feature-screenshot {
    margin-top: 32px;
}
.share-feature-screenshot .screenshot-placeholder {
    aspect-ratio: 9 / 16;
}
.share-feature-screenshot .screenshot-image {
    margin: 0 auto;
}


/* ── Page interior (about, privacy) ─────────────────────────────────────── */

.page {
    position: relative;
    padding: 56px 24px 48px;
    overflow: hidden;
}
/* .page::before { */
/*     content: ''; */
/*     position: absolute; */
/*     top: -100px; */
/*     left: -100px; */
/*     width: 700px; */
/*     height: 700px; */
/*     background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="softGlow" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23CFBFAD" stop-opacity="0.3"/><stop offset="100%" stop-color="%23CFBFAD" stop-opacity="0"/></radialGradient></defs><g transform="translate(50, 20)"><path d="M850,720 Q650,700 450,760 T150,800" stroke="%23AC9A89" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.45"/><path d="M410,710 L300,810 Q280,830 315,830 L430,765 Z" fill="%23A08E7F" opacity="0.3"/><path d="M410,730 C500,780 680,750 720,600 C750,450 740,280 620,250 C500,220 400,350 380,500 Q370,650 410,730 Z" fill="%23A49280" opacity="0.3"/><path d="M460,520 C450,580 470,660 510,670 Q580,665 610,540 Q615,490 530,490 Z" fill="%23948277" opacity="0.35"/><path d="M580,720 Q680,680 710,550 Q650,600 580,580 Z" fill="%23AF9C8C" opacity="0.2"/><path d="M725,360 Q755,368 765,375 Q730,388 720,388 Z" fill="%2376655A" opacity="0.5"/><ellipse cx="655" cy="345" rx="7" ry="9" fill="%2364524A" opacity="0.5"/><path d="M510,755 L508,775" stroke="%2376655A" stroke-width="3" stroke-linecap="round" opacity="0.35"/><path d="M540,745 L538,765" stroke="%2376655A" stroke-width="3" stroke-linecap="round" opacity="0.35"/></g></svg>'); */
/*     background-repeat: no-repeat; */
/*     background-position: center; */
/*     background-size: contain; */
/*     opacity: 0.3; */
/*     pointer-events: none; */
/*     z-index: 0; */
/* } */
.page-inner { position: relative; z-index: 1; max-width: 680px; margin: 0px auto; }
.page-inner h1 {
    font-family: var(--font-serif);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 8px;
}
.last-updated {
    color: var(--text-tertiary);
    margin-bottom: 48px;
    font-size: 13px;
}
.text-section { margin-bottom: 44px; }
.text-section h2 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}
.text-section p {
    color: var(--text-secondary);
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.75;
}
.text-section ul, .text-section ol { margin-left: 20px; margin-bottom: 12px; }
.text-section li {
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}
.steps-list { margin-left: 20px; }
.values-list { list-style: none; margin-left: 0; }
.values-list li {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.values-list li:first-child { border-top: 1px solid var(--border-subtle); }
.cta-section {
    text-align: center;
    margin-top: 60px;
    padding-top: 48px;
}
.cta-section h2 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--text-primary);
}


/* ── Share pages ─────────────────────────────────────────────────────────── */

.share-page { padding: 40px 24px 48px; }
.share-inner { max-width: 480px; margin: 0 auto; text-align: center; }

.share-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
    text-align: left;
    box-shadow: var(--shadow-low);
}
.share-card.empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 15px;
}
.share-card-image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-card-image .item-image { width: 100%; height: 100%; object-fit: contain; }
.item-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}
.placeholder-logo { width: 44px; height: 44px; opacity: 0.22; }
.share-card-info { padding: 20px; }
.item-name {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.3;
    color: var(--text-primary);
}
.item-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.item-domain { color: var(--text-tertiary); font-size: 13px; }

/* Collection share */
.collection-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
    text-align: left;
    color: var(--text-primary);
}
.collection-meta {
    color: var(--text-tertiary);
    margin-bottom: 20px;
    font-size: 13px;
    text-align: left;
}

/* Item grid */
.item-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    text-align: left;
}
.grid-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.grid-card-image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px;
    border-radius: var(--radius-sm);
}
.grid-card-image .item-image { width: 100%; height: 100%; object-fit: cover; }
.grid-card-info { padding: 10px 12px 12px; }
.grid-item-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.grid-item-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.grid-item-domain { color: var(--text-tertiary); font-size: 11px; }

/* Fit share */
.fit-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
    color: var(--text-primary);
}
.fit-image-container {
    margin-bottom: 20px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.fit-image { width: 100%; border-radius: var(--radius-md); }
.fit-image-placeholder {
    padding: 48px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--text-tertiary);
}
.fit-image-placeholder .placeholder-logo { margin: 0 auto 12px; }
.fit-items-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    text-align: left;
}

/* Expired */
.expired-page { text-align: center; }
.expired-icon { margin-bottom: 24px; }
.expired-clock { opacity: 0.5; }
.expired-page h1 {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.expired-body {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.7;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}
.expired-cta-text {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}


/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
    letter-spacing: 0.1px;
}
.btn-primary {
    background: var(--text-primary);
    color: var(--bg-primary);
}
.btn-primary:hover { opacity: 0.80; text-decoration: none; }


/* ── Report ──────────────────────────────────────────────────────────────── */

.report-section {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}
.report-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0.2px;
}
.report-btn:hover {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}
.report-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.report-confirmation {
    color: var(--text-tertiary);
    font-size: 13px;
    padding: 6px 0;
}


/* ── Share actions ───────────────────────────────────────────────────────── */

.share-actions { margin-bottom: 24px; }
.share-store-badges { margin-bottom: 16px; }
.share-store-text {
    color: var(--text-tertiary);
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
    border-top: 1px solid var(--border-subtle);
    padding: 24px 24px;
    background: var(--bg-primary);
}
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a {
    color: var(--text-tertiary);
    font-size: 13px;
    transition: color 0.15s;
}
.footer-links a:hover { color: var(--text-primary); text-decoration: none; }
.footer-copy { color: var(--text-tertiary); font-size: 13px; }


/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .features-inner { grid-template-columns: 1fr; }
    .feature + .feature { border-left: none; border-top: 1px solid var(--border-subtle); }
    .feature { padding: 32px 0px; }
    .screenshot-inner {
        max-width: 500px;
        gap: 8px;
    }
    .hero-inner {
        margin: 0px 40px 0px 40px;
    }
    .screenshot-image { max-width: 100%; }
    .share-feature-screenshot { max-width: 180px; }
}

@media (max-width: 640px) {
    .hero { padding: 48px 20px 0px; }
    .hero-title { font-size: 38px; letter-spacing: -0.8px; margin-bottom: 26px; }
    .hero-subtitle { font-size: 15px; margin-bottom: 24px; }
    .screenshot-inner {
        max-width: 400px;
        gap: 10px;
    }
    .screenshot {
        padding: 0px 12px 24px;
    }
    .download { padding: 48px 20px 48px; }
    .footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .share-feature-screenshot {
        margin-bottom: 8px;
    }
}