/* University of SEO: public marketing pages (home_uos.php, services, pricing, case studies) and
   the reading pages (about, legal). Design tokens only (uos-theme.css), both themes.
   Glass stays on the sticky header and overlays; content sits on solid surfaces. */

/* ------------------------------------------------------------ browser surfaces */
.mk{--mk-gap:clamp(56px,8vw,96px);color:var(--uos-text)}
.mk :focus-visible{outline:2px solid var(--uos-accent-text);outline-offset:3px;border-radius:10px}
.mk input,.mk textarea{caret-color:var(--uos-accent-text)}
.mk a{text-underline-offset:.2em;text-decoration-thickness:1px}
.mk .mk-num,.mk-price,.mk time{font-variant-numeric:tabular-nums}
.mk h1,.mk h2,.mk h3{text-wrap:balance;color:var(--uos-ink)}
.mk p{text-wrap:pretty}

/* ------------------------------------------------------------ rhythm + type */
.mk-section{padding:var(--mk-gap) 0 0}
.mk-section:last-child{padding-bottom:var(--mk-gap)}
.mk-h2{font-size:var(--uos-fs-h2);font-weight:600;line-height:var(--uos-lh-heading);letter-spacing:-.025em;margin:0 0 14px}
.mk-intro{font-size:1.06rem;line-height:1.65;color:var(--uos-muted);max-width:62ch;margin:0}
.mk-head{margin-bottom:32px}
.mk-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.mk-head-row .mk-h2{margin:0}
.mk-note{margin:22px 0 0;color:var(--uos-muted);font-size:var(--uos-fs-small);line-height:var(--uos-lh-body);max-width:70ch}
.mk-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--uos-accent-text);text-decoration:underline;text-underline-offset:.25em}
.mk-link:hover{color:var(--uos-ink)}
.mk-link i{font-size:.8em}

/* ------------------------------------------------------------ buttons (no movement on hover) */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:.98rem;border:1px solid transparent;transition:background-color var(--uos-dur-1,120ms),border-color var(--uos-dur-1,120ms),color var(--uos-dur-1,120ms);white-space:nowrap;text-decoration:none}
.hm-btn-sm{min-height:44px;padding:0 18px;font-size:.92rem}
.hm-btn-primary{color:var(--uos-on-accent)!important;background:var(--uos-accent);box-shadow:var(--uos-btn-shadow,0 1px 2px rgba(16,24,40,.08))}
.hm-btn-primary:hover{background:var(--uos-grad-hover,#1b45cc)}
.hm-btn-light{color:var(--uos-ink)!important;background:var(--uos-surface-solid);border-color:var(--uos-line-2)}
.hm-btn-light:hover{border-color:var(--uos-ink)}

/* ------------------------------------------------------------ screenshots */
.mk-shot{margin:0}
.mk-shot img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--uos-line-2);background:var(--uos-canvas-2);box-shadow:var(--uos-shadow)}
.mk-shot figcaption{margin-top:12px;font-size:.88rem;line-height:1.5;color:var(--uos-muted);max-width:70ch}
html[data-theme="light"] .mk-shot-dark,html:not([data-theme="light"]) .mk-shot-light{display:none}

/* ------------------------------------------------------------ hero */
.mk-hero{padding:clamp(36px,5vw,64px) 0 0}
.mk-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,64px);align-items:center}
.mk-hero h1{font-size:var(--uos-fs-display);line-height:var(--uos-lh-display);font-weight:600;letter-spacing:var(--uos-ls-display);margin:0 0 20px;max-width:15ch}
.mk-lead{font-size:var(--uos-fs-lead);line-height:var(--uos-lh-body);color:var(--uos-muted);max-width:58ch;margin:0 0 28px}
.mk-search{display:flex;align-items:center;gap:8px;max-width:560px;background:var(--uos-surface-solid);border:1px solid var(--uos-line-2);border-radius:999px;padding:5px 5px 5px 18px}
.mk-search:focus-within{border-color:var(--uos-accent-text);box-shadow:var(--uos-ring)}
.mk-search i{color:var(--uos-muted)}
.mk-search input{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;font-size:1rem;color:var(--uos-ink)}
.mk-search input::placeholder{color:var(--uos-muted)}
.mk-search button{min-height:44px;border:0;border-radius:999px;padding:0 20px;font-weight:600;color:var(--uos-on-accent);background:var(--uos-accent)}
.mk-search button:hover{background:var(--uos-grad-hover,#1b45cc)}
.mk-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.mk-hero-shot img{max-height:620px;object-fit:cover;object-position:top}

/* ------------------------------------------------------------ values: intro over a two-column text grid */
.mk-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 56px;margin-top:36px;padding-top:32px;border-top:1px solid var(--uos-line)}
.mk-values h3{font-size:1.15rem;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.mk-values p{margin:0;line-height:1.65;color:var(--uos-text);max-width:52ch}

/* ------------------------------------------------------------ journey: picture beside a plain list */
.mk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.mk-split-media{position:sticky;top:calc(var(--uos-header-h,80px) + 24px)}
.mk-steps{list-style:none;margin:28px 0 0;padding:0}
.mk-steps li{padding:18px 0;border-top:1px solid var(--uos-line)}
.mk-steps li:last-child{border-bottom:1px solid var(--uos-line)}
.mk-steps a{display:inline-flex;align-items:center;gap:8px;font-size:1.15rem;font-weight:600;color:var(--uos-ink);text-decoration:none;min-height:44px}
.mk-steps a i{font-size:.75em;color:var(--uos-accent-text)}
.mk-steps a:hover{text-decoration:underline}
.mk-steps p{margin:4px 0 0;color:var(--uos-muted);line-height:1.6;max-width:56ch}

/* ------------------------------------------------------------ courses (real items, real thumbnails) */
.mk-courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mk-course{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--uos-surface-solid);border:1px solid var(--uos-line);color:var(--uos-text);text-decoration:none;transition:border-color .2s}
.mk-course:hover{border-color:var(--uos-line-2);color:var(--uos-text)}
.mk-course-img{position:relative;aspect-ratio:16/10;background:var(--uos-canvas-2)}
.mk-course-img img{width:100%;height:100%;object-fit:cover;display:block}
.mk-course-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.mk-course-cat{font-size:.85rem;color:var(--uos-muted)}
.mk-course-body strong{font-size:1.08rem;line-height:1.32;color:var(--uos-ink);font-weight:600}
.mk-course-meta{font-size:.86rem;color:var(--uos-muted)}
.mk-course-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.mk-price{font-weight:700;color:var(--uos-ink)}
.mk-price del{color:var(--uos-muted);font-weight:500;font-size:.86rem;margin-left:4px}
.mk-go{font-size:.9rem;font-weight:600;color:var(--uos-accent-text);display:inline-flex;align-items:center;gap:6px}

/* ------------------------------------------------------------ lab: copy and facts, then a wide screenshot */
.mk-lab-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;margin-bottom:36px}
.mk-facts{margin:0;display:grid;gap:18px}
.mk-facts div{padding-left:0}
.mk-facts dt{font-weight:600;color:var(--uos-ink);font-size:1.02rem}
.mk-facts dd{margin:2px 0 0;color:var(--uos-muted);line-height:1.6}

