/* ============================================================
   Shared page furniture: page hero, breadcrumbs, download,
   about, contact, legal
   ============================================================ */

/* ---- Compact page hero (inner pages) ---- */
.page-hero { padding-block: clamp(2.4rem, 5vw, 4rem) clamp(1.4rem, 3vw, 2.4rem); text-align: center; position: relative; }
.page-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); }
.page-hero p { color: var(--color-text-muted); font-size: var(--fs-lead); max-width: 62ch; margin-inline: auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .82rem; color: var(--color-text-dim); }
.breadcrumbs li::after { content: "/"; margin-left: .4rem; color: var(--color-gold-deep); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--color-text-muted); }

/* ---- Download page ---- */
.dl-hero { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .dl-hero { grid-template-columns: 1fr .9fr; } }
.dl-hero__mockup { position: relative; justify-self: center; width: min(300px, 76vw); }
.dl-badges { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.dl-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: var(--radius-pill); border: 1px solid var(--color-hairline-soft); background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: .85rem; color: var(--color-text-muted); font-family: var(--font-head); font-weight: 600; }
.dl-badge svg { width: 18px; height: 18px; color: var(--color-gold-premium); }

.qr-card { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; border-radius: var(--radius-lg); border: 1px solid var(--color-hairline); background: var(--grad-surface); margin-top: 1.4rem; }
.qr-card__box { width: 108px; height: 108px; flex: none; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #0A1140; font-size: .7rem; text-align: center; position: relative; overflow: hidden; }
.qr-card__box::before { content: ""; position: absolute; inset: 10px; background-image: repeating-linear-gradient(0deg, #0A1140 0 6px, transparent 6px 12px), repeating-linear-gradient(90deg, #0A1140 0 6px, transparent 6px 12px); background-size: 12px 12px; opacity: .85; border-radius: 4px; }
.qr-card p { margin: 0; font-size: .9rem; color: var(--color-text-muted); }
.qr-card b { color: var(--color-text-strong); font-family: var(--font-head); }

/* install steps (timeline) */
.timeline { position: relative; margin-top: 1rem; }
.timeline::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--color-gold-premium), transparent); }
.timeline__step { position: relative; padding: 0 0 1.8rem 3.6rem; }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__dot { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--color-text-on-gold); background: var(--grad-gold); box-shadow: var(--glow-gold); }
.timeline__step h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.timeline__step p { color: var(--color-text-muted); margin: 0; font-size: .96rem; }

/* requirements table */
.req-table { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-hairline-soft); }
.req-table th, .req-table td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--color-hairline-soft); font-size: .93rem; }
.req-table th { background: rgba(201,162,39,.10); color: var(--color-gold-text); font-family: var(--font-head); width: 42%; }
.req-table td { color: var(--color-text-muted); }
.req-table tr:last-child th, .req-table tr:last-child td { border-bottom: 0; }

/* ---- About: values grid + charter scroll ---- */
.charter { position: relative; padding: clamp(1.8rem, 4vw, 3rem); border-radius: var(--radius-xl); border: 1px solid var(--color-hairline); background: radial-gradient(600px 300px at 20% 0%, rgba(212,175,55,.12), transparent 60%), var(--grad-surface); }
.charter::before, .charter::after { content: ""; position: absolute; left: 5%; right: 5%; height: 10px; border-radius: 50%; background: rgba(26,34,80,.14); filter: blur(6px); }
.charter::before { top: -6px; } .charter::after { bottom: -6px; }
.stat-inline { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin-top: 1.4rem; }
.stat-inline div b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-inline div span { color: var(--color-text-dim); font-size: .84rem; }

/* ---- Contact ---- */
.contact-grid { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr .9fr; } }
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9rem; margin-bottom: .45rem; color: var(--color-text-primary); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: .85rem 1rem; border-radius: var(--radius); border: 1px solid var(--color-hairline-soft);
  background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-body); font-size: .96rem;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible { outline: none; border-color: var(--color-gold-premium); box-shadow: 0 0 0 3px rgba(201,162,39,.20); }
.form-note { font-size: .82rem; color: var(--color-text-dim); margin-top: .4rem; }
.form-success { display: none; padding: 1rem 1.2rem; border-radius: var(--radius); border: 1px solid rgba(46,212,122,.4); background: rgba(46,212,122,.1); color: var(--color-success); font-weight: 600; margin-bottom: 1rem; }
.form-success.is-visible { display: block; }

.contact-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem; border-radius: var(--radius); border: 1px solid var(--color-hairline-soft); background: var(--grad-surface); margin-bottom: 1rem; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.contact-card:hover { border-color: var(--color-hairline); transform: translateX(3px); }
.contact-card__icon { width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(201,162,39,.12); border: 1px solid var(--color-hairline); color: var(--color-gold-text); }
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.contact-card p { margin: 0; color: var(--color-text-muted); font-size: .9rem; }

/* callout / disclaimer box */
.callout { padding: 1.3rem 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--color-hairline-soft); background: var(--grad-surface); margin-block: 1.4rem; }
.callout--warn { border-color: rgba(225,75,75,.4); background: rgba(225,75,75,.06); }
.callout--gold { border-color: var(--color-hairline); background: rgba(212,175,55,.06); }
.callout h3 { color: var(--color-text-strong); font-size: 1.05rem; }
.callout p:last-child { margin-bottom: 0; }

.toc { position: sticky; top: calc(var(--header-h) + 16px); }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc a { display: block; padding: .4rem .6rem; border-radius: 8px; color: var(--color-text-muted); font-size: .9rem; border-left: 2px solid transparent; }
.toc a:hover { color: var(--color-gold-text); border-left-color: var(--color-gold-premium); background: var(--tint); }

.legal-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .legal-layout { grid-template-columns: 220px 1fr; } }