/* MECKLY_SEO_PAGES_V1 — shared skin for the keyword pages.
   Same tokens as the homepage (index.html :root) so a visitor who lands on
   a keyword page from Google sees the same Meckly they will see after the
   click to the homepage. Light hero, shades of brand blue only, one dark
   band for weight. Inter and JetBrains Mono only, nothing under 14px. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:root{
  --paper:#F5F9FD; --card:#FFFFFF; --line:#D9E6F2; --sand:#EEF5FB;
  --ink:#0B2238; --ink-3:#2E4458;
  --act:#008FEB; --act-deep:#0077C8; --act-hover:#0068B0; --link:#0070BA;
  --sky:#E6F3FD; --hi:#0067B1;
  --ok:#0F8A55; --no:#C0392B;
  --night:#062A4A; --night-2:#0A3D66;
  --r:16px; --wrap:1120px;
}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55;font-size:17px}
img{display:block;max-width:100%;height:auto}
a{color:var(--link)}
a:hover{color:var(--act-hover)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:14px;border:0;font-size:18px;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:active{transform:scale(.98)}
.btn-go{background:var(--act);color:#fff;box-shadow:0 8px 22px rgba(0,143,235,.32)}
.btn-go:hover{background:var(--act-hover);color:#fff}
.btn-line{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--act-deep)}
.btn-white:hover{background:var(--sky);color:var(--act-hover)}

/* Header. Same three tabs as the homepage. */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1.5px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top-in{height:64px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);margin-right:auto}
.logo img{width:32px;height:32px;border-radius:8px}
.logo span{font-size:20px;font-weight:900;letter-spacing:-.02em}
.top-tabs{display:none;gap:4px;margin-right:auto}
.top-tabs a,.sub-tabs a{font-size:16px;font-weight:800;color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:999px}
.top-tabs a:hover,.sub-tabs a:hover{background:var(--sky)}
.top-login{font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;padding:10px 6px}
.top-go{min-height:44px;padding:0 18px;font-size:15px;border-radius:999px;background:var(--act-deep)}
.sub-tabs{display:flex;justify-content:center;gap:6px;padding:6px 12px;background:#fff;border-bottom:1.5px solid var(--line)}
@media(min-width:760px){.top-tabs{display:flex}.sub-tabs{display:none}.logo{margin-right:0}}

/* Breadcrumb. Small, but it is real text Google reads. */
.crumbs{font-size:14px;color:var(--ink-3);padding:16px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--link)}

/* Hero. Light, never dark. */
.hero{padding:28px 0 48px}
.hero-in{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.hero-in{grid-template-columns:1.05fr .95fr;gap:48px}.hero{padding:40px 0 72px}}
.tag{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--hi);background:var(--sky);border-radius:999px;padding:7px 14px;margin-bottom:16px}
.hero h1{font-size:clamp(38px,7vw,64px);line-height:1.04;font-weight:900;letter-spacing:-.03em;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--act-deep)}
.lede{font-size:clamp(18px,2.4vw,21px);color:var(--ink-3);max-width:34em;margin-bottom:20px}
.nos{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:24px}
.nos li{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px}
.nos svg{color:var(--act)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.fine{font-size:15px;color:var(--ink-3)}
.shot{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:10px;box-shadow:0 18px 48px rgba(6,42,74,.12)}
.shot img{border-radius:12px;width:100%}
.shot figcaption{font-size:15px;color:var(--ink-3);padding:10px 6px 2px}

/* Numbers. Big, blue, measurable. */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 8px}
@media(min-width:760px){.nums{grid-template-columns:repeat(4,1fr)}}
.num{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:18px}
.num b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(30px,4.5vw,40px);font-weight:700;color:var(--act-deep);line-height:1.1}
.num span{font-size:15px;font-weight:700;color:var(--ink-3)}

section.band{padding:56px 0}
section.band.alt{background:var(--sand)}
section.band h2{font-size:clamp(30px,4.6vw,42px);line-height:1.1;font-weight:900;letter-spacing:-.02em;margin-bottom:26px}

/* Steps */
.steps{list-style:none;display:grid;gap:14px;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(var(--n,3),1fr)}}
.steps li{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:20px;counter-increment:s}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--act);color:#fff;font-weight:900;font-size:19px;margin-bottom:12px}
.steps b{display:block;font-size:19px;margin-bottom:4px}
.steps p{color:var(--ink-3);font-size:16px}

/* Feature cards */
.cards{display:grid;gap:14px}
@media(min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1.5px solid var(--line);border-left:5px solid var(--act);border-radius:var(--r);padding:20px}
.card h3{font-size:20px;line-height:1.25;margin-bottom:6px}
.card p{color:var(--ink-3);font-size:16px}

/* Before and after table */
.vs{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:16px}
.vs th,.vs td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.vs tr:last-child td{border-bottom:0}
.vs thead th{background:var(--night);color:#fff;font-size:15px;letter-spacing:.03em;text-transform:uppercase}
.vs td:first-child{font-weight:800}
.vs td.old{color:var(--no)}
.vs td.new{color:var(--ok);font-weight:700}
.vs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:0 20px}
.faq summary{cursor:pointer;list-style:none;font-weight:800;font-size:18px;padding:18px 28px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:26px;color:var(--act)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--ink-3);padding:0 0 18px;font-size:16px}

/* Related pages */
.rel{display:grid;gap:12px}
@media(min-width:760px){.rel{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rel{grid-template-columns:repeat(4,1fr)}}
.rel a{display:block;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);font-weight:800;font-size:17px}
.rel a span{display:block;font-weight:600;font-size:15px;color:var(--ink-3);margin-top:4px}
.rel a:hover{border-color:var(--act)}

/* Dark band. The one place the page goes deep blue. */
.close{background:var(--night);color:#fff;padding:60px 0;text-align:center}
.close h2{font-size:clamp(32px,5vw,46px);font-weight:900;letter-spacing:-.02em;margin-bottom:14px}
.close p{font-size:19px;color:#CFE6F8;margin:0 auto 24px;max-width:32em}

/* Pricing cards (pricing page only) */
.plans{display:grid;gap:14px}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:24px}
.plan.pick{border:2.5px solid var(--act)}
.plan h3{font-size:24px;margin-bottom:2px}
.plan .size{font-size:15px;color:var(--ink-3);font-weight:700;margin-bottom:12px}
.plan .price{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:44px;font-weight:700;color:var(--act-deep);line-height:1}
.plan .per{font-size:15px;color:var(--ink-3);margin:4px 0 16px}
.plan ul{list-style:none;display:grid;gap:8px;font-size:16px;margin-bottom:20px}
.plan li::before{content:"\2713  ";color:var(--ok);font-weight:900}

/* Footer with the keyword page index. */
.foot{background:#fff;border-top:1.5px solid var(--line);padding:36px 0 40px}
.foot h2{font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:12px}
.foot-links{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px;margin-bottom:26px;list-style:none}
@media(min-width:760px){.foot-links{grid-template-columns:repeat(4,1fr)}}
.foot-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.foot-links a:hover{color:var(--link)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;margin-bottom:10px}
.foot nav a{color:var(--ink);text-decoration:none;font-weight:600}
.foot small{font-size:14px;color:var(--ink-3)}