/* About katchiGRAB. The page wears the app's own skin: app.css + themes.css load
   first and boot.js applies the visitor's saved mode and accent, so the About
   page opens looking like THEIR katchiGRAB. This file only lays out the page. */
body.aboutpage{height:auto;min-height:100%;overflow:auto}
.aboutpage .bar{position:sticky;top:0;justify-content:space-between}
.openapp{display:inline-flex;align-items:center;text-decoration:none}
main.about{display:block;max-width:880px;margin:0 auto;padding:40px 24px 24px}
main.about section{margin:0 0 56px}
main.about h2{margin:0 0 14px;font-size:24px;font-weight:650;letter-spacing:-.015em}
main.about p,main.about dd{color:var(--ink);font-size:15px;line-height:1.6;max-width:68ch}

/* Hero */
.ahero{display:flex;align-items:center;gap:40px;flex-wrap:wrap;padding:28px 0 8px}
.ahand{position:relative;flex:none;padding:26px;border-radius:4px;
  background:
    linear-gradient(90deg,var(--accent) 50%,transparent 0) repeat-x 0 0/10px 1.5px,
    linear-gradient(90deg,var(--accent) 50%,transparent 0) repeat-x 0 100%/10px 1.5px,
    linear-gradient(0deg,var(--accent) 50%,transparent 0) repeat-y 0 0/1.5px 10px,
    linear-gradient(0deg,var(--accent) 50%,transparent 0) repeat-y 100% 0/1.5px 10px}
.ahand svg{display:block;width:150px;height:auto;color:var(--accent)}
.ahand .hs{fill:none;stroke:currentColor;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.ahero-copy{flex:1;min-width:300px}
.ahero h1{margin:0 0 14px;font-size:clamp(30px,4.6vw,46px);line-height:1.06;font-weight:650;letter-spacing:-.025em;max-width:18ch}
.lede{font-size:17px;color:var(--muted);max-width:56ch}
.heroacts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.btn.big{height:44px;padding:0 22px;font-size:15px;font-weight:600;display:inline-flex;align-items:center;text-decoration:none}
.free{color:var(--muted);font-size:14px}

/* What it does: term on the left, meaning on the right */
.does{margin:0;display:grid;gap:0}
.does>div{display:grid;grid-template-columns:230px minmax(0,1fr);gap:8px 28px;padding:16px 0;border-top:1px solid var(--line)}
.does dt{font-weight:650;font-size:15px}
.does dd{margin:0;color:var(--muted)}

/* The seven problems: a plain ledger, problem then answer */
.plede{color:var(--muted);margin:0 0 10px}
.prow{padding:18px 0;border-top:1px solid var(--line)}
.prow h3{margin:0 0 6px;font-size:16px;font-weight:650;letter-spacing:-.01em}
.prow p{margin:0;color:var(--muted)}
.honest{margin-top:22px;padding:14px 18px;border-left:3px solid var(--accent);color:var(--ink);background:var(--accent-soft);border-radius:0 10px 10px 0}

/* Private sharing steps reuse the app's numbered style */
main.about .steps{max-width:68ch}
main.about .steps code{font:13px var(--mono);background:var(--field);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

.freebie p{margin:0 0 12px}

/* Legal pages share this layout */
main.legal section{margin-bottom:34px}
.legalh1{margin:12px 0 14px;font-size:clamp(28px,4vw,38px);line-height:1.08;font-weight:650;letter-spacing:-.02em}
main.legal h2{font-size:18px}
main.legal p{color:var(--muted)}
main.legal .lede{color:var(--ink)}
main.legal a{color:var(--ink)}

.afoot{max-width:880px;margin:0 auto;padding:22px 24px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.afoot p{margin:0 0 6px}
.afoot a{color:var(--muted)}

@media (max-width:680px){
  .does>div{grid-template-columns:1fr;gap:4px}
  .ahero{gap:24px}
}