/* Service Connect — apsc.works
   Tokens inherited from the July 2 apex page. --text-m raised from #78736c
   (4.06:1, fails WCAG AA) to #9d978c (6.58:1, passes). */

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

:root {
  --bg:#0d0f1e;
  --bg-lift:rgba(255,255,255,0.02);
  --accent:#c9a84c;
  --text:#ccc8be;
  --text-m:#9d978c;
  --title:#ece8e0;
  --card-border:rgba(255,255,255,0.07);
  --rule:rgba(255,255,255,0.05);
  --paper:#e8e2d4;
  --paper-ink:#2b2a26;
  --paper-rule:#c3bba6;
}

html { -webkit-text-size-adjust:100%; }

body {
  background:var(--bg); color:var(--text);
  font-family:'Barlow',sans-serif; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
}

a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.skip {
  position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--bg);
  padding:0.7rem 1.2rem; font-family:'Raleway',sans-serif; font-size:0.7rem;
  font-weight:700; letter-spacing:0.14em; text-transform:uppercase; z-index:50;
}
.skip:focus { left:0; }

/* ---------- header ---------- */
.top {
  padding:1.4rem 2rem; display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap; border-bottom:1px solid var(--rule);
}
.brand {
  font-family:'Raleway',sans-serif; font-weight:700; font-size:0.95rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); text-decoration:none;
}
.nav { display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap; }
.nav a {
  font-family:'Barlow Condensed',sans-serif; font-size:0.78rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-m); text-decoration:none;
}
.nav a:hover, .nav a:focus-visible { color:var(--accent); }
.kicker {
  font-family:'Barlow Condensed',sans-serif; font-size:0.64rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-m);
}

/* ---------- layout ---------- */
main { flex:1; width:100%; }
.band { border-bottom:1px solid var(--rule); }
.band > .inner { max-width:1080px; margin:0 auto; padding:4.5rem 2rem; }
.inner-narrow { max-width:760px; }

h1, h2, h3 { font-family:'Cormorant Garamond',serif; color:var(--title); font-weight:600; line-height:1.2; }
h1 { font-size:clamp(2rem,5vw,3.4rem); }
h2 { font-size:clamp(1.5rem,3.2vw,2.2rem); margin-bottom:1rem; }
h3 { font-size:1.15rem; font-weight:600; margin-bottom:0.5rem; }

p { color:var(--text-m); font-weight:300; line-height:1.85; }
.lede { font-size:1.05rem; color:var(--text); max-width:62ch; }
.body { font-size:0.95rem; max-width:64ch; }
.body + .body { margin-top:1rem; }

.tag {
  display:inline-block; font-family:'Barlow Condensed',sans-serif; font-size:0.66rem;
  font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); opacity:0.9; padding:0.22rem 0.65rem; margin-bottom:1.6rem;
}
.eyebrow {
  font-family:'Barlow Condensed',sans-serif; font-size:0.7rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:0.9rem;
}

/* ---------- buttons ---------- */
.btn {
  display:inline-block; padding:0.75rem 1.7rem; background:var(--accent); color:var(--bg);
  font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:0.15em;
  text-transform:uppercase; text-decoration:none; border:1px solid var(--accent);
  cursor:pointer; transition:filter 0.2s;
}
.btn:hover { filter:brightness(1.12); }
.btn-ghost { background:transparent; color:var(--accent); }
.btn-ghost:hover { background:rgba(201,168,76,0.08); filter:none; }
.actions { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:2rem; }
.mail {
  font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--text-m); text-decoration:none;
}
.mail:hover { color:var(--accent); }

/* ---------- hero ---------- */
.hero .inner { padding-top:5.5rem; padding-bottom:4rem; }
.hero h1 { margin-bottom:1.4rem; max-width:20ch; }

/* ---------- signature: the record, two ways ---------- */
.record {
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:stretch; margin-top:3.5rem;
}
.record-label {
  font-family:'Barlow Condensed',sans-serif; font-size:0.68rem; letter-spacing:0.18em;
  text-transform:uppercase; margin-bottom:0.9rem;
}
.record-label.before { color:var(--text-m); }
.record-label.after { color:var(--accent); }

