/* MrKeyword marketing pages (about, pricing, features, free tools, faq, security, contact, 404, legal).
   Loaded after ui.css (fonts + --rf-* tokens) and marketing.css, which owns the shared design system:
   the colour tokens, the buttons, the header and footer, the product mock kit (.mkm-*) and the
   alternating feature rows. This file only adds the page-level furniture those pages need, and is
   scoped to .mk-landing so it can never affect the signed-in app shell. */

/* Marketing pages don't load app.css (65 KB of signed-in UI), so the few resets it provides live here. */
*{box-sizing:border-box}
body{margin:0;background:#fff}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit}
.mk-skip{position:absolute;left:-9999px;z-index:50;padding:12px 18px;border-radius:0 0 10px 0;background:#15171c;color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.mk-skip:focus{left:0}
.mk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.mk-landing .mk-page{display:block}
.mk-landing :is(.mk-black-button,.mk-outline-button,.mk-white-button){text-decoration:none}
/* Inline links in the page furniture. Without this they fall back to the browser's blue, which is the
   one colour this design system does not use anywhere. */
.mk-landing :is(.mk-numbered,.mk-limits,.mk-client,.mk-section-head,.mk-step,.mk-ask-head) a{color:var(--indigo);text-underline-offset:3px}

/* ------------------------------------------------------------ page hero */
/* The approved home page opens on a soft lavender/mint ribbon. Every inner page gets the same one,
   drawn with a pseudo-element so the generated markup and the CSP stay exactly as they were. */
.mk-page-top{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.mk-page-top::before{position:absolute;top:-52%;right:-14%;width:min(64vw,1180px);aspect-ratio:1.2;border-radius:0 50% 0 56%;background:linear-gradient(125deg,rgba(236,233,255,.95) 0%,rgba(220,246,238,.9) 34%,rgba(243,239,255,.96) 60%,rgba(255,255,255,0) 88%);box-shadow:inset 40px 0 70px rgba(255,255,255,.95);transform:rotate(-24deg);content:"";pointer-events:none}
.mk-page-top>*{position:relative;z-index:1}
.mk-page-hero{display:grid;gap:clamp(30px,3.6vw,72px);align-items:center;padding-block:clamp(30px,3.2vw,60px) clamp(44px,4.6vw,88px)}
.mk-page-hero.has-mock{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.mk-page-head{display:grid;gap:clamp(13px,1.2vw,19px);max-width:780px;min-width:0}
.mk-page-head h1{margin:0;font-size:clamp(34px,3.7vw,60px);font-weight:700;line-height:1.06;letter-spacing:-.035em}
.mk-page-head .mk-lead{max-width:34em;margin:0;color:var(--muted);font-size:clamp(16.5px,1.28vw,21px);line-height:1.55}
.mk-page-head .mk-lead a{color:var(--indigo);text-underline-offset:3px}
.mk-page-head .mk-lead code{padding:2px 7px;border-radius:6px;background:var(--soft-bg);color:var(--ink);font-size:.86em;overflow-wrap:anywhere}
.mk-page-visual{min-width:0}
.mk-page-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(6px,.8vw,12px)}

/* Breadcrumbs */
.mk-crumbs{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:clamp(12px,1.4vw,20px);color:var(--soft);font-size:13.5px}
.mk-crumbs a{color:var(--soft);text-decoration:none}
.mk-crumbs a:hover{color:var(--ink)}
.mk-crumbs span[aria-current]{color:var(--ink);font-weight:550}
.mk-crumbs li{list-style:none}
.mk-crumbs ol{display:contents;margin:0;padding:0}
.mk-crumbs .sep{color:#cfcfca}

/* -------------------------------------------------------------- rhythm */
.mk-section{padding-block:clamp(48px,5vw,96px)}
.mk-section.tight{padding-block:clamp(32px,3.2vw,60px)}
.mk-section>.mk-section-head{margin-bottom:clamp(30px,3.2vw,56px)}

/* Long-form copy */
.mk-prose{display:grid;gap:clamp(16px,1.4vw,24px);max-width:44em}
.mk-prose.wide{max-width:60em}
.mk-prose h2{margin:clamp(12px,1.2vw,20px) 0 0;font-size:clamp(25px,2.1vw,38px);font-weight:700;line-height:1.14;letter-spacing:-.03em}
.mk-prose h3{margin:clamp(8px,.9vw,14px) 0 0;font-size:clamp(18.5px,1.3vw,22px);font-weight:650;letter-spacing:-.02em}
.mk-prose p{margin:0;color:var(--text);font-size:clamp(16px,1.1vw,18px);line-height:1.66}
.mk-prose ul,.mk-prose ol{display:grid;gap:10px;margin:0;padding-left:1.2em;color:var(--text);font-size:clamp(16px,1.1vw,18px);line-height:1.6}
.mk-prose a{color:var(--indigo);text-underline-offset:3px}
.mk-prose strong{font-weight:650}

/* ---------------------------------------------------------- card grids */
.mk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,1.4vw,24px)}
.mk-cards.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.mk-cards.one{grid-template-columns:1fr}
.mk-card{display:grid;align-content:start;gap:11px;padding:clamp(20px,1.8vw,30px);border:1px solid var(--line);border-radius:18px;background:#fff}
.mk-card .mk-icon{margin-bottom:3px}
.mk-card .mk-chip{justify-self:start}
.mk-card h3{margin:0;font-size:clamp(17.5px,1.25vw,21px);font-weight:650;letter-spacing:-.022em}
.mk-card p{margin:0;color:var(--muted);font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.55}
.mk-card p+p{margin-top:2px}
.mk-card a{color:var(--indigo)}
.mk-card .mk-card-link{display:inline-flex;align-items:center;gap:7px;margin-top:4px;color:var(--ink);font-size:14.5px;font-weight:600;text-decoration:none}
.mk-card .mk-card-link svg{width:16px;height:16px;transition:transform .18s}
.mk-card .mk-card-link:hover{text-decoration:underline;text-underline-offset:3px}
.mk-card .mk-card-link:hover svg{transform:translateX(3px)}
.mk-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none;color:var(--text);font-size:clamp(14.5px,1.02vw,16px);line-height:1.5}
.mk-card li{display:flex;gap:9px}
.mk-card li::before{flex:none;color:var(--green);font-weight:700;content:"✓"}
/* A card whose list is things that are NOT true must not tick them. */
.mk-card.refuted li::before{color:var(--muted);font-weight:600;content:"×"}
/* A card laid out as a row: icon tile beside the copy (the contact page aside). */
.mk-card.row{grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.mk-card.row>div{display:grid;gap:7px}

/* Numbered list (principles, how they fit together) */
.mk-numbered{display:grid;max-width:62em;gap:clamp(16px,1.6vw,26px);counter-reset:mk-step;margin:0;padding:0;list-style:none}
.mk-numbered li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px clamp(14px,1.3vw,22px)}
.mk-numbered li::before{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-size:14.5px;font-weight:600;counter-increment:mk-step;content:counter(mk-step)}
.mk-numbered h3{margin:0;font-size:clamp(17.5px,1.22vw,20px);font-weight:650;letter-spacing:-.02em}
.mk-numbered p{margin:0;color:var(--muted);font-size:clamp(15.5px,1.04vw,17px);line-height:1.6}

/* ------------------------------------------- "How the numbers are made" */
.mk-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(20px,2.2vw,40px)}
@media(min-width:1000px){.mk-notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-note-item{display:grid;align-content:start;gap:9px}
.mk-note-item h3{margin:4px 0 0;font-size:clamp(16.5px,1.15vw,19px);font-weight:650;letter-spacing:-.018em}
.mk-note-item p{margin:0;color:var(--muted);font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.6}
.mk-note-item code{padding:1px 5px;border-radius:5px;background:#fff;font-size:.92em}

/* ------------------------------------------------------- scope panel */
.mk-limits-wrap{padding-block:clamp(10px,1vw,20px) clamp(48px,5vw,96px)}
.mk-limits{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3vw,64px);padding:clamp(26px,2.6vw,48px);border-radius:22px;background:var(--soft-bg)}
.mk-limits-head{display:grid;align-content:start;gap:12px}
.mk-limits-head h2{margin:0;font-size:clamp(24px,2vw,36px);font-weight:700;line-height:1.12;letter-spacing:-.03em}
.mk-limits-head p{margin:0;color:var(--muted);font-size:clamp(15.5px,1.08vw,17.5px);line-height:1.6}
.mk-limits ul{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.mk-limits li{display:flex;gap:13px;color:var(--text);font-size:clamp(15px,1.05vw,17px);line-height:1.55}
.mk-limits li svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--soft)}
.mk-limits strong{color:var(--ink);font-weight:650}

/* ----------------------------------------------- comparison / data tables */
/* contain:paint keeps the wide table's overflow inside its own scroller — without it the page itself
   picks up a horizontal scrollbar on a phone. */
.mk-table-scroll{overflow-x:auto;contain:paint;border:1px solid var(--line);border-radius:18px;background:#fff}
.mk-table{width:100%;min-width:680px;border-collapse:collapse;font-size:clamp(14.5px,1vw,15.5px)}
.mk-table caption{padding:clamp(16px,1.4vw,24px) clamp(16px,1.4vw,24px) 0;color:var(--muted);font-size:14px;text-align:left}
.mk-table th,.mk-table td{padding:13px clamp(14px,1.2vw,22px);border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.mk-table thead th{color:var(--ink);font-size:14px;font-weight:650;white-space:nowrap}
.mk-table tbody th{color:var(--text);font-weight:500}
.mk-table td{color:var(--text)}
.mk-table tbody tr:last-child :is(th,td){border-bottom:0}
.mk-table th[scope="row"]{width:34%}
.mk-table .num{font-variant-numeric:tabular-nums}
.mk-table .yes svg{display:block;width:19px;height:19px;color:var(--green)}
.mk-table .no{color:var(--soft)}
/* On a phone the table scrolls sideways, so the row label has to stay put. */
@media(max-width:760px){
  .mk-table th[scope="row"]{position:sticky;left:0;z-index:1;width:46%;background:#fff;box-shadow:1px 0 0 var(--hair)}
}

/* ------------------------------------------- developer reference (/developers) */
.mk-clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(14px,1.4vw,24px);align-items:start}
/* Two across, with the longest snippet on its own full-width row, so no command has to be
   read through a 400px horizontal scroller. */
@media(min-width:1000px){.mk-clients{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-client:last-child{grid-column:1/-1}}
.mk-client{display:grid;align-content:start;gap:10px;padding:clamp(20px,1.8vw,30px);border:1px solid var(--line);border-radius:18px;background:#fff}
.mk-client h3{margin:0;font-size:clamp(17px,1.2vw,20px);font-weight:650;letter-spacing:-.022em}
.mk-client p{margin:0 0 4px;color:var(--muted);font-size:clamp(14.5px,1.02vw,16px);line-height:1.55}
.mk-client code:not([id]){padding:2px 6px;border-radius:5px;background:var(--soft-bg);font-size:.9em}
/* The tool table: the name column is monospace and must not wrap mid-identifier. */
.mk-tools{min-width:820px}
.mk-tools th[scope="row"]{width:22%}
.mk-tools th[scope="row"] code{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:500;overflow-wrap:anywhere}
.mk-tools td:nth-child(3),.mk-tools td:nth-child(4){white-space:nowrap}
.mk-status{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-size:13.5px;white-space:nowrap}
.mk-status::before{width:8px;height:8px;flex:none;border-radius:50%;background:#d8d8d2;content:""}
.mk-status.on{font-weight:550}
.mk-status.on::before{background:var(--green)}
@media(max-width:640px){.mk-tools{min-width:680px}}

/* Pricing helpers (the plan cards themselves live in marketing.css) */
.mk-plan-note{max-width:46em;margin:clamp(20px,1.8vw,30px) auto 0;color:var(--soft);font-size:clamp(14px,.98vw,15px);line-height:1.6;text-align:center}
.mk-plan-note a{color:var(--indigo)}

/* Definition rows (data sources, security controls) */
.mk-defs{display:grid;gap:0;border-top:1px solid var(--line)}
.mk-defs>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr);gap:8px clamp(20px,3vw,56px);padding-block:clamp(16px,1.6vw,26px);border-bottom:1px solid var(--line)}
.mk-defs dt{margin:0;color:var(--ink);font-size:clamp(16px,1.12vw,18.5px);font-weight:650;letter-spacing:-.018em}
.mk-defs dd{margin:0;color:var(--muted);font-size:clamp(15px,1.04vw,16.5px);line-height:1.62}
.mk-defs dd a{color:var(--indigo)}
.mk-defs dd code{padding:2px 6px;border-radius:6px;background:var(--soft-bg);color:var(--text);font-size:.92em;word-break:break-all}

/* ----------------------------------------------- free keyword lookup tool */
.mk-tool{display:grid;gap:12px;max-width:940px;margin-inline:auto;padding:clamp(18px,1.8vw,26px);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 26px 70px -40px rgba(20,22,28,.5)}
.mk-tool-bar{display:grid;grid-template-columns:minmax(0,1fr) 190px auto;gap:10px}
.mk-tool-field{display:flex;align-items:center;gap:11px;min-width:0;height:54px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.mk-tool-field svg{width:19px;height:19px;flex:none;color:var(--muted)}
.mk-tool-field input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:16.5px}
.mk-tool-field input::placeholder{color:var(--soft)}
.mk-tool-field:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,23,28,.08)}
.mk-tool-market select{width:100%;height:54px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft-bg);color:var(--ink);font-size:15.5px}
.mk-tool-bar .mk-black-button{height:54px}
.mk-tool-note{margin:0;color:var(--soft);font-size:13.5px;line-height:1.55}
.mk-tool-result{max-width:940px;margin:20px auto 0}
.mk-tool-card{display:grid;justify-items:start;gap:10px;padding:clamp(20px,2vw,32px);border:1px solid var(--line);border-radius:20px;background:var(--band)}
.mk-tool-kw{color:var(--muted);font-size:13px}
.mk-tool-h{margin:6px 0 0;font-size:clamp(17px,1.2vw,20px);font-weight:650;letter-spacing:-.02em}
.mk-tool-num{color:var(--ink);font-family:var(--display);font-size:clamp(34px,3.4vw,52px);font-weight:550;letter-spacing:-.04em;line-height:1.05}
.mk-tool-num.muted{font-size:clamp(22px,1.9vw,30px)}
.mk-tool-sub{color:var(--muted);font-size:14.5px}
.mk-tool-src{color:var(--soft);font-size:12.5px}
.mk-tool-notice{margin:0;color:var(--text);font-size:14.5px;line-height:1.55}
.mk-tool-card p{margin:0;max-width:52em;color:var(--muted);font-size:15.5px;line-height:1.6}
.mk-tool-list{display:grid;gap:0;width:100%;margin:0;padding:0;list-style:none}
.mk-tool-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);color:var(--text);font-size:15px}
.mk-tool-list b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ------------------------------------------------- contact layout + form */
.mk-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,88px);align-items:start}
.mk-form{display:grid;gap:17px;padding:clamp(22px,2.2vw,36px);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 26px 70px -46px rgba(20,22,28,.5)}
.mk-field{display:grid;gap:7px}
.mk-field>span{color:var(--ink);font-size:14.5px;font-weight:600}
.mk-field small{color:var(--soft);font-size:13.5px;font-weight:400}
.mk-field :is(input,textarea){width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px;line-height:1.45}
.mk-field textarea{min-height:150px;resize:vertical}
.mk-field :is(input,textarea):focus-visible{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.mk-field :is(input,textarea)::placeholder{color:var(--soft)}
/* Honeypot: hidden from people and assistive tech, still submitted by bots that fill every field. */
.mk-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mk-form-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.mk-form-foot small{color:var(--soft);font-size:13.5px;line-height:1.5}
.mk-form-foot small a{color:var(--indigo)}
.mk-form-status{margin:0;padding:13px 16px;border-radius:12px;font-size:15px;line-height:1.5}
.mk-form-status[data-state="ok"]{background:var(--green-soft);color:#15803d}
.mk-form-status[data-state="error"]{background:#fdeced;color:#b42318}
.mk-form-status[hidden]{display:none}
.mk-form button[disabled]{opacity:.6;cursor:progress}
.mk-contact-aside{display:grid;gap:clamp(18px,1.8vw,28px)}

/* --------------------------------------------------------------- FAQ page */
.mk-faq-page{display:grid;gap:clamp(28px,3vw,48px);padding-block:clamp(36px,3.6vw,72px)}
.mk-faq-group{display:grid;gap:12px}
.mk-faq-group>h2{margin:0;font-size:clamp(21px,1.7vw,28px);font-weight:700;letter-spacing:-.025em}
.mk-faq-group .mk-faq-list{border-top:1px solid var(--line)}
.mk-faq-page details{border-bottom:1px solid var(--line)}
.mk-faq-page summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(16px,1.5vw,24px) 0;color:var(--ink);font-size:clamp(16px,1.14vw,18.5px);font-weight:600;letter-spacing:-.015em;list-style:none;cursor:pointer}
.mk-faq-page summary::-webkit-details-marker{display:none}
.mk-faq-page summary::after{flex:none;color:var(--soft);font-size:22px;font-weight:400;content:"+"}
.mk-faq-page details[open] summary::after{content:"−"}
.mk-faq-page details>p,.mk-faq-page details>ul{max-width:56em;margin:0 0 clamp(16px,1.5vw,24px);color:var(--muted);font-size:clamp(15.5px,1.06vw,17px);line-height:1.62}
.mk-faq-page details>ul{padding-left:1.2em}
.mk-faq-page details a{color:var(--indigo)}
.mk-faq-page code{padding:2px 6px;border-radius:5px;background:var(--soft-bg);font-size:.92em}

/* ------------------------------------------------------------------- 404 */
/* minmax(0,1fr) rather than the implicit auto track: the search mock inside .mk-404-mock has a
   nowrap line in it, and an auto track grows to that intrinsic width and pushes the whole page
   sideways below about 380px. */
.mk-404{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(14px,1.4vw,22px);padding-block:clamp(52px,6vw,116px);text-align:center}
.mk-404 .mk-404-code{margin:0;color:var(--ink);font-family:var(--display);font-size:clamp(60px,8vw,118px);font-weight:600;line-height:1;letter-spacing:-.055em}
.mk-404 h1{margin:0;font-size:clamp(27px,2.8vw,44px);font-weight:700;letter-spacing:-.03em}
.mk-404 p{max-width:34em;margin:0;color:var(--muted);font-size:clamp(16px,1.16vw,18.5px);line-height:1.6}
.mk-404-mock{width:100%;max-width:440px;margin-top:6px}
.mk-404-mock .mkm{display:block;padding:12px}
.mk-404-mock .mkm-input>span{text-align:left}
.mk-404-links{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;margin-top:6px}
.mk-404-links a{color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
.mk-404-links a:hover{text-decoration:underline;text-underline-offset:3px}

/* The legal pages (privacy/terms/cookies) still load legal.css for their article body, and it styles the
   bare <header> and <footer> elements. Neutralise those so the shared chrome looks the same everywhere. */
.mk-landing .mk-nav{background:transparent;border-bottom:0}
.mk-landing .mk-footer{text-align:left}
.mk-nav-actions .mk-login{display:inline-flex;align-items:center;text-decoration:none}

/* --------------------------------------------------------- breakpoints */
@media(max-width:1180px){
  .mk-page-hero.has-mock{grid-template-columns:1fr}
  .mk-page-head{max-width:34em}
  .mk-limits{grid-template-columns:1fr;gap:22px}
}
@media(max-width:1000px){
  .mk-contact{grid-template-columns:1fr}
  .mk-defs>div{grid-template-columns:1fr}
}
@media(max-width:760px){
  .mk-tool-bar{grid-template-columns:1fr}
  .mk-tool-bar .mk-black-button{width:100%}
}
@media(max-width:640px){
  .mk-table{min-width:520px}
  .mk-numbered li{grid-template-columns:1fr}
  .mk-numbered li::before{grid-row:auto}
  .mk-card.row{grid-template-columns:1fr}
}

/* Balanced card rows: pick the column count from the number of cards so no row is left with orphans
   (3, 5, 6 or 9 cards → three columns; 4, 7 or 8 → four; 2 → two). Below 1000px the auto-fit rule takes over. */
@media(min-width:1000px){
  .mk-cards:not(.one):has(> :nth-child(3)):not(:has(> :nth-child(4))),
  .mk-cards:not(.one):has(> :nth-child(5)):not(:has(> :nth-child(7))),
  .mk-cards:not(.one):has(> :nth-child(9)):not(:has(> :nth-child(10))){grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-cards:not(.one):has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .mk-cards:not(.one):has(> :nth-child(7)):not(:has(> :nth-child(9))){grid-template-columns:repeat(4,minmax(0,1fr))}
  .mk-cards:not(.one):has(> :nth-child(2)):not(:has(> :nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}
}