/* ReplyInn v7 — production polish: motion, micro-interactions, new pages */

/* ---------- motion & micro-interactions ---------- */
.btn{position:relative;overflow:hidden;transition:transform .12s ease,box-shadow .2s ease,background-color .2s ease,filter .2s ease}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .6s ease-out;pointer-events:none}
.btn-ghost .ripple{background:rgba(14,124,116,.18)}
@keyframes ripple{to{transform:scale(28);opacity:0}}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading:after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn-ghost.is-loading:after{border-color:rgba(14,124,116,.25);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}
.card{transition:box-shadow .25s ease,transform .25s ease}
.mk .card:hover,.mk .plan:hover,.mk .feature:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.alert{animation:slideIn .35s cubic-bezier(.2,.8,.2,1) both}
.alert.fade-out{opacity:0;transform:translateY(-6px);transition:all .5s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.mk-nav{transition:box-shadow .25s ease,background-color .25s ease}
.mk-nav.scrolled{box-shadow:0 6px 24px -8px rgba(0,0,0,.35)}
.hero{--py:0px}
.hero:before{transform:translateY(var(--py))}
.hero .hero-copy h1{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.hero .hero-copy p,.hero .hero-cta,.hero .hero-note{animation:rise .7s .12s cubic-bezier(.2,.8,.2,1) both}
.hero .hero-demo,.hero .hero-card,.hero .hero-visual{animation:rise .8s .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.pw-meter{display:flex;gap:4px;margin-top:6px;height:4px}
.pw-meter i{flex:1;background:var(--line);border-radius:2px;transition:background .3s}
.pw-meter[data-score="1"] i:nth-child(-n+1){background:var(--err)}
.pw-meter[data-score="2"] i:nth-child(-n+2){background:var(--warn)}
.pw-meter[data-score="3"] i:nth-child(-n+3){background:#7ac142}
.pw-meter[data-score="4"] i{background:var(--ok)}
.donut-center{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:22px;pointer-events:none;color:var(--ink)}
.chart-wrap{position:relative;width:100%}
.chart-wrap canvas{width:100%!important}

/* ---------- marketing footer ---------- */
.mk-foot .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;align-items:start;padding-bottom:28px;border-bottom:1px solid var(--line)}
.mk-foot .foot-grid a{display:block;margin:0 0 8px}
.mk-foot .foot-grid b{display:block;color:var(--ink);margin-bottom:12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.mk-foot .foot-brand p{max-width:320px;line-height:1.55}
.mk-foot .foot-brand .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:4px;vertical-align:middle;box-shadow:0 0 0 3px var(--ok-50)}
.mk-foot .foot-brand .status-dot+a{display:inline;margin:0}
.mk-foot .foot-bottom{display:flex;justify-content:space-between;padding-top:20px;flex-wrap:wrap;gap:10px}
@media (max-width:860px){.mk-foot .foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.mk-foot .foot-grid{grid-template-columns:1fr}}

/* ---------- public pages ---------- */
.prose .lead{font-size:18px;color:var(--ink-2);line-height:1.6;margin-bottom:28px}
.prose .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.prose .card h3{margin:0 0 8px;display:flex;align-items:center;gap:8px}
.prose .tbl{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14.5px}
.prose .tbl th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line)}
.prose .tbl td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.prose .pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;background:var(--brand-50);color:var(--brand-700)}
.prose .pill.ok{background:var(--ok-50);color:var(--ok)}.prose .pill.warn{background:var(--warn-50);color:var(--warn)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
.contact-form{position:relative}
.contact-side .card{margin-bottom:14px}
.prose .field{margin-bottom:14px}.prose .field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.prose .field input,.prose .field select,.prose .field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.prose .field textarea{resize:vertical}
.help .help-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.help .help-toc a{padding:6px 12px;border:1px solid var(--line);border-radius:99px;font-size:13.5px;text-decoration:none;color:var(--ink-2);background:#fff}
.help .help-toc a:hover{border-color:var(--brand);color:var(--brand)}
.help h2{margin:34px 0 10px;font-size:22px}
details.faq{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:8px;overflow:hidden}
details.faq summary{padding:14px 44px 14px 16px;cursor:pointer;font-weight:600;list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";position:absolute;right:16px;top:10px;font-size:22px;color:var(--brand);transition:transform .25s}
details.faq[open] summary:after{transform:rotate(45deg)}
details.faq .faq-a{padding:0 16px 16px;color:var(--ink-2);line-height:1.6;font-size:15px}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:8px 0 28px}
.sec-grid .card p{font-size:14.5px;line-height:1.55;margin:0;color:var(--ink-2)}
.cl-entry{padding:20px 0;border-bottom:1px solid var(--line)}
.cl-entry .cl-meta{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.cl-entry h3{margin:0 0 8px}
.cl-entry ul{margin:0;padding-left:20px;line-height:1.7;color:var(--ink-2)}
.status-hero{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:14px;background:var(--ok-50);border:1px solid #cfead9;margin-bottom:18px;flex-wrap:wrap}
.status-hero.down{background:var(--warn-50);border-color:#f3dcb2}
.status-hero .status-dot{width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(20,128,74,.18);animation:pulse 2s infinite}
.status-hero .status-dot.off{background:var(--warn);box-shadow:0 0 0 4px rgba(161,92,7,.18)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(20,128,74,.35)}70%{box-shadow:0 0 0 8px rgba(20,128,74,0)}100%{box-shadow:0 0 0 0 rgba(20,128,74,0)}}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* ---------- client account centre ---------- */
.acct .card h3{display:flex;align-items:center;gap:8px;margin-top:0}
.acct .hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.acct .card.danger{border-color:#f3c9c4;background:#fffafa}
.acct .btn-danger{background:var(--err);color:#fff}
.acct .inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acct .inline input{flex:1;min-width:160px}
.acct .check{display:flex;gap:10px;align-items:center;font-weight:500}
.acct .pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;background:var(--brand-50);color:var(--brand-700)}
.acct .pill.ok{background:var(--ok-50);color:var(--ok)}.acct .pill.warn{background:var(--warn-50);color:var(--warn)}
.totp-setup{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:start}
.totp-qr{width:180px;height:180px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.totp-qr svg{width:100%;height:100%}
.totp-key{display:inline-block;font-size:13px;background:var(--bg);padding:8px 10px;border-radius:8px;letter-spacing:.08em;word-break:break-all}
input.otp{font-size:22px;letter-spacing:.25em;text-align:center;font-variant-numeric:tabular-nums}
.ok-text{color:var(--ok);font-weight:600;display:flex;gap:6px;align-items:center}
.announce{background:linear-gradient(90deg,var(--brand-50),#fff);border-color:var(--brand-100)}
@media (max-width:640px){.totp-setup{grid-template-columns:1fr}}