.slip {
  background:var(--paper); color:var(--paper-ink); padding:1.6rem 1.5rem;
  transform:rotate(-0.7deg); box-shadow:0 18px 38px rgba(0,0,0,0.45);
  font-family:'Space Mono',monospace; font-size:0.78rem; line-height:2.4;
}
.slip-head {
  font-weight:700; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  border-bottom:2px solid var(--paper-ink); padding-bottom:0.5rem; margin-bottom:0.9rem; line-height:1.4;
}
.slip-row { border-bottom:1px solid var(--paper-rule); display:flex; justify-content:space-between; gap:1rem; }
.slip-row span:last-child { color:#6f695c; }
.slip-note {
  margin-top:1.1rem; font-family:'Barlow',sans-serif; font-size:0.8rem;
  line-height:1.6; color:#5c574c; font-style:italic;
}

.verified {
  border:1px solid var(--card-border); border-left:3px solid var(--accent);
  background:var(--bg-lift); padding:1.6rem 1.5rem;
  font-family:'Space Mono',monospace; font-size:0.78rem; line-height:2.4;
}
.verified-head {
  font-weight:700; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--title); border-bottom:1px solid var(--card-border);
  padding-bottom:0.5rem; margin-bottom:0.9rem; line-height:1.4;
}
.v-row { display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--rule); color:var(--text-m); }
.v-row b { color:var(--accent); font-weight:400; }
.verified-note {
  margin-top:1.1rem; font-family:'Barlow',sans-serif; font-size:0.8rem;
  line-height:1.6; color:var(--text-m);
}

/* ---------- promise ---------- */
.promise { background:var(--bg-lift); }
.promise .inner { padding-top:3.5rem; padding-bottom:3.5rem; }
.promise-line {
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.4rem,3vw,2rem);
  color:var(--title); line-height:1.35; max-width:26ch; margin-bottom:1.2rem;
}
.promise-line em { color:var(--accent); font-style:normal; }

/* ---------- role cards ---------- */
.roles { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2.5rem; }
.role { border-top:2px solid var(--accent); padding-top:1.2rem; }
.role .who {
  font-family:'Barlow Condensed',sans-serif; font-size:0.7rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:0.7rem;
}
.role p { font-size:0.92rem; }

/* ---------- steps (a real sequence) ---------- */
.steps { margin-top:2.5rem; display:grid; gap:0; }
.step {
  display:grid; grid-template-columns:3.5rem 1fr; gap:1.5rem;
  padding:1.6rem 0; border-top:1px solid var(--rule);
}
.step:last-child { border-bottom:1px solid var(--rule); }
.step-n {
  font-family:'Space Mono',monospace; font-size:0.85rem; color:var(--accent); padding-top:0.15rem;
}
.step p { font-size:0.92rem; margin-top:0.35rem; }

/* ---------- mobile app ---------- */
.app { display:grid; grid-template-columns:1.15fr 1fr; gap:3.5rem; align-items:center; }
.phone {
  border:1px solid var(--card-border); background:var(--bg-lift); padding:1.4rem 1.2rem;
  max-width:290px; margin:0 auto; box-shadow:0 18px 38px rgba(0,0,0,0.4);
}
.phone-top {
  font-family:'Barlow Condensed',sans-serif; font-size:0.62rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--text-m); display:flex; justify-content:space-between;
  border-bottom:1px solid var(--rule); padding-bottom:0.7rem; margin-bottom:1.1rem;
}
.phone-site { font-family:'Cormorant Garamond',serif; font-size:1.25rem; color:var(--title); margin-bottom:0.15rem; }
.phone-meta { font-family:'Space Mono',monospace; font-size:0.68rem; color:var(--text-m); line-height:2; }
.phone-meta b { color:var(--accent); font-weight:400; }
.phone-btn {
  margin-top:1.2rem; text-align:center; background:var(--accent); color:var(--bg);
  font-family:'Raleway',sans-serif; font-size:0.68rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; padding:0.7rem;
}
.stores { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.store {
  border:1px solid var(--card-border); padding:0.6rem 1.1rem; text-decoration:none;
  font-family:'Barlow Condensed',sans-serif; font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-m);
}
.store:hover { border-color:var(--accent); color:var(--accent); }

