/* v354: the description pages mycarmemory.com/hu/, /en/ … (seo_pages.py); the look of the start page, without JavaScript. */
:root{--ink:#111722;--muted:#5d6878;--blue:#0064e8;--page:#eef1f5;--card:#fff;--line:#dde3eb;--dark:#0b1622;--dark2:#16314f}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic",sans-serif}
a{color:var(--blue)}
img{max-width:100%}
.top,main,footer{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:19px}
.brand img{border-radius:9px;display:block}
.top-actions{display:flex;align-items:center;gap:10px}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:15px;white-space:nowrap}
.lang summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:5;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px #0b162226;min-width:170px;max-height:70vh;overflow:auto}
.lang li a{display:block;padding:7px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:15px}
.lang li a:hover,.lang li a[aria-current]{background:#e8f0fd;color:var(--blue)}
.button{display:inline-block;padding:13px 22px;border-radius:14px;background:var(--blue);color:#fff;text-decoration:none;font-weight:700}
.button.small{padding:8px 14px;border-radius:999px;font-size:15px}
.hero{display:grid;gap:24px;align-items:center;padding:30px 22px;border-radius:24px;background:linear-gradient(160deg,var(--dark),var(--dark2));color:#fff}
.hero .logo{display:block;border-radius:18px;margin-bottom:12px}
.hero h1{margin:0 0 10px;font-size:clamp(28px,4.4vw,44px);line-height:1.12;letter-spacing:-.6px}
.hero .lead{font-size:21px;font-weight:700;margin:0 0 14px}
.hero p{margin:0 0 10px;color:#dce6f2}
.hero .button{margin-top:6px}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 12px}
.badges img{display:block;height:44px;width:auto}
.shot{margin:0;justify-self:center;width:100%;max-width:260px;padding:9px;border-radius:36px;background:linear-gradient(145deg,#1d2733,var(--dark));box-shadow:0 22px 56px #0b162236,inset 0 0 0 2px #39495c}
.shot img{display:block;width:100%;height:auto;border-radius:27px}
.block{margin:22px 0;padding:24px 22px;border-radius:22px;background:var(--card);box-shadow:0 1px 2px #0b16220f}
.block h2{margin:0 0 12px;font-size:clamp(22px,3vw,28px);line-height:1.2}
.block p{margin:0 0 10px}
.block p:last-child{margin-bottom:0}
.with-shot{display:grid;gap:22px;align-items:center}
.why{background:#e8f0fd;box-shadow:none}
.faq .qa{padding:14px 0;border-top:1px solid var(--line)}
.faq .qa:first-of-type{border-top:0;padding-top:4px}
.faq h3{margin:0 0 6px;font-size:18px}
.final{margin:22px 0;padding:30px 22px;border-radius:24px;text-align:center;background:linear-gradient(160deg,var(--dark),var(--dark2));color:#fff}
.final img{border-radius:16px}
.final .cta{font-size:22px;font-weight:800;margin:10px 0 6px}
.final p{margin:0 0 8px;color:#dce6f2}
.final .badges{justify-content:center}
footer{padding-top:8px;padding-bottom:40px;color:var(--muted);font-size:15px}
footer h2{font-size:16px;margin:0 0 10px;color:var(--ink)}
.languages{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 16px;padding:0;list-style:none}
.languages a{color:var(--muted)}
.languages a[aria-current]{color:var(--ink);font-weight:700;text-decoration:none}
.links a{color:var(--muted)}
@media (min-width:860px){
 .hero{grid-template-columns:1fr 280px;padding:44px 48px}
 .with-shot{grid-template-columns:1fr 240px;padding:30px 36px}
 .with-shot.flip{grid-template-columns:240px 1fr}
 .with-shot.flip .shot{order:-1}
 .block{padding:30px 36px}
}
@media (max-width:520px){
 body{font-size:16px}
 .brand span{display:none}
 .hero{padding:24px 18px}
 .block{padding:20px 18px}
 .shot{max-width:230px}
}
[dir=rtl] .hero h1{letter-spacing:0}