/* www.mericome.com – one stylesheet for every page (built by webmericome/build.py).
   The design comes from the MindSecure and Articles pages: Ubuntu Sans headings, Helvetica for longer text,
   a dark photo hero, white cards with soft shadows, black pill buttons that turn green on hover. */
/* Ubuntu Sans (Canonical, Ubuntu Font Licence, see fonts/LICENCE.txt) comes from our own server, so no page
   contacts a font service. Its semi-bold stands in for bold, which keeps the headings light and friendly.
   If a font file is ever replaced, give it a new name: fonts are cached for a year. */
@font-face { font-family:'Ubuntu Sans'; font-style:normal; font-weight:400; font-display:swap;
    src:url(fonts/ubuntusans-regular.woff2) format('woff2'); }
@font-face { font-family:'Ubuntu Sans'; font-style:normal; font-weight:700; font-display:swap;
    src:url(fonts/ubuntusans-semibold.woff2) format('woff2'); }
:root { --ink:#000; --title:#383838; --text:#333; --muted:#666; --hover:#3cb878; --teal:#2fbfb6;
        --band:#f6f8f8; --line:#e6e6e6; --body:'Helvetica Neue',Helvetica,Arial,sans-serif;
        --head:'Ubuntu Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:64px; }
body { margin:0; background:#fff; color:var(--ink); font-family:var(--head); }
img { max-width:100%; }
[hidden] { display:none !important; }

/* ---------- menu bar */
.topbar { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line); }
.topbar .in { max-width:1200px; margin:0 auto; padding:8px 20px; display:flex; align-items:center;
    justify-content:space-between; gap:12px; }
.menu { display:flex; flex-wrap:wrap; gap:2px 6px; margin:0; padding:0; list-style:none; }
.menu a { display:block; padding:10px 10px; color:#000; text-decoration:none; font-size:16px; border-radius:20px; }
.menu a:hover, .menu a:focus { background:#f1f1f1; }
.menu a.current { font-weight:700; }
.has-sub { position:relative; }
.has-sub > a::after { content:""; display:inline-block; border:4px solid transparent; border-top-color:#555;
    margin:0 0 -2px 6px; }
.sub { display:none; position:absolute; left:0; top:100%; margin:0; padding:6px; list-style:none; background:#fff;
    border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:140px; z-index:11; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display:block; }
.sub a { border-radius:8px; font-size:15px; }
.lang { position:relative; flex:none; }
.lang summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; padding:8px 10px;
    border-radius:20px; font-size:14px; }
.lang summary::-webkit-details-marker { display:none; }
.lang summary:hover { background:#f1f1f1; }
.lang summary::after { content:""; border:5px solid transparent; border-top-color:#555; margin-top:5px; }
.flag { width:24px; height:16px; display:inline-block; border-radius:2px; overflow:hidden;
    box-shadow:0 0 0 1px rgba(0,0,0,.12); flex:none; }
.flag svg { width:100%; height:100%; display:block; }
.lang ul { position:absolute; right:0; top:calc(100% + 4px); margin:0; padding:6px; list-style:none; background:#fff;
    border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:180px; }
.lang li a { display:flex; align-items:center; gap:10px; padding:9px 10px; color:#000; text-decoration:none;
    border-radius:8px; font-size:15px; }
.lang li a:hover { background:#f1f1f1; }
.lang li a[aria-current] { font-weight:700; }

/* ---------- hero */
.hero { position:relative; min-height:400px; background:#000; display:flex; justify-content:center; align-items:center; }
.hero::before { content:""; position:absolute; inset:0; opacity:.4; background:var(--hero) center/cover fixed; }
.hero.small { min-height:260px; }
.hero .inner { position:relative; width:100%; max-width:1200px; padding:60px 20px; }
.hero h1 { margin:10px; font:700 27px/32px var(--head); color:#fff; }
.hero p { margin:10px; font:400 18px/26px var(--head); color:#fff; max-width:760px; }

/* ---------- buttons, shared text */
.button { display:inline-block; margin:10px 0 30px; padding:20px 40px; border-radius:50px; background:#000; color:#fff;
    font:700 20px/20px var(--head); text-decoration:none; border:0; cursor:pointer; }
.button:hover { background:var(--hover); }
.button.light { background:#fff; color:#000; box-shadow:inset 0 0 0 2px #000; }
.button.light:hover { background:var(--hover); color:#fff; box-shadow:none; }
.note { font-family:var(--body); color:var(--text); font-size:14px; line-height:20px; margin:0 0 20px; }
.center { text-align:center; }

/* ---------- company pages: sections */
.block { max-width:1200px; margin:0 auto; padding:60px 20px; }
.band { background:var(--band); }
.band.waves { background:var(--band) var(--bg) center/cover; }
.block > h2 { margin:0 0 12px; text-align:center; font:700 26px/34px var(--head); color:var(--title); }
.lead { font-family:var(--body); color:var(--text); text-align:center; font-size:17px; line-height:26px;
    margin:0 auto 30px; max-width:760px; }
.block > .lead:last-child { margin-bottom:0; }
.tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.tile { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.tile img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.tile .body { padding:20px 24px 24px; }
.tile h3, .card h3, .steps h3 { margin:0 0 10px; font:700 19px/26px var(--head); color:var(--title); }
.tile p, .card p, .steps p { margin:0; font-family:var(--body); color:var(--text); font-size:16px; line-height:24px; }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
    counter-reset:step; }
.steps:has(> li:nth-child(4)) { grid-template-columns:repeat(4, 1fr); }
.steps li { counter-increment:step; background:#fff; border-radius:16px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.steps li::before { content:counter(step); display:block; font:700 40px/1 var(--head); color:var(--teal); margin-bottom:14px; }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; text-align:center; }
.stat { background:rgba(255,255,255,.85); border-radius:16px; padding:26px 12px; }
.stat strong { display:block; font:700 44px/1.1 var(--head); color:var(--title); }
.stat span { display:block; margin-top:8px; font-family:var(--body); color:var(--text); font-size:16px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.split .photo { width:100%; border-radius:16px; display:block; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.split h2 { margin:0 0 12px; font:700 26px/34px var(--head); color:var(--title); }
.split p { font-family:var(--body); color:var(--text); font-size:17px; line-height:26px; margin:0 0 14px; }
.split .button { margin:10px 12px 0 0; }

/* ---------- Apps page */
.app-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:24px; }
.app-card { display:block; background:#fff; border-radius:16px; padding:26px 24px; text-align:center; color:inherit;
    text-decoration:none; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.app-card img { width:120px; height:120px; border-radius:22%; display:block; margin:0 auto 16px; }
.app-card h3 { margin:0 0 8px; font:700 21px/28px var(--head); color:var(--title); }
.app-card p { margin:0 0 14px; font-family:var(--body); color:var(--text); font-size:16px; line-height:24px; }
.app-card:hover .more { color:var(--hover); }

/* ---------- Contacts */
.contact { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:start; }
.contact h2 { margin:0 0 16px; font:700 26px/34px var(--head); color:var(--title); }
.contact h3 { margin:24px 0 6px; font:700 17px/24px var(--head); color:var(--title); }
.contact address, .contact p { font-style:normal; font-family:var(--body); color:var(--text); font-size:17px;
    line-height:26px; margin:0; }
.contact-form { display:grid; gap:16px; }
.contact-form label { display:grid; gap:6px; font:700 15px/20px var(--body); color:var(--title); }
.contact-form input, .contact-form select, .contact-form textarea { font:400 16px/22px var(--body); color:#000;
    padding:12px 14px; border:1px solid #cfd6d6; border-radius:12px; background:#fff; width:100%; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline:2px solid var(--teal);
    border-color:transparent; }
.contact-form .button { justify-self:start; margin:0; padding:16px 36px; font-size:18px; }
.contact-form .button[disabled] { opacity:.5; cursor:default; }
.contact-form .hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-status { margin:0; font-family:var(--body); font-size:16px; line-height:24px; min-height:24px; }
.form-status.ok { color:#1a7f4b; font-weight:700; }
.form-status.bad { color:#b3261e; }

/* ---------- 404 */
.notfound { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.nf h2 { margin:0 0 6px; font:700 19px/26px var(--head); color:var(--title); }
.nf p { margin:0 0 6px; font-family:var(--body); color:var(--text); font-size:15px; line-height:22px; }
.nf a { color:#000; }

/* ---------- app pages (MindSecure, Remembera, …) */
main { max-width:1200px; margin:0 auto; padding:60px 20px; display:flex; justify-content:space-around; align-items:center; gap:20px; }
.icon { width:29.66%; margin:10px; }
.icon img { width:100%; height:auto; border-radius:22%; display:block; }
.text { width:50%; margin:10px; }
.text h2, .text h3 { margin:0 0 20px; font:700 24px/32px var(--head); color:var(--title); }
.text p.normal { font-size:16px; line-height:24px; text-align:center; margin:0 0 20px; }
.legal p, .legal-nav, .meta, .why li, .why .lead, .why .closing { font-family:var(--body); color:var(--text); }
.why { background:var(--band); padding:50px 20px 40px; }
.why .in { max-width:1200px; margin:0 auto; }
.why h2 { margin:0 0 8px; text-align:center; font:700 26px/34px var(--head); color:var(--title); }
.why .lead { text-align:center; font-size:17px; line-height:25px; margin:0 auto 30px; max-width:760px; }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.card { background:#fff; border-radius:16px; padding:22px 24px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.card h3::before { content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--teal);
    margin-bottom:12px; }
.card ul { margin:0; padding-left:18px; }
.why li { font-size:15px; line-height:22px; margin:0 0 8px; }
.why .closing { text-align:center; font-size:17px; line-height:25px; margin:30px auto 0; max-width:760px;
    font-style:italic; }
.legal-nav { font-size:14px; margin:0 0 20px; }
.legal-nav a, .legal a { color:#000; }
.legal h4 { margin:30px 0 8px; font:700 16px/22px var(--body); color:var(--text); }
.legal p { font-size:14px; line-height:20px; margin:0 0 10px; }
.meta { font-size:14px; font-style:italic; margin:0; }
/* Legal texts on an app page fold open on click. */
details.legal { border-bottom:1px solid var(--line); }
details.legal:first-of-type { margin-top:20px; border-top:1px solid var(--line); }
details.legal summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    gap:12px; padding:14px 2px; font:700 16px/22px var(--body); color:var(--text); }
details.legal summary::-webkit-details-marker { display:none; }
details.legal summary::after { content:"+"; font:400 22px/1 var(--body); color:var(--muted); flex:none; }
details.legal[open] summary::after { content:"–"; }
details.legal summary:hover { color:#000; }
details.legal[open] { padding-bottom:12px; }
/* Apps with a separate legal page: a link line under the app page, and the page itself. */
.legal-links { max-width:1200px; margin:0 auto; padding:0 20px 40px; text-align:center; }
.legal-page { max-width:760px; margin:0 auto; padding:40px 20px 30px; }
.legal-page .legal-nav { margin:16px 0 0; }
.legal-row { max-width:1200px; margin:0 auto; padding:40px 20px 40px; display:flex; justify-content:space-around; gap:20px; }
.legal-row .spacer { width:29.66%; margin:0 10px; }

/* ---------- Articles */
.alist { max-width:1000px; margin:0 auto; display:grid; gap:24px; }
.alist.wide { padding:50px 20px 30px; }
.acard { display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:center; background:#fff;
    border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08); color:inherit; text-decoration:none; }
.acard img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:3/2; }
.acard .body { padding:20px 24px 20px 0; }
.tag { display:inline-block; font:700 12px/1 var(--body); letter-spacing:.06em;
    text-transform:uppercase; color:#1a7f79; background:#e6f6f5; padding:6px 10px; border-radius:20px; }
.acard h2 { margin:12px 0 8px; font:700 22px/30px var(--head); color:var(--title); }
.acard p, .date, .article p, .article li, .article .lead, .article .note, .back { font-family:var(--body); color:var(--text); }
.acard p { margin:0 0 12px; font-size:16px; line-height:24px; }
.date { font-size:14px; color:var(--muted); }
.more { font:700 15px/20px var(--head); color:#000; }
.acard:hover .more { color:var(--hover); }
.steps .more { display:inline-block; margin-top:14px; text-decoration:none; }
.steps .more:hover { color:var(--hover); }
.article { max-width:760px; margin:0 auto; padding:40px 20px 30px; }
.article h1 { margin:14px 0 10px; font:700 30px/38px var(--head); color:var(--title); }
.article .figure { margin:24px 0; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.article .figure img { width:100%; height:auto; display:block; }
.article .lead { font-size:19px; line-height:29px; margin:0 0 10px; text-align:left; max-width:none; }
.article h2 { margin:32px 0 10px; font:700 22px/30px var(--head); color:var(--title); }
.article h3 { margin:24px 0 8px; font:700 18px/26px var(--head); color:var(--title); }
.article p, .article li { font-size:17px; line-height:27px; margin:0 0 14px; }
.article .note { font-size:14px; line-height:20px; color:#555; border-top:1px solid var(--line); padding-top:16px;
    margin-top:30px; }
.article .cta { margin:24px 0 0; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.article .cta .button { margin:0; padding:16px 30px; font-size:18px; }
.back { display:inline-block; font-size:15px; color:#000; margin-top:6px; }

/* ---------- footer */
footer { max-width:1200px; margin:0 auto; padding:20px; text-align:right; font-size:16px; line-height:24px; }
footer a { color:#000; }

/* ---------- screen sizes */
@media (min-width:767.5px) { .hero h1 { font-size:48px; line-height:56px; } .hero p { font-size:22px; line-height:30px; } }
@media (min-width:991.5px) { .hero h1 { font-size:60px; line-height:70px; } .text h2, .text h3 { font-size:30px; line-height:40px; } }
@media (min-width:1199.5px) { .hero h1 { font-size:72px; line-height:84px; } }
@media (max-width:1100px) { .steps:has(> li:nth-child(4)) { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:900px) {
  .cards, .tiles, .steps { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .split, .contact { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:767px) {
  main { flex-direction:column; align-items:center; }
  .icon { width:60%; }
  .text { width:100%; }
  .legal-row .spacer { display:none; }
  .block { padding:44px 16px; }
}
@media (max-width:760px) {
  .acard { grid-template-columns:1fr; gap:0; }
  .acard .body { padding:18px 20px 22px; }
  .article h1 { font-size:24px; line-height:32px; }
}
@media (max-width:560px) {
  .steps:has(> li:nth-child(4)) { grid-template-columns:1fr; }
  .topbar .in { padding:6px 10px; align-items:flex-start; }
  .menu a { font-size:14px; padding:8px 7px; }
  .lang summary { padding:7px 6px; }
  .stat strong { font-size:34px; }
}
/* iPhone and iPad ignore fixed backgrounds and blow them up; scroll with the page there. */
@media (hover:none) { .hero::before { background-attachment:scroll; } }