/* ===================================================================
   Remembly Help Center — shared styles
   Ported from the Claude Design "Remembly Help Center / Category / Article"
   screens into plain static CSS that matches the landing site.
   =================================================================== */

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:#ffffff; color:#20233a;
  font-family:'Outfit',system-ui,-apple-system,sans-serif; }
a{ color:inherit }
img{ max-width:100% }

/* ---- app icon (scales with the width/height set on the element) ---- */
.hcic{ position:relative; border-radius:30%; overflow:hidden; flex:none; display:inline-block;
  background:linear-gradient(140deg,#2400ff,#0a73ff); box-shadow:0 8px 18px rgba(36,0,255,.34); }
.hcic .b{ position:absolute; left:24%; top:22%; width:41%; height:52%; border-radius:10%;
  background:#ffbf00; transform:rotate(-12deg); }
.hcic .f{ position:absolute; left:31%; top:24%; width:41%; height:52%; border-radius:10%;
  background:#fff; transform:rotate(7deg); display:flex; flex-direction:column; justify-content:center;
  gap:9%; padding:0 16%; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.hcic .f i{ display:block; height:9%; border-radius:2px; }
.hcic .f i:nth-child(1){ width:100%; background:#2400ff; }
.hcic .f i:nth-child(2){ width:66%; background:#9db4ff; }
.hcic .f i:nth-child(3){ width:83%; background:#9db4ff; }

.hc-page{ min-height:100vh; background:#ffffff; padding:0 0 70px; }
.hc-wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }

/* ---- nav ---- */
.hc-nav{ max-width:1180px; margin:0 auto; padding:26px 40px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hc-brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:#20233a; }
.hc-brand .name{ font-size:26px; font-weight:800; letter-spacing:-.8px; color:#20233a; }
.hc-brand .tag{ font-size:13px; font-weight:600; color:#9aa0b8;
  border-left:1px solid #e4e8f6; padding-left:13px; margin-left:3px; }
.hc-navlinks{ display:flex; align-items:center; gap:24px; }
.hc-navlinks .nl{ font-size:15px; font-weight:500; color:#6b6f86; text-decoration:none; transition:color .15s; }
.hc-navlinks .nl:hover{ color:#2400ff; }
.hc-contact{ display:inline-flex; align-items:center; gap:8px; background:#f3f5fc; border:1px solid #e9ecf7;
  color:#2f3450; font-weight:600; font-size:15px; padding:9px 18px; border-radius:999px; text-decoration:none;
  transition:border-color .15s, background .15s; }
.hc-contact:hover{ border-color:#c9d6ff; background:#eef3ff; }
.hc-login{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#2400ff,#007eff); color:#fff;
  font-weight:600; font-size:15px; padding:9px 18px; border-radius:999px; text-decoration:none;
  box-shadow:0 10px 24px rgba(36,0,255,.3); transition:transform .15s, box-shadow .15s; }
.hc-login:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(36,0,255,.4); }

/* ---- section headings ---- */
.hc-h2{ font-size:26px; font-weight:800; letter-spacing:-.7px; color:#191c30; margin:0; }
.hc-sechead{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
.hc-sechead .meta{ font-size:14px; font-weight:600; color:#9aa0b8; }
.hc-sechead .link{ font-size:14px; font-weight:600; color:#2400ff; text-decoration:none; }

/* ---- breadcrumb ---- */
.hc-crumb{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:#9aa0b8;
  margin-top:24px; flex-wrap:wrap; }
.hc-crumb a{ color:#6b6f86; text-decoration:none; }
.hc-crumb a:hover{ color:#2400ff; }
.hc-crumb .here{ color:#20233a; font-weight:600; }

/* ---- cards ---- */
.hc-catgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hc-catcard{ display:block; background:#fff; border:1px solid #eaedf7; border-radius:20px; padding:26px;
  text-decoration:none; box-shadow:0 12px 30px rgba(20,30,80,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.hc-catcard:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(20,30,80,.11); border-color:#d9e3ff; }
.hc-cattile{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.hc-cattitle{ font-size:18px; font-weight:700; color:#20233a; }
.hc-catdesc{ font-size:14.5px; line-height:1.5; color:#6b6f86; margin-top:7px; }
.hc-catmore{ display:flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:600; color:#2400ff; }

.hc-artgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.hc-artrow{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #eef1f9;
  border-radius:16px; padding:17px 20px; text-decoration:none; transition:border-color .16s ease, background .16s ease; }
.hc-artrow:hover{ border-color:#c9d6ff; background:#fbfcff; }
.hc-arttile{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; }
.hc-arttitle{ font-size:15.5px; font-weight:600; color:#2f3450; line-height:1.3; }
.hc-artmeta{ font-size:12.5px; color:#a0a3ba; margin-top:2px; }

/* ---- FAQ ---- */
.hc-faq{ background:#fff; border:1px solid #eef1f9; border-radius:16px; box-shadow:0 8px 22px rgba(20,30,80,.04); overflow:hidden; transition:border-color .16s ease; }
.hc-faq.open{ border-color:#c9d6ff; }
.hc-faq > button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  text-align:left; cursor:pointer; border:none; background:transparent; font-family:'Outfit',sans-serif; padding:19px 22px; }
.hc-faq .q{ font-size:16px; font-weight:600; color:#20233a; }
.hc-faq .chev{ width:28px; height:28px; flex:none; border-radius:9px; background:#f3f5fc;
  display:flex; align-items:center; justify-content:center; transition:background .16s ease, transform .2s ease; }
.hc-faq.open .chev{ background:#eef3ff; transform:rotate(180deg); }
.hc-faq .a{ padding:0 22px 20px; font-size:14.5px; line-height:1.6; color:#5b6079; display:none; }
.hc-faq.open .a{ display:block; }

/* ---- footer ---- */
.hc-foot{ max-width:1180px; margin:56px auto 0; padding:26px 40px 0; border-top:1px solid #eef1f9;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.hc-foot .copy{ display:flex; align-items:center; gap:11px; font-size:14px; color:#9aa0b8; font-weight:500; }
.hc-footlinks{ display:flex; align-items:center; gap:22px; }
.hc-footlinks a{ font-size:14px; color:#6b6f86; text-decoration:none; font-weight:500; transition:color .15s; }
.hc-footlinks a:hover{ color:#2400ff; }
.hc-back{ font-size:14px; color:#2400ff; text-decoration:none; font-weight:600; }

/* ---- responsive ---- */
@media (max-width: 900px){
  .hc-wrap{ padding:0 24px; }
  .hc-nav{ padding:22px 24px 0; }
  .hc-foot{ padding:26px 24px 0; }
  .hc-catgrid{ grid-template-columns:1fr 1fr; }
  .hc-artgrid{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .hc-navlinks{ gap:12px; }
  .hc-navlinks .nl{ display:none; }
  .hc-brand .tag{ display:none; }
  .hc-catgrid{ grid-template-columns:1fr; }
  .hc-hero-h{ font-size:34px !important; }
  .hc-hero-pad{ padding:34px 24px !important; }
}
@media (max-width: 460px){
  .hc-navlinks .hc-contact{ display:none; }
}