/* ---------- pricing ---------- */
.price-table { width:100%; border-collapse:collapse; margin-top:2.5rem; }
.price-table caption { text-align:left; color:var(--text-m); font-size:0.9rem; padding-bottom:1rem; }
.price-table th, .price-table td { text-align:left; padding:1.1rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.price-table thead th {
  font-family:'Barlow Condensed',sans-serif; font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--card-border); font-weight:600;
}
.price-table tbody th {
  font-family:'Raleway',sans-serif; font-size:0.8rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--title); font-weight:700; white-space:nowrap;
}
.price-table td { color:var(--text-m); font-size:0.92rem; font-weight:300; }
.price-annual { font-family:'Space Mono',monospace; font-size:1rem; color:var(--accent) !important; white-space:nowrap; }
.price-mo { font-family:'Space Mono',monospace; font-size:0.8rem; white-space:nowrap; }
.price-note { margin-top:1.8rem; font-size:0.9rem; }

/* ---------- placeholder (awaiting authorization) ---------- */
.placeholder {
  border:1px dashed var(--card-border); padding:2.2rem; text-align:center;
  background:var(--bg-lift); margin-top:2rem;
}
.placeholder .eyebrow { margin-bottom:0.6rem; }
.placeholder p { font-size:0.92rem; margin:0 auto; max-width:52ch; }

/* ---------- form ---------- */
.form { margin-top:2.5rem; max-width:640px; }
.field { margin-bottom:1.4rem; }
.field label {
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text); margin-bottom:0.5rem;
}
.field input, .field select, .field textarea {
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--card-border);
  color:var(--title); font-family:'Barlow',sans-serif; font-size:0.95rem; padding:0.7rem 0.85rem;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent); outline:none; }
.field textarea { min-height:110px; resize:vertical; }
.field .hint { font-size:0.82rem; color:var(--text-m); margin-top:0.4rem; }
.hp { position:absolute; left:-9999px; }

/* ---------- portal card ---------- */
.find {
  border:1px solid var(--card-border); border-left:3px solid var(--accent);
  background:var(--bg-lift); padding:2rem 2.1rem;
}
.find h1, .find h2 { margin-bottom:0.8rem; }
.mono { font-family:'Space Mono',monospace; font-size:0.88em; color:var(--accent); white-space:nowrap; }
.addr {
  margin-top:1.4rem; font-family:'Space Mono',monospace;
  font-size:clamp(1rem,2.6vw,1.35rem); color:var(--title);
}
.addr b { color:var(--accent); font-weight:700; }

/* ---------- security page ---------- */
.qa { border-top:1px solid var(--rule); padding:1.6rem 0; }
.qa:last-of-type { border-bottom:1px solid var(--rule); }
.qa h3 { color:var(--title); margin-bottom:0.4rem; }
.qa p { font-size:0.92rem; }

/* ---------- footer ---------- */
footer { padding:2.2rem 2rem; border-top:1px solid var(--rule); }
.foot-inner {
  max-width:1080px; margin:0 auto; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; align-items:center;
}
.foot-links { display:flex; gap:1.4rem; flex-wrap:wrap; }
footer span, footer a {
  font-family:'Barlow Condensed',sans-serif; font-size:0.7rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-m); text-decoration:none;
}
footer a:hover { color:var(--accent); }

/* ---------- responsive ---------- */
@media (max-width:900px) {
  .record { grid-template-columns:1fr; gap:2rem; }
  .roles { grid-template-columns:1fr; gap:1.8rem; }
  .app { grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width:640px) {
  .top { padding:1.1rem 1.3rem; }
  .band > .inner { padding:3rem 1.3rem; }
  .hero .inner { padding-top:3.5rem; }
  .kicker { display:none; }
  .price-table thead { display:none; }
  .price-table tbody th, .price-table td { display:block; border-bottom:none; padding:0.25rem 0; }
  .price-table tbody tr { display:block; border-bottom:1px solid var(--rule); padding:1.2rem 0; }
  .price-table td::before { content:attr(data-label) " "; color:var(--text-m); font-family:'Barlow Condensed',sans-serif; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; }
  .slip { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
}