/* ------------------------------------------------------------ community */
.mk-community{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px}
.mk-panel{padding:20px 22px;border-radius:20px;background:var(--uos-surface-solid);border:1px solid var(--uos-line)}
.mk-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.mk-panel-head h3{font-size:1.1rem;font-weight:600;margin:0}
.mk-row{display:flex;gap:12px;align-items:center;padding:10px 8px;margin:0 -8px;border-radius:12px;color:var(--uos-text);text-decoration:none;min-height:44px}
.mk-row:hover{background:var(--uos-glass-hi);color:var(--uos-text)}
.mk-row strong{display:block;color:var(--uos-ink);font-size:.98rem;line-height:1.35;font-weight:600}
.mk-row small{color:var(--uos-muted);font-size:.84rem}
.mk-q-state{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:.8rem;background:var(--uos-warning-soft);color:var(--uos-warning)}
.mk-q-state.is-solved{background:var(--uos-success-soft);color:var(--uos-success)}
.mk-rank{width:24px;text-align:right;font-weight:600;color:var(--uos-muted);flex:0 0 auto}
.mk-row img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.mk-empty{padding:18px 0;color:var(--uos-muted)}
.mk-empty p{margin:0 0 12px}

/* ------------------------------------------------------------ levels: one scrolling strip */
.mk-levels{list-style:none;margin:0;padding:4px 2px 14px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity}
.mk-levels li{flex:0 0 auto;scroll-snap-align:start}
.mk-levels a{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;min-height:44px;border-radius:999px;border:1px solid var(--uos-line-2);background:var(--uos-surface-solid);color:var(--uos-ink);text-decoration:none;white-space:nowrap}
.mk-levels a:hover{border-color:var(--uos-ink)}
.mk-levels i{color:var(--uos-accent-text);width:18px;text-align:center}
.mk-levels strong{font-weight:600;font-size:.92rem}
.mk-levels small{color:var(--uos-muted);font-size:.82rem}

/* ------------------------------------------------------------ services / cases / shop: lists, not card rows */
.mk-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid var(--uos-line)}
.mk-list li{border-bottom:1px solid var(--uos-line)}
.mk-list a{display:block;padding:20px 0;color:var(--uos-text);text-decoration:none}
.mk-list a strong{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:1.12rem;font-weight:600;color:var(--uos-ink)}
.mk-list a strong i{font-size:.8em;color:var(--uos-accent-text);transition:transform .2s var(--uos-ease)}
.mk-list a:hover strong{text-decoration:underline}
.mk-list a span{display:block;margin-top:4px;color:var(--uos-muted);line-height:1.6;max-width:56ch}
.mk-list-1{grid-template-columns:minmax(0,1fr)}
.mk-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--uos-line)}
.mk-rows li{border-bottom:1px solid var(--uos-line)}
.mk-rows a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:18px 0;color:var(--uos-text);text-decoration:none}
.mk-rows a strong{font-size:1.08rem;font-weight:600;color:var(--uos-ink)}
.mk-rows a:hover strong{text-decoration:underline}
.mk-rows a span{grid-column:1;color:var(--uos-muted);line-height:1.55}
.mk-rows a em{grid-column:2;grid-row:1/span 2;font-style:normal;font-weight:600;color:var(--uos-accent-text);white-space:nowrap}

/* ------------------------------------------------------------ reviews */
.mk-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px}
.mk-review{margin:0}
.mk-review blockquote{margin:0 0 12px;font-size:1.05rem;line-height:1.6;color:var(--uos-ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mk-review figcaption{color:var(--uos-muted);font-size:.9rem}
.mk-stars{color:var(--uos-accent-text);font-size:.8rem;margin-bottom:10px}

/* ------------------------------------------------------------ faq */
.mk-faq{max-width:820px}
.mk-faq details{border-bottom:1px solid var(--uos-line)}
.mk-faq details:first-of-type{border-top:1px solid var(--uos-line)}
.mk-faq summary{list-style:none;cursor:pointer;padding:18px 0;min-height:44px;font-weight:600;font-size:1.04rem;color:var(--uos-ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary i{color:var(--uos-accent-text);transition:transform .2s var(--uos-ease);flex:0 0 auto}
.mk-faq details[open] summary i{transform:rotate(45deg)}
.mk-faq details div{padding:0 0 18px;color:var(--uos-muted);line-height:1.65;max-width:70ch}

/* ------------------------------------------------------------ closing call to action */
.mk-final{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:clamp(28px,4vw,44px);border-radius:28px;background:var(--uos-surface-solid);border:1px solid var(--uos-line-2)}
.mk-final .mk-h2{margin-bottom:8px}
.mk-final p{margin:0;color:var(--uos-muted);max-width:60ch;line-height:1.6}
.mk-final .mk-cta{margin:0}

/* ------------------------------------------------------------ inner marketing pages (services, pricing, cases) */
.mk-page{padding-bottom:var(--mk-gap)}
.mk-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--uos-muted);font-weight:500;text-decoration:underline;text-underline-offset:.25em}
.mk-back:hover{color:var(--uos-ink)}
.mk-pagehead{padding:clamp(20px,3vw,40px) 0 clamp(24px,3vw,36px)}
.mk-pagehead h1{font-size:var(--uos-fs-h1);font-weight:600;line-height:var(--uos-lh-heading);letter-spacing:var(--uos-ls-heading);margin:0 0 14px;max-width:22ch}
.mk-pagehead p{font-size:1.08rem;line-height:1.62;color:var(--uos-muted);max-width:62ch;margin:0}
.mk-meta{color:var(--uos-muted);font-size:.95rem;margin:0 0 10px}
.mk-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.mk-steps-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;border-top:1px solid var(--uos-line);padding-top:22px}
.mk-steps-row h3{font-size:1.08rem;font-weight:600;margin:0 0 6px}
.mk-steps-row p{margin:0;color:var(--uos-muted);line-height:1.6}
.mk-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:stretch}
.mk-plan{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:22px;background:var(--uos-surface-solid);border:1px solid var(--uos-line)}
.mk-plan.is-featured{border-color:var(--uos-accent-text);box-shadow:0 0 0 1px var(--uos-accent-text)}
.mk-plan-top{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--uos-muted);font-size:.9rem}
.mk-plan h3{font-size:1.25rem;font-weight:600;margin:0}
.mk-plan .mk-price{font-size:1.9rem;letter-spacing:-.02em}
.mk-plan .mk-price small{font-size:.9rem;font-weight:500;color:var(--uos-muted)}
.mk-plan p{margin:0;color:var(--uos-muted);line-height:1.6}
.mk-plan ul{list-style:none;margin:4px 0 12px;padding:0;display:grid;gap:8px;font-size:.95rem}
.mk-plan li{display:flex;gap:10px;align-items:baseline}
.mk-plan li i{color:var(--uos-accent-text);font-size:.8em}
.mk-plan .hm-btn{margin-top:auto}
.mk-empty-block{padding:clamp(24px,4vw,40px);border-radius:22px;background:var(--uos-surface-solid);border:1px solid var(--uos-line)}
.mk-empty-block h2{font-size:1.35rem;font-weight:600;margin:0 0 8px}
.mk-empty-block p{margin:0 0 18px;color:var(--uos-muted);max-width:60ch}
.mk-doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(28px,4vw,56px);align-items:start}
.mk-aside{display:grid;gap:20px;position:sticky;top:calc(var(--uos-header-h,80px) + 20px)}
.mk-aside .uos-card{margin:0}
.mk-form-only{max-width:720px}
.mk-form-only .mk-aside{position:static}

