/* BuildReport logged-out homepage. Tokens and rules: DESIGN.md (flat, square, ink and hairlines). */

.home-screen { display: none; }
.home-screen.active { display: block; }
html.has-token .home-screen, html.has-token .home-nav { display: none !important; }
html.has-token body.home-mode #accountNav { display: flex !important; }

/* Header on the homepage */
.home-nav { display: none; align-items: center; gap: var(--s5); }
body.home-mode .home-nav { display: flex; }
body.home-mode #accountNav { display: none; }
.home-nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem; display: inline-flex; align-items: center; min-height: 44px; }
.home-nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; }
.home-links { display: flex; align-items: center; gap: var(--s5); }
.home-account { display: flex; align-items: center; gap: var(--s4); }

.hp-wrap { max-width: var(--content); margin: 0 auto; padding: 0 var(--s5); }
.hp-section { padding: var(--s7) 0; border-top: 1px solid var(--hairline); }
.hp-section h2 { font-size: 1.75rem; letter-spacing: -0.01em; }
.hp-lede { color: var(--muted); margin-top: var(--s2); max-width: 62ch; }

/* Hero */
.hp-hero { padding: var(--s7) 0; }
.hp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.hp-hero h1 { font-size: 2.75rem; letter-spacing: -0.02em; line-height: 1.1; margin-top: var(--s3); }
.hp-hero .hp-text { margin-top: var(--s4); color: var(--muted); font-size: 1.125rem; max-width: 52ch; }
.hp-start { display: flex; gap: var(--s3); margin-top: var(--s5); }
.hp-start .form-input { flex: 1; min-width: 0; }
.hp-fine { margin-top: var(--s3); font-size: 0.875rem; color: var(--muted); }

/* Sample drawing sheet */
.hp-sheet { margin: 0; min-width: 0; }
.hp-sample { display: block; border: 1px solid var(--hairline); background: var(--page); }
.hp-sample img { display: block; width: 100%; height: auto; }
.hp-sample:hover, .hp-sample:focus-visible { border-color: var(--ink); }
.ref { color: var(--red); font-family: var(--font-mono); font-weight: 600; font-size: 0.7em; vertical-align: super; line-height: 0; margin-left: 1px; }
.hp-sheet figcaption { margin-top: var(--s2); font-size: 0.875rem; color: var(--muted); }

/* How it works */
.hp-steps { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.hp-step { padding: var(--s4) var(--s5) 0 0; }
.hp-step .num { font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem; }
.hp-step h3 { font-size: 1.125rem; margin-top: var(--s2); }
.hp-step p { color: var(--muted); margin-top: var(--s2); }

/* Pricing */
.hp-tiers { display: grid; grid-template-columns: minmax(0, 34rem); gap: var(--s5); margin-top: var(--s5); }
.hp-tier { background: var(--page); border: 1px solid var(--hairline); padding: var(--s5); display: flex; flex-direction: column; min-width: 0; }
.hp-tier h3 { font-size: 1.125rem; margin-top: var(--s2); }
.hp-tier .hp-price { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; margin-top: var(--s2); }
.hp-tier .hp-price small { font-size: 0.8125rem; font-weight: 500; color: var(--muted); margin-left: 6px; }
.hp-tier p.desc { color: var(--muted); margin-top: var(--s3); flex: 1; }
.hp-tier .hp-state { margin-top: var(--s4); display: flex; align-items: center; min-height: 44px; }
.hp-tier .hp-state .label { color: var(--ink); }
.hp-packs { margin-top: var(--s5); border-top: 1px solid var(--hairline); padding-top: var(--s5); }
.hp-packs .hp-pack-line { font-family: var(--font-mono); font-weight: 500; font-size: 1rem; }
.hp-buy { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.hp-packs .hp-fine { margin-top: var(--s3); }

/* Sources band */
.hp-band { background: var(--ink); color: var(--page); padding: var(--s7) 0; }
.hp-band h2 { font-size: 1.75rem; letter-spacing: -0.01em; max-width: 24ch; }
.hp-sources { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #5C6C80; }
.hp-sources li { padding: var(--s4) var(--s4) 0 0; font-weight: 500; }
.hp-sources .num { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; color: #D5DCE4; margin-bottom: var(--s1); }
.hp-band :focus-visible { outline-color: var(--page); }

/* FAQ */
.hp-faq { margin-top: var(--s5); max-width: 72ch; }
.hp-faq h3 { font-size: 1.0625rem; padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.hp-faq h3:first-child { border-top: 0; padding-top: 0; }
.hp-faq p { color: var(--muted); margin: var(--s2) 0 var(--s5); }

@media (max-width: 860px) {
    .hp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
    .hp-hero h1 { font-size: 2.25rem; }
    .hp-tiers { grid-template-columns: minmax(0, 1fr); }
    .hp-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .site-header-inner:has(.home-nav) { flex-wrap: wrap; }
    body.home-mode .home-nav { display: contents; }
    body.home-mode .site-header-inner { gap: 0 var(--s3); }
    .home-account { order: 1; gap: var(--s3); }
    .home-account a { white-space: nowrap; }
    .home-links { order: 2; flex: 1 1 100%; gap: var(--s5); }
    .home-nav .btn { padding: 10px 14px; }
    .hp-wrap { padding: 0 var(--s4); }
    .hp-hero { padding: var(--s6) 0; }
    .hp-section, .hp-band { padding: var(--s6) 0; }
    .hp-hero h1 { font-size: 2rem; }
    .hp-hero .hp-text { font-size: 1rem; }
    .hp-start { flex-direction: column; }
    .hp-section h2, .hp-band h2 { font-size: 1.5rem; }
    .hp-steps { grid-template-columns: minmax(0, 1fr); }
    .hp-step { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
    .hp-tier { padding: var(--s4); }
    .hp-buy .btn { flex: 1 1 100%; }
    .hp-sources { grid-template-columns: minmax(0, 1fr); }
    .hp-sources li { padding: var(--s3) 0; border-bottom: 1px solid #5C6C80; }
}