/* axclip website: home, privacy and terms. Served at /assets/site.css, loaded after /assets/base.css. */

/* Home: hero */
.Hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; padding: 44px 0 36px; }
.HeroText { display: grid; justify-items: start; gap: 18px; }
.HeroTitle { display: flex; align-items: center; gap: 14px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.HeroLine { font-size: clamp(28px, 5vw, 42px); line-height: 1.12; font-weight: 650; letter-spacing: -.025em; max-width: 14em; }
.HeroLine em { font-style: normal; color: var(--AccentText); }
.HeroActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.HeroArt { display: block; width: 100%; max-width: 440px; height: auto; margin-left: auto; }
.ArtScreen { fill: var(--Surface); stroke: var(--BorderStrong); stroke-width: 2; }
.ArtLine { fill: none; stroke: var(--BorderStrong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ArtLine.IsAccent { stroke: var(--Accent); stroke-width: 3; }
.ArtDash { fill: none; stroke: var(--Muted); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 6; }
.ArtDisc { fill: var(--AccentSoft); stroke: var(--AccentLine); stroke-width: 1.5; }
.ArtPlay { fill: var(--Accent); }
.ArtPill { fill: var(--Surface); stroke: var(--BorderStrong); stroke-width: 2; }
.ArtBar { fill: var(--Well); }
.ArtBar.IsAccent { fill: var(--AccentLine); }
.ArtDot { fill: var(--Accent); }

/* Home: steps and notes */
.Section { padding: 28px 0 0; }
.SectionTitle { margin-bottom: 14px; color: var(--Muted); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.Steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: Step; }
.StepCard { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 18px 20px; counter-increment: Step; }
.StepMark { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 50%; background: var(--AccentSoft); color: var(--AccentText); }
.StepCard::after { content: counter(Step); position: absolute; top: 16px; right: 18px; color: var(--Faint); font: 600 13px/1 var(--Mono); }
.StepTitle { font-size: 16px; line-height: 22px; font-weight: 600; }
.StepText { color: var(--Muted); font-size: 14px; }
.Keys { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.Key { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border: 1px solid var(--BorderStrong); border-bottom-width: 2px; border-radius: 5px; background: var(--KeyBg); color: var(--Text); font: 600 11.5px/1 var(--Mono); }
.Notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.NoteCard { display: grid; align-content: start; justify-items: start; gap: 8px; padding: 18px 18px 20px; }
.NoteTitle { font-size: 16px; line-height: 22px; font-weight: 600; }
.NoteText { color: var(--Muted); font-size: 14px; }
.ContactValue { display: inline-block; padding: 2px 8px; border: 1px solid var(--Border); border-radius: 6px; background: var(--Track); color: var(--Text); font: 13px/1.6 var(--Mono); overflow-wrap: anywhere; }

/* Privacy and terms */
.Doc { padding: 36px 0 0; }
.DocTitle { font-size: clamp(26px, 4vw, 34px); line-height: 1.15; font-weight: 650; letter-spacing: -.02em; }
.DocMeta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; }
.DocLead { margin-top: 18px; color: var(--Muted); font-size: 16px; line-height: 1.65; }
.DocSection { margin-top: 34px; }
.DocSection h2 { margin-bottom: 10px; font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.DocSection p { margin-top: 10px; line-height: 1.7; }
.DocSection p:first-of-type { margin-top: 0; }
.DocSection ul { display: grid; gap: 10px; margin: 12px 0 0; padding-left: 20px; line-height: 1.65; }
.DocSection li::marker { color: var(--Faint); }
.DocSection strong { font-weight: 600; }

/* Narrow screens */
@media (max-width: 860px) {
  .Hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .HeroArt { margin: 0 auto; max-width: 360px; }
  .Steps { grid-template-columns: minmax(0, 1fr); }
  .Notes { grid-template-columns: minmax(0, 1fr); }
  .StepCard { grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .StepMark { grid-row: span 2; margin-bottom: 0; }
}
@media (max-width: 520px) {
  .TopNav .NavLink { padding: 0 8px; }
  .TopBar { flex-wrap: wrap; padding-top: 8px; }
  .TopNav { margin-left: -8px; width: 100%; justify-content: flex-start; }
}