/* ------------------------------------------------------------ reading column (service detail, case study, about, legal) */
.mk-prose{max-width:70ch;font-size:1.04rem;line-height:1.72;color:var(--uos-text)}
.mk-prose h1{font-size:var(--uos-fs-h1);font-weight:600;line-height:var(--uos-lh-heading);letter-spacing:var(--uos-ls-heading);margin:0 0 18px}
.mk-prose h2{font-size:1.45rem;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:2.2em 0 .6em}
.mk-prose h3{font-size:1.15rem;font-weight:600;margin:1.8em 0 .5em}
.mk-prose>:first-child{margin-top:0}
.mk-prose p,.mk-prose ul,.mk-prose ol{margin:0 0 1em}
.mk-prose ul,.mk-prose ol{padding-left:1.3em}
.mk-prose ul{list-style:disc}
.mk-prose ol{list-style:decimal}
.mk-prose li{margin:.35em 0}
.mk-prose li::marker{color:var(--uos-muted)}
.mk-prose strong{color:var(--uos-ink)}
.mk-prose a{color:var(--uos-accent-text);text-decoration:underline;text-underline-offset:.2em}
.mk-prose a:hover{color:var(--uos-ink)}
.mk-prose table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:0 0 1.2em;display:block;overflow-x:auto}
.mk-prose th,.mk-prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--uos-line);vertical-align:top}
.mk-prose em{color:var(--uos-muted)}
.mk-section-rule{border-top:1px solid var(--uos-line);padding-top:8px}
.mk-read{padding:clamp(16px,3vw,32px) 0 var(--mk-gap)}
.mk-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 20px;padding:0;font-size:.9rem;color:var(--uos-muted)}
.mk-crumbs li{display:inline-flex;align-items:center;gap:6px}
.mk-crumbs li+li:before{content:"/";color:var(--uos-muted)}
.mk-crumbs a{color:var(--uos-muted);text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
.mk-crumbs a:hover{color:var(--uos-ink)}
.mk-crumbs [aria-current]{color:var(--uos-ink);font-weight:600}

/* ------------------------------------------------------------ inner page details */
.mk-page .mk-section:last-child{padding-bottom:0}
.mk-page .mk-read{padding-bottom:0}
.mk-empty-block .mk-cta{margin:0}
.mk-small{font-size:.92rem}
.mk-aside h2{font-size:1.15rem;font-weight:600;margin:0 0 4px}
.mk-plan .mk-plan-name{font-size:1.25rem;font-weight:600;margin:0}
.mk-cover{width:100%;height:auto;border-radius:18px;border:1px solid var(--uos-line);margin:8px 0 12px}
.mk-cases{list-style:none;margin:0;padding:0;border-top:1px solid var(--uos-line)}
.mk-cases li{border-bottom:1px solid var(--uos-line)}
.mk-cases a{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start;padding:24px 0;color:var(--uos-text);text-decoration:none}
.mk-cases a:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.mk-cases img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid var(--uos-line)}
.mk-cases-body{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mk-cases-body .mk-meta{margin:0;font-size:.9rem}
.mk-cases-body strong{font-size:1.2rem;font-weight:600;color:var(--uos-ink)}
.mk-cases a:hover strong{text-decoration:underline}
.mk-cases-sum{color:var(--uos-muted);line-height:1.6;max-width:65ch}
@media (max-width:640px){.mk-cases a{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------ responsive */
@media (max-width:1099px){
  .mk-courses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-steps-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-doc-layout{grid-template-columns:minmax(0,1fr)}
  .mk-aside{position:static}
}
@media (max-width:991px){
  .mk-hero-grid,.mk-split,.mk-lab-top,.mk-community{grid-template-columns:minmax(0,1fr)}
  .mk-hero h1{max-width:none}
  .mk-split-media{position:static;order:2}
  .mk-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .mk-courses,.mk-values,.mk-steps-row{grid-template-columns:minmax(0,1fr)}
  .mk-values{gap:22px}
  .mk-search{padding-left:14px}
  .mk-search button{padding:0 16px}
  .mk-cta .hm-btn{flex:1 1 100%}
  .mk-hero-shot img{max-height:440px}
  .mk-final{border-radius:22px}
  .mk-rows a{grid-template-columns:minmax(0,1fr)}
  .mk-rows a em{grid-column:1;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .hm-btn,.mk-course,.mk-list a strong i,.mk-faq summary i{transition:none}
}
@media (pointer:coarse){.mk-crumbs a{min-height:44px}}

/* ===== About page (views/frontend/default-new/about_us.php) ===== */
.ab{padding-bottom:var(--mk-gap)}
.ab-hero{padding:clamp(20px,3vw,36px) 0 clamp(24px,3vw,36px)}
.ab-eyebrow{margin:0 0 10px;font-size:.9rem;font-weight:600;color:var(--uos-accent-text)}
.ab-hero h1{font-size:var(--uos-fs-display);line-height:var(--uos-lh-display);font-weight:600;letter-spacing:var(--uos-ls-display);margin:0 0 18px;max-width:18ch;text-wrap:balance}
.ab-statements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ab-statement,.ab-promise{border:1px solid var(--uos-line);border-radius:var(--uos-radius-lg);background:var(--uos-surface-solid);padding:clamp(20px,2.6vw,30px)}
.ab-statement p{margin:0;font-size:clamp(1.0625rem,.98rem + .4vw,1.3rem);line-height:1.5;color:var(--uos-ink);text-wrap:pretty}
.ab-label{margin:0 0 10px;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--uos-accent-text)}
.ab-short{margin:16px 0 0;color:var(--uos-muted)}
.ab-values{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ab-values li{display:flex;flex-direction:column;border:1px solid var(--uos-line);border-radius:var(--uos-radius);background:var(--uos-surface-solid);overflow:hidden}
.ab-art{display:block;aspect-ratio:240/140;padding:10px 12px 0;background:var(--uos-canvas-2);border-bottom:1px solid var(--uos-line)}
.ab-values h3{font-size:1.08rem;font-weight:600;margin:16px 18px 6px}
.ab-values p{margin:0 18px 18px;color:var(--uos-muted);line-height:1.6;font-size:.96rem}
.ab-promise{max-width:860px}
.ab-quote{margin:0 0 12px;font-size:var(--uos-fs-h2);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--uos-ink)}
.ab-promise p:last-child{margin:0;color:var(--uos-text);line-height:1.65;max-width:64ch}
.ab-list{margin:18px 0 0;padding:0}
.ab-list div{padding:14px 0;border-top:1px solid var(--uos-line)}
.ab-list div:last-child{border-bottom:1px solid var(--uos-line)}
.ab-list dt{font-weight:600;color:var(--uos-ink);margin:0 0 3px}
.ab-list dd{margin:0;color:var(--uos-muted);line-height:1.6}
.ab-commit{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.ab-commit li{display:flex;gap:10px;align-items:flex-start;line-height:1.6;color:var(--uos-text)}
.ab-commit svg{flex-shrink:0;margin-top:3px;color:var(--uos-accent-text)}
.ab-final{border-top:1px solid var(--uos-line);padding-top:clamp(28px,4vw,44px)}
@media (max-width:991px){.ab-values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.ab-statements,.ab-commit{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.ab-values{grid-template-columns:minmax(0,1fr)}}
/* Homepage values: small line illustration above each value */
.mk-val-art{display:block;width:150px;aspect-ratio:240/140;margin:0 0 12px;border-radius:12px;background:var(--uos-canvas-2);border:1px solid var(--uos-line);padding:6px 8px 0}

/* ===================================================================================================
   Homepage v13 (brand pack v2): lab results-page simulation, search channels scene, how-it-works cycle,
   Primary Blue call-to-action band. Motion is calm and stops for prefers-reduced-motion.
   =================================================================================================== */
.hx-eyebrow{margin:0 0 12px;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--uos-accent-text)}
.hx-tagline{margin:22px 0 0;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--uos-muted)}
.hx-center{text-align:center;margin-left:auto;margin-right:auto;max-width:760px}
.hx-center .mk-intro{margin-left:auto;margin-right:auto}
.hx-hero{padding-bottom:clamp(24px,4vw,48px)}

/* --- results-page simulation --- */
.hx-serp{position:relative;margin:0;display:grid;gap:14px}
.hx-browser{background:var(--uos-surface-solid);border:1px solid var(--uos-line);border-radius:var(--uos-radius-lg);box-shadow:var(--uos-shadow-lg);overflow:hidden}
.hx-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--uos-line);background:var(--uos-canvas-2)}
.hx-dots{display:flex;gap:6px}
.hx-dots i{width:10px;height:10px;border-radius:50%;background:var(--uos-line-2)}
.hx-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--uos-surface-solid);border:1px solid var(--uos-line);font-size:.88rem;color:var(--uos-ink);white-space:nowrap;overflow:hidden}
.hx-url i{color:var(--uos-muted);font-size:.8rem}
.hx-results{--hx-h:80px;position:relative;height:calc(6 * var(--hx-h) + 16px);padding:8px 0}
.hx-row{position:absolute;left:0;right:0;top:8px;height:var(--hx-h);display:flex;gap:12px;align-items:flex-start;padding:10px 16px}
/* no-JS start slots, identical to place(0) in uos-home.js: row 1 is the lab site at rank 7 (shown in the last visible slot) */
.hx-row:nth-child(1){transform:translateY(calc(5 * var(--hx-h)))}
.hx-row:nth-child(3){transform:translateY(var(--hx-h))}
.hx-row:nth-child(4){transform:translateY(calc(2 * var(--hx-h)))}
.hx-row:nth-child(5){transform:translateY(calc(3 * var(--hx-h)))}
.hx-row:nth-child(6){transform:translateY(calc(4 * var(--hx-h)))}
.hx-row:nth-child(7){transform:translateY(calc(6 * var(--hx-h)));visibility:hidden}
.hx-results.is-ready .hx-row{transition:transform var(--uos-dur-story,400ms) var(--uos-ease-out,cubic-bezier(.2,.8,.2,1)) 120ms,background-color var(--uos-dur-2,180ms)}
.hx-row>b{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:.78rem;font-weight:600;color:var(--uos-muted);background:var(--uos-canvas-2);margin-top:2px}
.hx-row>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.hx-row small{font-size:var(--uos-fs-caption);color:var(--uos-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-row strong{font-size:.92rem;font-weight:600;color:var(--uos-accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.hx-row em{font-style:normal;font-size:.78rem;color:var(--uos-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-skel{display:block;height:10px;width:78%;border-radius:999px;background:var(--uos-line)}
.hx-skel-sm{width:56%;height:8px}
.hx-row[data-r=you]{background:var(--uos-primary-soft);z-index:2}
.hx-row[data-r=you]>b{background:var(--uos-accent);color:var(--uos-on-accent)}
.hx-row[data-r=you] strong{color:var(--uos-accent-strong,var(--uos-accent-text))}
.hx-log{background:var(--uos-surface-solid);border:1px solid var(--uos-line);border-radius:var(--uos-radius);padding:14px 16px;box-shadow:none}
.hx-log-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.hx-log-head span{font-size:var(--uos-fs-caption);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--uos-muted)}
.hx-log-head strong{display:inline-block;font-size:.95rem;color:var(--uos-ink);font-variant-numeric:tabular-nums}
.hx-log-head strong.is-settle{animation:hx-settle var(--uos-dur-2,180ms) var(--uos-ease-out,cubic-bezier(.2,.8,.2,1))}
@keyframes hx-settle{from{opacity:.35;transform:translateY(3px)}}
.hx-log ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.hx-log li{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--uos-muted);transition:color var(--uos-dur-2,180ms)}
.hx-log li i{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid var(--uos-line-2);position:relative;transition:background-color var(--uos-dur-2,180ms),border-color var(--uos-dur-2,180ms)}
.hx-log li.is-done{color:var(--uos-ink)}
.hx-log li.is-done i{background:var(--uos-accent);border-color:var(--uos-accent)}
.hx-log li i::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--uos-on-accent);border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.6);transition:opacity var(--uos-dur-1,120ms),transform var(--uos-dur-2,180ms) var(--uos-ease-out,cubic-bezier(.2,.8,.2,1))}
.hx-log li.is-done i::after{opacity:1;transform:rotate(45deg)}
.hx-cap{font-size:.8rem;color:var(--uos-muted);line-height:1.5;margin:0}

/* --- search channels scene (wires from the cards into the centre) --- */
.hx-scene{position:relative;margin-top:clamp(20px,3vw,36px);padding:clamp(20px,3vw,40px);border:1px solid var(--uos-line);border-radius:var(--uos-radius-lg);background:var(--uos-surface-solid);overflow:hidden}
.hx-scene::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--uos-line) 1px,transparent 1px);background-size:22px 22px;opacity:.7;pointer-events:none}
.hx-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hx-wires path{fill:none;stroke-width:1.5}
.hx-wires-base path{stroke:var(--uos-line-2);transition:stroke var(--uos-dur-1,120ms)}
.hx-wires-base path.is-hot{stroke:var(--uos-accent)}
/* a short bright signal loops along each route: from a channel card into the ring, around it (over the top or under
   the bottom, alternating) and out to a result card. stroke-dashoffset only; paused while the scene is off screen
   (uos-home.js toggles .is-live) and removed under reduced motion */
