/* ARLI — one style for every public page.
   The palette is taken from the home page, which is the reference. Green is the mark, orange is
   the accent, and nothing else is invented per page: a visitor who moves between our pages must
   not feel they changed company. */

:root{
  --paper:#f4f8ef;
  --tint:#e9f1e0;
  --card:#ffffff;
  --ink:#16220f;
  --ink-soft:#546850;
  --ink-faint:#84977a;
  --rule:#d5e0ca;
  --rule-strong:#bccdae;
  --green:#1f7a3a;
  --green-deep:#114f24;
  --green-wash:#edf6e6;
  --orange:#e8722c;
  --red:#a32626;
  --red-wash:#fdf3f2;
  --amber:#8a6d1f;
  --amber-wash:#fbf6e6;
  --font:'Instrument Sans',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.7 var(--font);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green-deep);text-decoration:none}
a:hover{color:var(--green);text-decoration:underline}
code{font-family:var(--mono);font-size:.92em;background:var(--tint);border-radius:5px;padding:1px 5px}

/* ---- page frame ---- */
.wrap{max-width:900px;margin:0 auto;padding:34px 20px 80px}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{font-family:var(--display);font-weight:800;letter-spacing:.16em;font-size:15px;color:var(--green-deep)}
.top a{font-size:14.5px;color:var(--ink-soft)}
.top a:hover{color:var(--green)}
.home{font-size:14.5px}

/* ---- type ---- */
h1{font-family:var(--display);font-size:30px;line-height:1.18;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
h2{font-family:var(--display);font-size:19px;letter-spacing:-.01em;margin:38px 0 6px;color:var(--ink)}
h3{font-family:var(--display);font-size:16px;margin:24px 0 6px}
p{margin:9px 0}
.sub{color:var(--ink-soft);font-size:16.5px;max-width:66ch;margin-bottom:10px}
.lead{color:var(--ink-soft);font-size:17px;max-width:66ch}
.cap{color:var(--ink-faint);font-size:13.5px;margin:0 0 12px;max-width:70ch}
.muted{color:var(--ink-faint);font-size:13.5px}
.note{border-left:3px solid var(--green);padding:2px 0 2px 14px;color:var(--ink-soft);margin:16px 0}
.ok{color:var(--green-deep);font-weight:600}
.err{color:var(--red)}
.test{border:1px solid #e3d3a0;background:var(--amber-wash);color:var(--amber);border-radius:var(--radius);padding:10px 13px;font-size:13.5px;margin:0 0 22px}
.banner{border:1px solid var(--rule);background:var(--green-wash);border-radius:var(--radius);padding:12px 15px;font-size:14px;margin:0 0 22px}

/* ---- grid of plans ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin-top:8px}
.plan{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column}
.plan.first{border-color:var(--rule-strong);box-shadow:0 1px 0 var(--rule-strong)}
.plan.big{border-color:var(--rule-strong)}
.plan .nm{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint)}
.plan .pr{font-family:var(--mono);font-size:19px;font-weight:700;margin:6px 0 2px;color:var(--green-deep)}
.plan .per{font-size:12px;color:var(--ink-faint);font-weight:400}
.plan ul{margin:8px 0 12px;padding-left:18px;color:var(--ink-soft);font-size:13.5px}
.plan li{margin:3px 0}
.plan .buy{margin-top:auto}
.options{margin:8px 0 0;padding-left:18px;color:var(--ink-soft);font-size:13.5px}

/* ---- cards, tables ---- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;margin:12px 0}
table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
th,td{text-align:left;border-bottom:1px solid var(--rule);padding:8px 6px;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:600}
td.n{font-family:var(--mono);white-space:nowrap;color:var(--green-deep);font-weight:600}
.post{border-bottom:1px solid var(--rule);padding:16px 0}
.faq{border-top:1px solid var(--rule);padding:14px 0}

/* ---- buttons ---- */
.btn{display:inline-block;border:1px solid var(--green-deep);background:var(--green-deep);color:#fff;border-radius:9px;padding:10px 18px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none}
.btn:hover{background:var(--green);border-color:var(--green);color:#fff;text-decoration:none}
.btn.ghost{background:transparent;color:var(--green-deep)}
.btn.ghost:hover{background:var(--green-wash);color:var(--green-deep)}
.btn[disabled]{opacity:.45;cursor:default}
.buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- inputs ---- */
input[type=email],input[type=text]{border:1px solid var(--rule-strong);background:var(--card);border-radius:9px;padding:10px 12px;font-size:14.5px;font-family:inherit;color:var(--ink);min-width:230px}
input:focus{outline:2px solid var(--green-wash);border-color:var(--green)}
code.key{display:block;font-family:var(--mono);font-size:13px;background:var(--tint);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;margin:10px 0;word-break:break-all}

/* ---- waiting spinner ---- */
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--rule);border-top-color:var(--green);border-radius:50%;animation:arli-sp .9s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes arli-sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}

footer{border-top:1px solid var(--rule);margin-top:34px;padding-top:16px;color:var(--ink-faint);font-size:13px}

/* ---- shared top bar (reader and article pages) ---- */
.bar{display:flex;align-items:center;gap:14px;max-width:900px;margin:0 auto;padding:18px 20px;border-bottom:1px solid var(--rule)}
.brand{font-family:var(--display);font-weight:800;letter-spacing:.16em;font-size:15px;color:var(--green-deep);text-decoration:none}
.bar span{color:var(--ink-faint);font-size:14px}
.bar nav{margin-left:auto}
.bar nav a{color:var(--green-deep);font-size:14.5px;font-weight:600}
.ribbon{background:var(--green-wash);border:1px solid var(--rule);border-radius:var(--radius);padding:12px 14px;font-size:14px;margin:0 0 22px}
.price{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--green-deep);letter-spacing:-.02em}