/* css/pages/about.css — extracted from pf-about.html */

:root{--bg:var(--color-bg);--bg2:var(--color-surface);--blue:var(--color-accent-c);--green:var(--color-accent-g);--white:var(--color-text);--muted:var(--color-text-dim);--border:var(--color-border);--dim:var(--color-text-dim);}
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  /* body bg/color: inherited from theme.css */
  .page{max-width:760px;margin:0 auto;padding:48px 24px 80px;}
  .page-eye{font-size:var(--text-sm);letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
  .page-h1{font-family:'Arial Black',Arial,sans-serif;font-size:clamp(28px,5vw,48px);font-weight:300;line-height:1.15;margin-bottom:36px;}
  .section{margin-bottom:48px;}
  .section-h2{font-family:'Arial Black',Arial,sans-serif;font-size:16px;font-weight:700;color:var(--white);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
  p{font-size:var(--text-base);color:var(--color-text-mid);line-height:1.78;margin-bottom:14px;}
  p:last-child{margin-bottom:0;}
  strong{color:var(--white);}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
  .contact-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;}
  .cc-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-mid);margin-bottom:6px;}
  .cc-val{font-size:var(--text-base);color:var(--white);}
  .cc-val a{color:var(--blue);text-decoration:none;}
  .cc-val a:hover{text-decoration:underline;}
  .legal-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
  .legal-link{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 16px;font-size:var(--text-base);color:var(--muted);text-decoration:none;transition:border-color .12s,color .12s;}
  .legal-link:hover{color:var(--blue);border-color:rgba(0,170,255,0.60);}
  @media(max-width:600px){.page{padding:32px 16px 80px;}.contact-grid{grid-template-columns:1fr;}}

/* ── About page rewrite — problem-first (S402) ──────────────────── */
.about-problem { border-left: 3px solid var(--color-accent-c); padding-left: 20px; }
.about-lead { font-size: clamp(1.05rem, 2.5vw, 1.25rem); color: var(--color-text); font-weight: 400; line-height: 1.6; margin-bottom: 18px; }

/* ── Contact form (S336, shared ecf-* classes) ──────────────────── */
.ecf-section { margin-top: 4px; }
.ecf-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-dim); margin-bottom: 6px; }
.ecf-heading { font-size: 1.3rem; font-weight: 700; color: var(--color-text); margin: 0 0 6px; }
.ecf-sub     { font-size: .9rem; color: var(--color-text-mid); margin: 0 0 20px; }
.ecf-form    { display: flex; flex-direction: column; gap: 12px; }
.ecf-field-wrap { display: flex; flex-direction: column; gap: 4px; }
.ecf-label   { font-size: .75rem; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: .04em; }
.ecf-input, .ecf-textarea {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: .9rem;
  color: var(--color-text); font-family: var(--font-body); outline: none;
  transition: border-color .15s;
}
.ecf-input:focus, .ecf-textarea:focus { border-color: var(--color-border-strong); }
.ecf-input::placeholder, .ecf-textarea::placeholder { color: var(--color-text-dim); }
.ecf-textarea { resize: vertical; min-height: 100px; }
.ecf-btn {
  align-self: flex-start; background: var(--color-accent-c); color: var(--color-bg);
  border: none; border-radius: var(--radius-sm); padding: 10px 22px;
  font-family: var(--font-display); font-weight: 900; font-size: .9rem; cursor: pointer;
}
.ecf-btn:disabled { opacity: .6; cursor: default; }
.ecf-status { font-size: .85rem; padding: 8px 12px; border-radius: var(--radius-sm); }
.ecf-status.hidden { display: none; }
.ecf-status--ok    { background: color-mix(in srgb, var(--color-accent-g) 12%, transparent); color: var(--color-accent-g); }
.ecf-status--error { background: color-mix(in srgb, var(--color-accent-r) 12%, transparent); color: var(--color-accent-r); }
.ecf-sent .ecf-input, .ecf-sent .ecf-textarea { opacity: .5; pointer-events: none; }