.hx-wires-flow path{stroke:var(--uos-accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:4 100;stroke-dashoffset:4;opacity:0;animation:hx-flow 5.2s linear infinite paused;animation-delay:calc(var(--i) * -1.3s)}
.hx-scene.is-live .hx-wires-flow path{animation-play-state:running}
@keyframes hx-flow{0%{stroke-dashoffset:4;opacity:0}5%{opacity:1}93%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.hx-scene-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center;min-height:480px}
.hx-col{display:grid;gap:14px;align-content:center;transform:translateY(-12px)}
.hx-node{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--uos-radius);background:var(--uos-surface-solid);border:1px solid var(--uos-line);box-shadow:var(--uos-shadow);color:var(--uos-ink);text-decoration:none;transition:border-color .2s}
.hx-node:hover{border-color:var(--uos-accent);color:var(--uos-ink)}
.hx-node-ico{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:var(--uos-radius);background:#fff;border:1px solid #e7e9ec}
.hx-node>span:not(.hx-node-ico){min-width:0;flex:1}
.hx-node b{display:block;font-weight:600;color:var(--uos-ink)}
.hx-node small{display:block;font-size:.8rem;line-height:1.35;color:var(--uos-muted)}
.hx-node em{flex:0 0 auto;font-style:normal;font-size:var(--uos-fs-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--uos-accent-strong,var(--uos-accent-text));background:var(--uos-primary-soft);padding:4px 8px;border-radius:999px}
.hx-node-out b{flex:0 0 auto;min-width:72px;font-family:var(--uos-font-display);font-size:1.6rem;line-height:1;letter-spacing:-.03em;color:var(--uos-accent-text);font-variant-numeric:tabular-nums}
.hx-node-out>span>span{display:block;font-weight:600}
.hx-node-out .hx-arrow{flex:0 0 auto;color:var(--uos-accent-text);transition:transform var(--uos-dur-1,120ms) var(--uos-ease-out,cubic-bezier(.2,.8,.2,1))}
.hx-node-out:hover .hx-arrow,.hx-node-out:focus-visible .hx-arrow{transform:translateX(var(--uos-nudge,2px))}
.hx-core{position:relative;display:grid;justify-items:center;gap:18px;padding:52px 0 8px}
.hx-me{position:relative;width:clamp(200px,21vw,280px);aspect-ratio:1;border-radius:50%;background:var(--uos-primary-soft);border:1px solid var(--uos-line);display:grid;place-items:end center}
.hx-me img{position:absolute;left:50%;bottom:0;width:92%;height:auto;transform:translateX(-50%);border-radius:0 0 999px 999px;-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent);z-index:1}
.hx-ring{position:absolute;inset:-14px;border-radius:50%;border:1px dashed var(--uos-line-2);pointer-events:none}
.hx-ring-2{inset:-30px;border-style:solid;border-color:var(--uos-line)}
/* the rings are static; the ring text orbits the photo on its own in a slow loop (transform only, paused off screen, never under reduced motion) */
.hx-ring-text{position:absolute;left:50%;top:50%;width:150%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;animation:hx-orbit 48s linear infinite paused;will-change:transform}
.hx-scene.is-live .hx-ring-text{animation-play-state:running}
@keyframes hx-orbit{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hx-ring-text text{font:600 11px var(--uos-font);letter-spacing:.3em;fill:var(--uos-muted)}
.hx-who{text-align:center;display:grid;gap:2px;margin-top:58px}
.hx-who b{font-family:var(--uos-font-display);font-weight:600;color:var(--uos-ink)}
.hx-who small{font-size:var(--uos-fs-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--uos-muted)}

/* --- how it works: steps + cycle --- */
.hx-how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center}
.hx-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.hx-steps li{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;border:1px solid var(--uos-line);border-radius:var(--uos-radius);background:var(--uos-surface-solid);transition:border-color var(--uos-dur-2,180ms) var(--uos-ease-std,cubic-bezier(.4,0,.2,1)),background-color var(--uos-dur-2,180ms) var(--uos-ease-std,cubic-bezier(.4,0,.2,1))}
.hx-steps li b{font-family:var(--uos-font-display);font-size:.95rem;color:var(--uos-muted);min-width:28px}
.hx-steps li span{color:var(--uos-muted);line-height:1.5}
.hx-steps li strong{display:block;color:var(--uos-ink);font-weight:600}
.hx-steps li.is-on{border-color:var(--uos-accent);background:var(--uos-primary-soft)}
.hx-steps li.is-on b{color:var(--uos-accent-strong,var(--uos-accent-text))}
.hx-cycle{position:relative;width:min(400px,100%);aspect-ratio:1;margin:0 auto}
.hx-cycle-svg{width:100%;height:100%;transform:rotate(-90deg)}
.hx-cycle-track{fill:none;stroke:var(--uos-line-2);stroke-width:2;stroke-dasharray:4 8}
.hx-cycle-run{fill:none;stroke:var(--uos-accent);stroke-width:3;stroke-dasharray:942.5;stroke-dashoffset:706.875;transition:stroke-dashoffset var(--uos-dur-story,400ms) var(--uos-ease-out,cubic-bezier(.2,.8,.2,1))}
.hx-cn{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;display:grid;place-items:center;border-radius:50%;font:600 .9rem var(--uos-font-display);color:var(--uos-muted);background:var(--uos-surface-solid);border:1px solid var(--uos-line-2);transform:rotate(var(--a)) translateY(calc(var(--r, 150px) * -1)) rotate(calc(var(--a) * -1));transition:background-color var(--uos-dur-2,180ms),color var(--uos-dur-2,180ms),border-color var(--uos-dur-2,180ms)}
.hx-cn.is-on{background:var(--uos-accent);border-color:var(--uos-accent);color:var(--uos-on-accent)}
.hx-cycle-mid{position:absolute;inset:30%;display:grid;place-items:center;align-content:center;gap:10px;text-align:center}
.hx-cycle-mid strong{font-family:var(--uos-font-display);font-size:1.15rem;color:var(--uos-ink)}

/* --- Primary Blue band --- */
.hx-band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:clamp(32px,5vw,56px);border-radius:var(--uos-radius-lg);background:#2458ff;color:#fff}
.hx-band>div{position:relative;z-index:1}
.hx-band h2{margin:0 0 8px;font-size:var(--uos-fs-h2);line-height:var(--uos-lh-heading);font-weight:700;letter-spacing:-.02em;color:#fff!important}
.hx-band p{margin:0;color:#fff;max-width:52ch;line-height:1.6}
.hx-band-o{position:absolute;right:-60px;top:-80px;width:320px;height:320px;fill:#1b45cc;pointer-events:none}
.hx-band-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:#fff;color:#101828!important;font-weight:600;text-decoration:none;transition:background-color .2s}
.hx-band-btn:hover{background:#e9eeff}
.hx-band-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:1199px){.hx-node small{display:none}}
@media (max-width:991px){
  .hx-scene-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .hx-wires{display:none}
  .hx-col{transform:none}
  .hx-core{order:-1}
  .hx-col{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-node small{display:block}
  .hx-how{grid-template-columns:minmax(0,1fr)}
  .hx-cycle{max-width:320px}
}
@media (max-width:575px){
  .hx-col{grid-template-columns:minmax(0,1fr)}
  .hx-log ol{grid-template-columns:1fr}
  .hx-results{--hx-h:76px}
  .hx-row{padding:8px 12px}
  .hx-band-o{width:220px;height:220px;right:-70px;top:-60px}
}
@media (prefers-reduced-motion:reduce){
  .hx-wires-flow{display:none}
  .hx-row,.hx-results.is-ready .hx-row,.hx-cycle-run,.hx-cn,.hx-steps li,.hx-steps li b,.hx-log li,.hx-log li i,.hx-log li i::after,.hx-node-out .hx-arrow,.hx-wires-base path{transition:none}
  .hx-log-head strong,.hx-log-head strong.is-settle{animation:none}
  .hx-ring-text{transform:translate(-50%,-50%);animation:none}
}

/* --- hero v20.3: sits higher, searches are typed in a loop, University of SEO climbs past the big SEO learning sites.
       Results use the full width and wrap instead of cutting text; the lab check floats over the bottom right edge. --- */
.mk-hero.hx-hero{padding-top:clamp(10px,1.8vw,24px)}
.hx-hero .mk-hero-grid{align-items:start}
.hx-hero .mk-hero-grid>div:first-child{padding-top:clamp(4px,2.4vw,40px)}
.hx-results{--hx-h:80px}
.hx-row strong,.hx-row em,.hx-row small{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hx-row em{-webkit-line-clamp:1}
.hx-site{font-weight:600;color:var(--uos-ink)}
.hx-comp strong{color:var(--uos-ink);font-weight:500}
.hx-results{--hx-tail:84px;height:calc(6 * var(--hx-h) + 16px + var(--hx-tail))}
/* the lab check sits on the bottom right corner: half inside the browser (over the empty strip under result 6), half outside */
.hx-serp{padding-bottom:76px}
.hx-log.hx-log-float{position:absolute;right:16px;bottom:0;z-index:3;width:244px;padding:12px 14px;border-radius:var(--uos-radius);background:var(--uos-surface-solid);box-shadow:var(--uos-shadow-lg)}
.hx-log-float .hx-log-head{margin-bottom:8px;gap:8px}
.hx-log-float .hx-log-head>span:nth-child(2){margin-right:auto}
.hx-log-float .hx-log-head{flex-wrap:nowrap;align-items:center}
.hx-log-float .hx-log-head>span:nth-child(2),.hx-log-float .hx-log-head strong{white-space:nowrap}
.hx-log-float .hx-log-head>span:nth-child(2){letter-spacing:.08em}
/* macOS window buttons: close, minimise, full screen */
.hx-dots-mac i:nth-child(1){background:#ff5f57}
.hx-dots-mac i:nth-child(2){background:#febc2e}
.hx-dots-mac i:nth-child(3){background:#28c840}
.hx-log-float .hx-dots{gap:5px;align-self:center}
.hx-log-float .hx-dots i{width:9px;height:9px}
.hx-log-float ol{grid-template-columns:1fr;gap:6px}
.hx-log-float li{font-size:.8rem;line-height:1.25}
.hx-caret{display:inline-block;width:2px;height:1.05em;margin-left:-6px;background:var(--uos-ink);opacity:0}
.hx-serp.is-typing .hx-caret{opacity:1;animation:hx-blink .8s steps(2,start) infinite}
@keyframes hx-blink{50%{opacity:0}}
@media (max-width:575px){
  /* phones: the whole simulation is smaller so the browser and the lab check fit on one screen */
  .hx-results{--hx-h:62px;--hx-tail:64px;padding:4px 0}
  .hx-bar{padding:8px 10px;gap:8px}
  .hx-dots i{width:7px;height:7px}
  .hx-url{height:28px;font-size:.8rem;padding:0 10px}
  .hx-row{padding:6px 10px;gap:8px}
  .hx-row>b{flex-basis:20px;height:20px;font-size:.68rem}
  .hx-row small{font-size:.7rem;-webkit-line-clamp:1}
  .hx-row strong{font-size:.8rem;line-height:1.25}
  .hx-row em,.hx-row .hx-skel{display:none}
  .hx-serp{padding-bottom:0}
  .hx-log.hx-log-float{position:relative;right:auto;bottom:auto;width:auto;max-width:214px;margin:-76px 10px 0 auto;padding:9px 11px}
  .hx-log-float .hx-dots i{width:7px;height:7px}
  .hx-log-float .hx-log-head>span:nth-child(2){font-size:.66rem;letter-spacing:.06em}
  .hx-log-float .hx-log-head strong{font-size:.82rem}
  .hx-log-float .hx-log-head{margin-bottom:5px}
  .hx-log-float li{font-size:.72rem;gap:6px}
  .hx-log-float li i{flex-basis:14px;height:14px}
  .hx-log-float li i::after{left:3px;top:0;width:4px;height:7px}
}
@media (prefers-reduced-motion:reduce){.hx-serp.is-typing .hx-caret{animation:none}}

/* --- scene v20.8: the turning "University of SEO" ring hugs the photo circle; no extra rings around it; the wires run
       straight into the photo and the signal passes behind it --- */
.hx-me{z-index:1;isolation:isolate;background:linear-gradient(var(--uos-primary-soft),var(--uos-primary-soft)),var(--uos-surface-solid)}
.hx-ring-text{width:calc(117% + 14px)}
.hx-ring-text text{font-size:11.5px}
.hx-node-ico-search{display:grid;place-items:center;color:var(--uos-accent-text);font-size:1.15rem}
/* tablets and phones: the same three-column scene as on desktop, scaled down; cards keep only their heading */
@media (max-width:991px){
  .hx-scene-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(8px,2.4vw,24px);min-height:0}
  .hx-wires{display:block}
  .hx-core{order:0;padding:28px 0 4px;gap:10px}
  .hx-col,.hx-col-out{grid-template-columns:minmax(0,1fr);gap:clamp(8px,1.6vw,14px);transform:none}
  .hx-node small{display:none}
  .hx-me{width:clamp(104px,24vw,220px)}
}
@media (max-width:640px){
  /* same cards as on desktop (icon or number on the left, heading beside it), smaller; equal heights, one alignment */
  .hx-col,.hx-col-out{grid-auto-rows:1fr}
  .hx-node{gap:6px;padding:7px 7px;border-radius:12px;min-width:0;height:100%;box-sizing:border-box}
  .hx-node>span{min-width:0;overflow-wrap:normal;word-break:normal;hyphens:none}
  .hx-node-ico{flex:0 0 24px;height:24px;border-radius:7px}
  .hx-node-ico svg{width:15px;height:15px}
  .hx-node-ico-search{font-size:.75rem}
  .hx-node b,.hx-node-out>span>span{font-size:.7rem;line-height:1.2;font-weight:600}
  .hx-node em,.hx-node small,.hx-node-out .hx-arrow{display:none}
  .hx-node-out b{flex:0 0 auto;min-width:0;font-size:.95rem;line-height:1}
  .hx-core{padding-top:22px}
  .hx-core .hx-who{max-width:30vw;text-align:center}
  .hx-core .hx-who b{font-size:.74rem}
  .hx-core .hx-who small{font-size:.58rem;letter-spacing:.06em}
}
  .hx-node-out .hx-arrow{display:none}
  .hx-core{padding-top:22px}
  .hx-core figcaption,.hx-core .hx-who{font-size:.72rem}
}

/* small phones: a smaller photo and tighter cards so every heading stays inside its card */
@media (max-width:380px){
  .hx-scene-grid{gap:6px}
  .hx-me{width:clamp(88px,25vw,104px)}
  .hx-node{gap:5px;padding:6px 6px}
  .hx-node-ico{flex-basis:20px;height:20px}
  .hx-node-ico svg{width:13px;height:13px}
  .hx-node b,.hx-node-out>span>span{font-size:.63rem}
  .hx-node-out b{font-size:.85rem}
}
@media (max-width:340px){
  .hx-node b,.hx-node-out>span>span{font-size:.58rem}
  .hx-node-out b{font-size:.78rem}
  .hx-node-ico{display:none}
}
@media (max-width:380px){.hx-node-out{gap:4px}.hx-node-out>span>span{font-size:.6rem}}
@media (max-width:340px){.hx-node-out>span>span{font-size:.54rem}.hx-node-out b{font-size:.72rem}}
/* phones: the photo sits in the exact vertical middle of the cards; the name and "Founder, University of SEO" (one line)
   hang just below it without changing the centring */
@media (max-width:640px){
  .hx-core{position:relative;align-self:center;padding:0;gap:0}
  .hx-core .hx-who{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);max-width:none;width:max-content;display:grid;justify-items:center;gap:2px;text-align:center}
  .hx-core .hx-who b{font-size:.74rem;line-height:1.2}
  .hx-core .hx-who small{display:block;white-space:nowrap;font-size:.54rem;letter-spacing:.05em;line-height:1.2}
  .hx-scene-grid{padding-bottom:62px}
}
@media (max-width:340px){.hx-core .hx-who small{font-size:.5rem;letter-spacing:.03em}}

/* --- phones v20.8: how it works in one row of four small steps with the ring right under it; courses two per row --- */
.mk-more{margin:22px 0 0;text-align:center}
@media (max-width:640px){
  .hx-how{gap:14px}
  .hx-how .mk-intro{font-size:.95rem;margin-bottom:0}
  .hx-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px}
  .hx-steps li{flex-direction:column;align-items:center;gap:3px;padding:8px 4px;text-align:center;border-radius:12px}
  .hx-steps li b{min-width:0;font-size:.82rem;line-height:1}
  .hx-steps li span{font-size:0;line-height:1.2}
  .hx-steps li strong{font-size:.7rem;line-height:1.2}
  .hx-cycle{max-width:210px;margin-top:2px}
  .hx-cn{width:38px;height:38px;margin:-19px 0 0 -19px;font-size:.75rem}
  .hx-cycle-mid svg{width:40px;height:40px}
  .hx-cycle-mid strong{font-size:.9rem}

  .mk-courses{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mk-course:nth-child(3):last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 5px)}
  .mk-course{border-radius:14px}
  .mk-course-body{gap:4px;padding:10px 10px 12px}
  .mk-course-cat{font-size:.68rem}
  .mk-course-body strong{font-size:.82rem;line-height:1.3}
  .mk-course-meta{font-size:.7rem}
  .mk-course-foot{flex-direction:column;align-items:flex-start;gap:4px;padding-top:8px}
  .mk-course-foot .mk-price{font-size:.82rem}
  .mk-go{font-size:.72rem}
  .mk-head-row{margin-bottom:16px}
  .mk-head-row .mk-link{display:none}
  .mk-faq summary{font-size:.92rem}
}


/* ===================================================================================================
   Fluid text v20.8: every component sizes its text (and paddings/icons) from its OWN width with container
   units, so text grows and shrinks smoothly with the screen and always fits its card at any width.
   These rules come last and replace the fixed phone font sizes above.
   =================================================================================================== */
.hx-serp,.hx-col,.hx-steps li,.hx-cycle,.mk-course{container-type:inline-size}

/* results-page simulation (relative to the simulation width) */
.hx-url{font-size:clamp(.64rem,3.4cqi,.9rem)}
.hx-results{--hx-h:clamp(58px,16.4cqi,80px)}
.hx-row{padding:clamp(5px,2cqi,10px) clamp(8px,3cqi,16px);gap:clamp(7px,2.4cqi,12px)}
.hx-row>b{flex-basis:clamp(18px,5.2cqi,26px);height:clamp(18px,5.2cqi,26px);font-size:clamp(.6rem,2.6cqi,.78rem)}
.hx-row small{font-size:clamp(.58rem,3.1cqi,.75rem)}
.hx-row strong{font-size:clamp(.66rem,3.6cqi,.94rem)}
.hx-row em{font-size:clamp(.6rem,2.5cqi,.78rem)}
.hx-log.hx-log-float{width:clamp(168px,48cqi,244px);padding:clamp(8px,2.4cqi,12px) clamp(9px,2.8cqi,14px)}
.hx-log-float .hx-log-head>span:nth-child(2){font-size:clamp(.54rem,2.4cqi,.72rem)}
.hx-log-float .hx-log-head strong{font-size:clamp(.7rem,3.2cqi,.95rem)}
.hx-log-float li{font-size:clamp(.6rem,2.9cqi,.8rem);gap:clamp(5px,1.6cqi,8px)}
.hx-log-float li i{flex-basis:clamp(13px,3.6cqi,18px);height:clamp(13px,3.6cqi,18px)}

/* scene cards (relative to their column) */
.hx-node{padding:clamp(5px,5cqi,16px);gap:clamp(4px,3.6cqi,12px)}
.hx-node-ico{flex-basis:clamp(18px,18cqi,44px);height:clamp(18px,18cqi,44px)}
.hx-node-ico svg{width:clamp(12px,8.5cqi,26px);height:clamp(12px,8.5cqi,26px)}
.hx-node-ico-search{font-size:clamp(.6rem,5.4cqi,1.15rem)}
.hx-node b,.hx-node-out>span>span{font-size:clamp(.56rem,9.4cqi,1rem)}
.hx-node small{font-size:clamp(.66rem,3.9cqi,.8rem)}
.hx-node em{font-size:clamp(.56rem,3.6cqi,.75rem)}
.hx-node-out b{font-size:clamp(.7rem,13cqi,1.6rem)}

/* how it works: each step relative to its own width, the ring relative to the ring */
.hx-steps li b{font-size:clamp(.66rem,13cqi,.95rem)}
.hx-steps li strong{font-size:clamp(.56rem,12.4cqi,1rem)}
.hx-cn{width:clamp(32px,13cqi,52px);height:clamp(32px,13cqi,52px);margin:calc(clamp(32px,13cqi,52px) / -2) 0 0 calc(clamp(32px,13cqi,52px) / -2);font-size:clamp(.64rem,3.4cqi,.9rem)}
.hx-cycle-mid svg{width:clamp(34px,16cqi,64px);height:clamp(34px,16cqi,64px)}
.hx-cycle-mid strong{font-size:clamp(.78rem,4.6cqi,1.15rem)}
@media (min-width:641px){.hx-steps li span{font-size:clamp(.82rem,3.4cqi,1rem)}}

/* course cards (relative to the card) */
.mk-course-body{padding:clamp(8px,5.6cqi,18px) clamp(9px,5.6cqi,18px) clamp(10px,6cqi,18px);gap:clamp(3px,1.6cqi,6px)}
.mk-course-cat{font-size:clamp(.6rem,5.3cqi,.85rem)}
.mk-course-body strong{font-size:clamp(.74rem,7.4cqi,1.08rem)}
.mk-course-meta{font-size:clamp(.6rem,5.4cqi,.86rem)}
.mk-course-foot .mk-price{font-size:clamp(.74rem,6.4cqi,1rem)}
.mk-go{font-size:clamp(.62rem,5.4cqi,.9rem)}
.mk-course-foot{flex-direction:row;align-items:center;padding-top:clamp(6px,3.4cqi,12px)}
@container (max-width:250px){.mk-course-foot{flex-direction:column;align-items:flex-start;gap:3px}}

/* page-level text follows the window */
.hx-eyebrow,.hx-tagline{font-size:clamp(.66rem,.6rem + .3vw,.78rem)}
.mk-faq summary{font-size:clamp(.86rem,.8rem + .35vw,1.05rem)}
.hx-how .mk-intro,.mk-intro{font-size:clamp(.9rem,.84rem + .3vw,1.06rem)}
.hx-core .hx-who b{font-size:clamp(.72rem,.6rem + .6vw,1rem)}
.hx-core .hx-who small{font-size:clamp(.52rem,.44rem + .4vw,.75rem)}
/* search bar: the whole pill shows the focus ring (focus-within); the input inside draws no second outline */
.mk-search input:focus,.mk-search input:focus-visible{outline:none;box-shadow:none}