/* ============================================================================
   OneMediaKit — shared chrome: the kit shell (member header/footer, password
   gate, 404), the members' manual (/docs/) and the legal pages. Built on
   tokens.css: warm paper, ink, one vermilion accent, hairline rules,
   Bricolage Grotesque for headings, Inter for text, tabular figures.
   The two imports make the sheet self-sufficient on pages whose template
   does not print fonts.css and tokens.css itself (same origin, same files,
   so a page that already links them pays nothing twice).
   ============================================================================ */
@import url('fonts/fonts.css');
@import url('tokens.css');

/* 18 Oct 2026 (job 1, E-32): the hidden attribute wins over a component's own display */
[hidden] { display: none !important; }

/* The legacy names the older rules below still read, mapped onto the tokens.
   Nothing is a new colour: soft/mute are ink-2, cream is paper-2, babe-deep
   and gold are ink and the AA-safe accent, good is ink (green means verified,
   never a checkmark). */
.omk { --soft: var(--ink-2); --mute: var(--ink-2); --cream: var(--paper-2); --babe: var(--line-2); --babe-deep: var(--ink); --gold: var(--accent-strong); --good: var(--ink);
  font-family: var(--font-text); color: var(--ink);
  line-height: 1.6; font-size: 16px; background: var(--paper); font-variant-numeric: tabular-nums;
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.omk *, .omk *::before, .omk *::after { box-sizing:border-box; }
.omk h1, .omk h2, .omk h3, .omk h4 { margin:0; color:var(--ink); font-family:var(--font-display); font-weight:600; letter-spacing:0; line-height:1.15; text-wrap:balance; }
.omk h1 { letter-spacing:-.02em; line-height:1.05; }
.omk h2 { letter-spacing:-.01em; }
.omk :focus-visible { outline:2px solid var(--focus); outline-offset:2px; box-shadow:var(--ring); }
.omk p { margin:0 0 1em; }
.omk p:last-child { margin-bottom:0; }
.omk a { text-decoration:none; color:inherit; }
.omk img, .omk svg { max-width:100%; }
.omk .omk-ico { flex:0 0 auto; color:var(--gold); }

/* -------------------------------------------------------------- typography */
.omk-eyebrow { display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1rem;
  font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.omk-eyebrow .omk-ico { width:18px; height:18px; }
.omk-sub { max-width:640px; font-size:clamp(1rem,1.6vw,1.15rem); color:var(--soft); }
.omk-lede { max-width:680px; margin:1rem auto 0; font-size:clamp(.98rem,1.5vw,1.08rem); color:var(--soft); }
.omk-center { text-align:center; margin:2.4rem 0 0; }

/* ----------------------------------------------------------------- buttons */
.omk-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:2.75rem;
  padding:.75rem 1.5rem; border-radius:var(--radius-2); font-weight:600; font-size:1rem; line-height:1.2;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.omk-btn .omk-ico { width:18px; height:18px; color:currentColor; }
.omk-btn-primary { background:var(--accent-strong); color:var(--on-accent) !important; border-color:var(--accent-strong); }
.omk-btn-primary:hover { background:var(--accent); border-color:var(--accent); }
.omk-btn-primary:active { transform:translateY(1px); }
.omk-btn-ghost { background:var(--paper-0); color:var(--ink) !important; border-color:var(--line-2); }
.omk-btn-ghost:hover { border-color:var(--ink); }
.omk-btn-light { background:var(--paper-0); color:var(--ink) !important; border-color:var(--paper-0); }
.omk-btn-light:hover { background:var(--paper); }
.omk-btn-wide { width:100%; }
.omk-textlink { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--ink) !important; font-size:1rem; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.omk-textlink:hover { color:var(--accent-strong) !important; }
.omk-textlink .omk-ico { width:18px; height:18px; color:currentColor; transition:transform .18s ease; }
.omk-textlink:hover .omk-ico { transform:translateX(4px); }

/* ------------------------------------------------------------------ header */
.omk-header { position:sticky; top:0; z-index:var(--z-header); background:var(--paper);
  border-bottom:1px solid transparent; transition:box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.omk-header.is-scrolled { border-bottom-color:var(--line); box-shadow:var(--shadow-1); }
.omk-header-inner { max-width:1160px; margin:0 auto; padding:.9rem 1.5rem;
  display:flex; align-items:center; gap:1.6rem; }
.omk-logo { font-family:var(--font-display); font-weight:600; font-size:1.25rem; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.omk-logo-media { color:var(--accent-strong, var(--accent)); } /* 11.5 px in the kit head: the AA vermilion */
.ywf-mk-handle-platform { color:var(--ink-2, #4A4A46) !important; } /* 11 px uppercase label: --ink-2 reads 3.5:1 on white (Lighthouse 3 Oct) */
.omk-nav { display:flex; align-items:center; gap:1.5rem; margin-left:auto; }
.omk-nav > a { font-size:.92rem; font-weight:600; color:var(--soft); position:relative; padding:.25rem 0; transition:color .15s ease; }
.omk-nav > a:hover { color:var(--ink); }
.omk-nav > a::after { content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--accent); border-radius:2px; transition:right var(--dur-2) var(--ease-out); }
.omk-nav > a:hover::after, .omk-nav > a[aria-current="page"]::after { right:0; }
.omk-nav > a[aria-current="page"] { color:var(--ink); }
.omk-header-cta { min-height:2.5rem; padding:.5rem 1rem; font-size:var(--text-small); }
.omk-header-login { font-size:.92rem; font-weight:600; color:var(--soft); margin-right:1.1rem; transition:color .15s ease; }
.omk-header-login:hover { color:var(--ink); }
.omk-nav-cta { display:none; }
.omk-nav-login { display:none; }
.omk-nav-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--line-2);
  border-radius:var(--radius-2); padding:.5rem .6rem; color:var(--ink); cursor:pointer; }

@media (max-width: 880px) {
  .omk-header-inner { gap:1rem; }
  .omk-nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-2);
    padding:.6rem 1.5rem 1.2rem; display:none; }
  .omk-nav.is-open { display:flex; }
  .omk-nav > a { padding:.8rem 0; font-size:1rem; border-bottom:1px solid var(--line); }
  .omk-nav > a::after { display:none; }
  .omk-nav-cta { display:inline-flex; margin-top:1rem; }
  .omk-nav-login { display:inline-flex; margin-top:1rem; }
  .omk-header-cta { display:none; }
  .omk-header-login { display:none; }
  .omk-nav-toggle { display:inline-flex; }
}

/* ---------------------------------------------------------- account notice */
/* shown under the header for a signed-in account with no usable space */
.omk-notice-wrap { background:var(--paper); border-bottom:1px solid var(--line); }
.omk-notice-card { max-width:1160px; margin:0 auto; padding:1rem 1.5rem;
  display:flex; align-items:center; gap:1.2rem; }
.omk-notice-text { display:flex; flex-direction:column; gap:.15rem; font-size:.92rem; color:var(--soft); }
.omk-notice-text strong { color:var(--ink); font-weight:700; }
.omk-notice-text a { color:var(--gold); font-weight:600; }
.omk-notice-action { margin-left:auto; min-height:2.5rem; padding:.5rem 1rem; font-size:var(--text-small); white-space:nowrap; }
@media (max-width: 640px) {
  .omk-notice-card { flex-direction:column; align-items:flex-start; }
  .omk-notice-action { margin-left:0; }
}

/* -------------------------------------------------------------------- hero */
.omk-hero { background:var(--paper); overflow:hidden; }
.omk-hero-inner { max-width:1160px; margin:0 auto; padding:clamp(3.5rem,8vw,6rem) 1.5rem clamp(3rem,6vw,4.5rem);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.omk-hero h1 { font-size:clamp(2.1rem,4.6vw,3.5rem); }
.omk-hero .omk-sub { margin:1.4rem 0 2rem; }
.omk-cta-row { display:flex; gap:.8rem; flex-wrap:wrap; margin:0; }
.omk-trust { display:flex; align-items:center; gap:.5rem; margin:1.6rem 0 0; font-size:.85rem; font-weight:600; color:var(--good); }
.omk-trust .omk-ico { width:19px; height:19px; color:var(--good); }
@media (max-width: 880px) {
  .omk-hero-inner { grid-template-columns:1fr; text-align:center; }
  .omk-hero .omk-sub { margin-left:auto; margin-right:auto; }
  .omk-cta-row, .omk-trust { justify-content:center; }
}

/* ------------------------------------------------------------- page heroes */
.omk-page-hero { background:var(--paper); text-align:center; }
.omk-page-hero-inner { max-width:820px; margin:0 auto; padding:clamp(3rem,7vw,5rem) 1.5rem clamp(2.5rem,5vw,3.5rem); }
.omk-page-hero h1 { font-size:clamp(1.9rem,4vw,2.9rem); }
.omk-page-hero .omk-sub { margin:1.3rem auto 0; }
.omk-page-hero .omk-cta-row { justify-content:center; margin-top:1.8rem; }
/* every block inside a centred hero stays centred, whatever `.omk p` says about margins */
.omk .omk-page-hero-inner > * { margin-left:auto; margin-right:auto; }
.omk-page-hero .omk-btn { white-space:nowrap; }

/* ---------------------------------------------------------------- sections */
.omk-section { max-width:1160px; margin:0 auto; padding:clamp(3rem,7vw,5.5rem) 1.5rem; }
.omk-section-tight { padding-top:clamp(2rem,4vw,3rem); }
.omk-alt { max-width:none; background:var(--paper-2); }
.omk-alt > * { max-width:1160px; margin-left:auto; margin-right:auto; }
.omk-section-inner { max-width:1160px; margin:0 auto; }
.omk-section-head { text-align:center; max-width:760px; margin:0 auto 3rem; }
.omk-section-head h2 { font-size:clamp(1.55rem,3.2vw,2.3rem); }

/* ------------------------------------------------------------ cards & grids */
.omk-grid { display:grid; gap:1.3rem; }
.omk-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 960px) { .omk-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .omk-grid-3 { grid-template-columns:1fr; } }
.omk-card { background:var(--paper-0); border:1px solid var(--line); border-radius:var(--radius-3); padding:1.7rem 1.7rem 1.6rem;
  transition:box-shadow var(--dur-2) var(--ease-out); }
.omk-card:hover { box-shadow:var(--shadow-2); }
.omk-card .omk-ico { width:30px; height:30px; margin-bottom:.9rem; }
.omk-card h3 { font-size:1.06rem; margin-bottom:.45rem; }
.omk-card p { font-size:.9rem; color:var(--soft); }
.omk-card-pain .omk-ico { color:var(--mute); }

/* ------------------------------------------------------------------- steps */
.omk-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; }
@media (max-width: 880px) { .omk-steps { grid-template-columns:1fr; } }
.omk-step { background:var(--paper-0); border:1px solid var(--line); border-radius:var(--radius-3); padding:1.8rem;
  transition:box-shadow var(--dur-2) var(--ease-out); }
.omk-step:hover { box-shadow:var(--shadow-2); }
.omk-step-num { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--ink); color:var(--on-ink); font-weight:600; font-size:1rem; margin-bottom:1rem; }
.omk-step h3 { font-size:1.08rem; margin-bottom:.5rem; }
.omk-step p { font-size:.9rem; color:var(--soft); }
.omk-step-badge { display:inline-block; margin:0 0 1rem; padding:.32rem 1rem; border-radius:999px;
  background:var(--paper-2); color:var(--ink-2); font-size:var(--text-small); font-weight:600; letter-spacing:0; text-transform:none; }

/* -------------------------------------------------------------- stats band */
.omk-stats { background:var(--ink); }
.omk-stats-inner { max-width:1160px; margin:0 auto; padding:clamp(2.5rem,5vw,3.6rem) 1.5rem;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; text-align:center; }
@media (max-width: 720px) { .omk-stats-inner { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.omk-stat strong { display:block; font-family:var(--font-display); font-size:clamp(2.1rem,4.5vw,3rem); font-weight:600; color:var(--on-ink); line-height:1.1; }
.omk-stat-label { display:block; margin-top:.35rem; font-size:.82rem; font-weight:500; color:var(--on-ink); opacity:.8; }

/* ----------------------------------------------------------------- marquee */
.omk-marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--paper); padding:1rem 0; position:relative; }
.omk-marquee-track { display:inline-flex; align-items:center; gap:2.2rem; white-space:nowrap;
  animation:omk-marquee 36s linear infinite; will-change:transform; padding-right:2.2rem; }
.omk-marquee-item { font-size:var(--text-small); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--ink-2); }
.omk-marquee-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
@keyframes omk-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .omk-marquee-track { animation:none; } }

/* -------------------------------------------------------------- split rows */
.omk-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center; max-width:1160px; margin:0 auto; }
.omk-split-flip .omk-split-copy { order:2; }
.omk-split-flip .omk-split-visual { order:1; }
.omk-split-copy h2 { font-size:clamp(1.5rem,3vw,2.15rem); margin-bottom:1.1rem; }
.omk-split-copy p { color:var(--soft); font-size:.97rem; }
@media (max-width: 880px) {
  .omk-split { grid-template-columns:1fr; }
  .omk-split-flip .omk-split-copy { order:1; }
  .omk-split-flip .omk-split-visual { order:2; }
}

/* --------------------------------------------------------------- checklist */
.omk-checklist { list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.omk-checklist li { display:flex; align-items:flex-start; gap:.6rem; font-size:.93rem; color:var(--soft); font-weight:500; }
.omk-checklist .omk-ico { width:19px; height:19px; color:var(--good); margin-top:.15rem; }

/* -------------------------------------------------- placeholder mock frames */
.omk-mock { margin:0; border-radius:var(--radius-3); background:var(--paper-0); border:1px solid var(--line);
  box-shadow:var(--shadow-3); overflow:hidden; }
.omk-mock-bar { display:flex; align-items:center; gap:.45rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--paper); }
.omk-mock-bar > span { width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.omk-mock-bar > span:first-child { background:var(--accent); }
.omk-mock-url { margin-left:.6rem; font-style:normal; font-size:.72rem; font-weight:600; color:var(--mute);
  background:var(--paper-0); border:1px solid var(--line); border-radius:var(--radius-1); padding:.2rem .8rem; }
.omk-mock-body { position:relative; min-height:300px; display:flex; align-items:center; justify-content:center;
  background:var(--paper); }
.omk-mock-lines { position:absolute; inset:1.6rem; display:flex; flex-direction:column; gap:.8rem; opacity:.55; }
.omk-mock-lines span { display:block; height:12px; border-radius:6px; background:var(--cream); }
.omk-mock-lines span:nth-child(1) { width:42%; height:22px; }
.omk-mock-lines span:nth-child(2) { width:68%; }
.omk-mock-lines span:nth-child(3) { width:55%; }
.omk-mock-label { position:relative; z-index:1; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); background:var(--paper-0); border:1px dashed var(--line-2);
  border-radius:999px; padding:.45rem 1.1rem; }
.omk-mock-phone { width:min(280px,80%); margin:0 auto; border-radius:34px; border:1px solid var(--line); padding:.6rem; }
.omk-mock-phone .omk-mock-notch { width:88px; height:20px; margin:.2rem auto .4rem; border-radius:999px; background:var(--cream); }
.omk-mock-phone .omk-mock-body { border-radius:26px; min-height:420px; }
.omk-mock-phone .omk-mock-lines { inset:1.2rem; }

/* -------------------------------------------------------------- pricing card */
.omk-plan { position:relative; max-width:460px; margin:0 auto; background:var(--paper-0); border:1px solid var(--ink);
  border-radius:var(--radius-3); padding:2.6rem 2.4rem 2.2rem; text-align:center; box-shadow:var(--shadow-2); }
.omk-plan-badge { position:absolute; top:-15px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--accent-strong); color:var(--on-accent); font-size:var(--text-micro); font-weight:600; letter-spacing:0; text-transform:none;
  padding:.35rem 1.1rem; border-radius:var(--radius-pill); margin:0; }
.omk-plan-name { font-size:1.15rem; margin-bottom:1rem; }
.omk-plan-price { display:flex; flex-direction:column; align-items:center; gap:.15rem; margin:0 0 .8rem; }
.omk-plan-regular { font-size:1.05rem; font-weight:600; color:var(--mute); text-decoration-color:var(--mute); }
.omk-plan-launch { font-family:var(--font-display); font-size:clamp(2.1rem,4vw,2.7rem); font-weight:600; color:var(--ink); line-height:1.1; }
.omk-plan-note { font-size:.85rem; color:var(--ink-2); font-weight:500; margin-bottom:1.6rem; }
.omk-plan-list { text-align:left; margin:0 0 1.8rem; }
.omk-plan-fine { margin-top:1rem; font-size:.78rem; color:var(--mute); }

/* --------------------------------------------------------------- guarantee */
.omk-guarantee { display:flex; gap:1.2rem; align-items:flex-start; max-width:640px; margin:2.2rem auto 0;
  background:var(--paper-0); border:1px solid var(--line); border-radius:var(--radius-3); padding:1.6rem 1.8rem; }
.omk-guarantee .omk-ico { width:34px; height:34px; color:var(--good); margin-top:.2rem; }
.omk-guarantee h3 { font-size:1.02rem; margin-bottom:.4rem; }
.omk-guarantee p { font-size:.9rem; color:var(--soft); }

/* -------------------------------------------------------------------- FAQ */
.omk-faq-group { text-align:center; font-size:clamp(1.25rem,2.4vw,1.6rem); margin-bottom:1.6rem; }
.omk-faq-narrow { max-width:760px; margin:0 auto; }
.omk-faq { margin:0 0 .8rem; background:var(--paper-0); border:1px solid var(--line); border-radius:var(--radius-2);
  padding:1.05rem 1.4rem; transition:border-color var(--dur-1) var(--ease-out); }
.omk-faq[open] { border-color:var(--ink); }
.omk-faq summary { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; font-weight:700; font-size:.96rem; list-style:none; }
.omk-faq summary::-webkit-details-marker { display:none; }
.omk-faq-mark { position:relative; width:20px; height:20px; flex:0 0 auto; }
.omk-faq-mark::before, .omk-faq-mark::after { content:''; position:absolute; top:50%; left:50%;
  width:12px; height:2px; background:var(--ink); border-radius:2px; transform:translate(-50%,-50%); transition:transform var(--dur-1) var(--ease-out); }
.omk-faq-mark::after { transform:translate(-50%,-50%) rotate(90deg); }
.omk-faq[open] .omk-faq-mark::after { transform:translate(-50%,-50%) rotate(0deg); }
.omk-faq p { margin:.8rem 0 0; font-size:.9rem; color:var(--soft); }

/* --------------------------------------------------------------- platforms */
.omk-platforms { text-align:center; }
.omk-platforms-label { font-size:var(--text-small); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--ink-2); margin-bottom:1.2rem; }
.omk-platforms-row { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; }
.omk-platform { display:inline-flex; align-items:center; gap:.55rem; padding:.65rem 1.3rem; background:var(--paper-0);
  border:1px solid var(--line-2); border-radius:var(--radius-pill); font-weight:600; font-size:.9rem;
  transition:border-color var(--dur-1) var(--ease-out); }
.omk-platform:hover { border-color:var(--ink); }
.omk-platform .omk-ico { width:20px; height:20px; }

/* ----------------------------------------------------------------- contact */
.omk-contact-card { max-width:560px; margin:0 auto 3rem; text-align:center; background:var(--paper-0);
  border:1px solid var(--line); border-radius:var(--radius-3); padding:2.6rem 2.2rem; }
.omk-contact-card > .omk-ico { width:38px; height:38px; }
.omk-contact-email { font-family:var(--font-display); font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:600; margin:.9rem 0 .4rem; word-break:break-all; }
.omk-contact-note { font-size:.88rem; color:var(--soft); margin-bottom:1.6rem; }
.omk-contact-hints { margin-top:0; }

/* ---------------------------------------------------------------- CTA band */
.omk-cta-band { background:var(--ink); }
.omk-cta-band-inner { max-width:760px; margin:0 auto; text-align:center; padding:clamp(3.2rem,7vw,5rem) 1.5rem; }
.omk-cta-band h2 { color:var(--on-ink); font-size:clamp(1.5rem,3.2vw,2.25rem); margin-bottom:.9rem; }
.omk-cta-band p { color:var(--on-ink); opacity:.8; font-size:.98rem; margin-bottom:1.8rem; }

/* ------------------------------------------------------------------ footer */
.omk-footer { background:var(--paper-2); border-top:1px solid var(--line); }
.omk-footer-inner { max-width:1160px; margin:0 auto; padding:clamp(2.6rem,5vw,3.6rem) 1.5rem 2rem;
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:2rem; }
@media (max-width: 880px) { .omk-footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .omk-footer-inner { grid-template-columns:1fr; } }
.omk-logo-footer { font-size:1.15rem; margin:0 0 .8rem; }
.omk-footer-tag { font-size:.85rem; color:var(--soft); max-width:320px; }
.omk-footer-col h4 { font-family:var(--font-text); font-size:var(--text-small); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--ink-2); margin-bottom:1rem; }
.omk-footer-col a { display:block; font-size:.9rem; font-weight:500; color:var(--soft); padding:.28rem 0; transition:color .15s ease; }
.omk-footer-col a:hover { color:var(--accent-strong); }
.omk-footer-bottom { border-top:1px solid var(--line); }
.omk-footer-bottom { max-width:1160px; margin:0 auto; padding:1.3rem 1.5rem 1.8rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.omk-footer-bottom p { margin:0; font-size:.78rem; color:var(--mute); }

/* ------------------------------------------------------- reveal-on-scroll */
/* Hidden state only applies once site.js has tagged the root with .omk-js,
   so the site is fully visible without JavaScript. */
.omk.omk-js [data-omk-reveal] { opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease; }
.omk.omk-js [data-omk-reveal].omk-in { opacity:1; transform:none; }
.omk.omk-js [data-omk-delay="1"] { transition-delay:.12s; }
.omk.omk-js [data-omk-delay="2"] { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) {
  .omk.omk-js [data-omk-reveal] { opacity:1; transform:none; transition:none; }
  .omk-btn, .omk-card, .omk-step, .omk-platform { transition:none; }
}

/* -------------------------------------------------------------- small sizes */
@media (max-width: 400px) {
  .omk-btn { padding:.85rem 1.4rem; font-size:.92rem; }
  .omk-plan { padding:2.2rem 1.4rem 1.8rem; }
  .omk-guarantee { flex-direction:column; }
  .omk-footer-bottom { flex-direction:column; }
}

/* ---------------------------------------------------- theme chrome takeover
   platform.css only loads on pages rendering an omk shortcode, so these
   rules never touch plain theme pages (Privacy, Terms). */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part,
.site-header.wp-block-template-part,
.wp-block-post-title { display:none !important; }
.wp-site-blocks { padding:0 !important; margin:0 !important; }
.wp-site-blocks .entry-content,
.wp-site-blocks .wp-block-post-content { margin:0 !important; max-width:none !important; padding:0 !important; }
body:not(#omk-specificity) { margin:0; }

/* ---- members-only documentation (/docs/) ---- */
.omk-docs { display:grid; grid-template-columns:220px 1fr; gap:2.5rem; align-items:start; max-width:1080px; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
.omk-docs-toc { position:sticky; top:90px; background:var(--paper-0); border:1px solid var(--line); border-radius:var(--radius-2); padding:1rem 1.2rem; }
.omk-docs-toc-title { font-weight:600; font-size:var(--text-small); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); margin:0 0 .5rem; color:var(--ink-2); }
.omk-docs-toc ul { list-style:none; margin:0; padding:0; }
.omk-docs-toc li { margin:.35rem 0; }
.omk-docs-toc a { text-decoration:none; color:var(--ink); font-size:.92rem; }
.omk-docs-toc a:hover { color:var(--accent-strong); }
.omk-docs-section { margin-bottom:2.2rem; scroll-margin-top:100px; }
.omk-docs-section h2 { font-size:1.35rem; margin:0 0 .7rem; }
.omk-docs-section p { line-height:1.65; color:var(--ink-2); }
.omk-docs-list { line-height:1.65; color:var(--ink-2); padding-left:1.2rem; }
.omk-docs-list li { margin:.45rem 0; }
.omk-docs-foot { border-top:1px solid var(--line); padding-top:1.2rem; color:var(--ink-2); }
@media (max-width: 900px) { .omk-docs { grid-template-columns:1fr; } .omk-docs-toc { position:static; } }

/* ---- legal pages (privacy / terms) ---- */
.omk-legal { max-width:820px; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
.omk-legal-body .omk-docs-section h2 { font-size:1.25rem; }

/* ---------------------------------------------------------------- shell
   templates/shell.php: every page the theme used to draw (member media
   kits, the password gate, 404s, stray pages). Header/footer live inside
   their own .omk wrappers so the kit's own stylesheet stays untouched. */
.omk-shell { margin:0; background:var(--paper); }
.omk-shell-wrap { min-height:100vh; display:flex; flex-direction:column; }
.omk-shell-main { flex:1 0 auto; }
.omk-shell-head .omk-header, .omk-shell-foot .omk-footer { width:100%; }
.omk-shell-hero .omk-page-hero-inner { padding-top:clamp(4rem,10vw,7rem); padding-bottom:clamp(4rem,10vw,7rem); }
.omk-shell-page { max-width:820px; margin:0 auto; padding:2.5rem 1.5rem 4rem; font-family:var(--font-text); color:var(--ink); line-height:1.7; }
.omk-shell-page h2 { font-size:1.5rem; margin:2rem 0 .6rem; }
.omk-shell-page a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.omk-shell-page a:hover { color:var(--accent-strong); }

/* creator header/footer on a member space */
.omk-header-kit .omk-header-inner { justify-content:space-between; }
.omk-kit-brand { display:inline-flex; align-items:baseline; gap:.6rem; font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink); }
.omk-kit-tag { font-family:var(--font-text); font-size:var(--text-micro); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--ink-2); }
.omk-powered { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--soft); padding:.45rem .8rem; border:1px solid var(--line-2); border-radius:var(--radius-pill); background:var(--paper-0); transition:border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.omk-powered:hover { border-color:var(--ink); color:var(--ink); }
.omk-logo-inline { font-size:.85rem; }
.omk-footer-kit-inner { max-width:1160px; margin:0 auto; padding:2rem 1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 2rem; font-size:.85rem; color:var(--soft); }
.omk-footer-kit-brand { margin:0; color:var(--ink); }
.omk-footer-kit-note { margin:0; }
.omk-footer-kit-links { margin-left:auto; display:flex; gap:1.2rem; }
.omk-footer-kit-links a { font-weight:600; color:var(--soft); }
.omk-footer-kit-links a:hover { color:var(--ink); }
@media (max-width: 640px) { .omk-footer-kit-links { margin-left:0; } }

/* the brand bar (OMK_Chrome::kitbar, includes/brands/kitbar.php, 3 Oct 2026): a signed-in brand reading a kit keeps its way
   back to the brand app. Paper, a hairline under it, the app bar's links in small type, the company at the right. On a narrow
   phone the row scrolls sideways rather than wrapping, so the kit header under it never moves; the company goes first. */
.omk-kb { background:var(--paper-0); border-bottom:1px solid var(--line); font-family:var(--font-text); }
.omk-kb-in { max-width:1160px; margin:0 auto; padding:0 clamp(.75rem,4vw,1.5rem); min-height:2.5rem; display:flex; align-items:center; gap:.25rem .75rem; font-size:var(--text-small); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.omk-kb a { text-decoration:none; }
.omk-kb-back { flex:none; display:inline-flex; align-items:center; gap:.35rem; padding:.55rem .75rem .55rem 0; border-right:1px solid var(--line); font-weight:600; color:var(--ink); white-space:nowrap; transition:color var(--dur-1) var(--ease-out); }
.omk-kb-back:hover { color:var(--accent-strong); }
.omk-kb-arrow { font-size:1rem; line-height:1; }
.omk-kb-links { list-style:none; margin:0; padding:0; display:flex; gap:.1rem; flex:1 0 auto; }
.omk-kb-link { display:inline-block; padding:.35rem .55rem; border-radius:var(--radius-pill); font-weight:500; color:var(--ink-2); white-space:nowrap; transition:color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.omk-kb-link:hover, .omk-kb-link[aria-current="page"] { color:var(--ink); background:var(--paper); }
.omk-kb-who { margin:0 0 0 auto; padding-left:.75rem; max-width:14rem; font-weight:600; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 640px) { .omk-kb-who { display:none; } }
/* 11 Oct 2026 (walk, 375 px): on a phone the brand's links wrap under Back instead of scrolling out of sight ("Deals" was cut) */
@media (max-width: 640px) { .omk-kb-in { flex-wrap:wrap; overflow-x:visible; padding-top:.2rem; padding-bottom:.2rem; } .omk-kb-back { padding-right:.5rem; } .omk-kb-links { flex:1 1 0; min-width:0; flex-wrap:wrap; } .omk-kb-link { padding:.3rem .45rem; } }

/* ------------------------------- the site header on a public kit (11 Oct 2026) */
/* Owner decision: /@handle and its password gate wear the site's own header
   (chrome-header.php via OMK_Chrome::topbar, the shell wrap's first child, so it
   sticks over the whole kit). site.css is not loaded on a kit: these are its
   header rules, copied and scoped to the kit shell (body.omk-shell); keep them
   in step with site.css. One change: z-header + 1, above the kit's own
   (positioned, later) header. The mobile menu is site.js's own. */
.omk-shell .omk-sh, .omk-shell .omk-notice { font-family:var(--font-text); font-size:var(--text-base); line-height:var(--leading-body); color:var(--ink); -webkit-font-smoothing:antialiased; }
.omk-shell .omk-sh, .omk-shell .omk-sh * { box-sizing:border-box; } /* the site's .omk-site * gives the header itself border-box: 60px, hairline included */
.omk-shell .omk-sh a { color:inherit; text-decoration:none; }
.omk-shell .omk-sh a.omk-btn-primary { color:var(--on-accent); }
.omk-shell .omk-sh :focus-visible { outline:2px solid var(--focus); outline-offset:2px; box-shadow:var(--ring); border-radius:var(--radius-1); }
.omk-shell .omk-skip { position:absolute; left:var(--space-4); top:-100px; z-index:var(--z-toast); padding:var(--space-2) var(--space-4); background:var(--ink); color:var(--on-ink); border-radius:var(--radius-2); }
.omk-shell .omk-skip:focus { top:var(--space-4); }
.omk-shell .omk-sh { position:sticky; top:0; z-index:calc(var(--z-header) + 1); height:var(--nav-height); background:var(--paper); border-bottom:1px solid transparent; transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.omk-shell .omk-sh.is-scrolled { border-bottom-color:var(--line); box-shadow:var(--shadow-1); }
.omk-shell .omk-sh-in { max-width:var(--container); height:100%; margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; gap:var(--space-4); }
.omk-wordmark { font-family:var(--font-display); font-weight:var(--weight-display); font-size:1.25rem; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.omk-shell .omk-sh-logo { display:inline-flex; align-items:center; }
.omk-shell .omk-sh-nav { display:none; position:absolute; top:var(--nav-height); left:0; right:0; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--shadow-2); padding:var(--space-3) var(--gutter) var(--space-5); }
.omk-shell .omk-sh-nav.is-open { display:flex; }
.omk-shell .omk-sh-link { padding:var(--space-3) 0; font-weight:var(--weight-medium); color:var(--ink-2); border-bottom:1px solid var(--line); transition:color var(--dur-1) var(--ease-out); }
.omk-shell .omk-sh-link:hover, .omk-shell .omk-sh-link[aria-current="page"] { color:var(--ink); }
.omk-shell .omk-sh-cta { margin-left:auto; min-height:2.5rem; padding:var(--space-2) var(--space-4); font-size:var(--text-small); }
.omk-shell .omk-sh-burger { display:inline-flex; align-items:center; background:none; border:1px solid var(--line-2); border-radius:var(--radius-2); color:var(--ink); padding:var(--space-2); cursor:pointer; }
.omk-shell .omk-notice { max-width:var(--container); margin:var(--space-4) auto 0; padding:var(--space-4) var(--gutter); display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; justify-content:space-between; background:var(--paper-0); border:1px solid var(--line); border-radius:var(--radius-2); }
@media (min-width: 880px) {
  .omk-shell .omk-sh-nav { display:flex; position:static; flex-direction:row; align-items:center; gap:var(--space-5); margin-left:var(--space-5); background:none; border:0; box-shadow:none; padding:0; }
  .omk-shell .omk-sh-link { padding:0; border:0; font-size:var(--text-small); }
  .omk-shell .omk-sh-small { font-size:var(--text-micro); }
  .omk-shell .omk-sh-login { margin-left:auto; }
  .omk-shell .omk-sh-cta { margin-left:0; }
  .omk-shell .omk-sh-burger { display:none; }
}

/* the site footer under a kit (includes/site/chrome-footer.php on the shell):
   site.css is not loaded on a kit page, so the few rules it needs live here,
   on the same tokens. The kit's own foot above it loses its mini-links. */
.omk-footer-kit-slim .omk-footer-kit-inner { padding-bottom:1.25rem; }
.omk-sf { background:var(--paper-2); border-top:1px solid var(--line); padding:var(--space-7) var(--gutter) var(--space-6); font-family:var(--font-text); color:var(--ink); }
.omk-sf-in { max-width:var(--container); margin:0 auto; display:grid; gap:var(--space-6); }
.omk-sf-logo { margin:0; }
.omk-sf-tag { color:var(--ink-2); max-width:36ch; margin:var(--space-3) 0; }
.omk-sf-verified { display:flex; gap:var(--space-2); align-items:center; margin:0; font-size:var(--text-small); font-weight:var(--weight-medium); }
.omk-sf-verified .omk-dot { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--verified); flex:none; }
.omk-sf-col { display:flex; flex-direction:column; gap:var(--space-2); }
.omk-sf-h { font:inherit; font-size:var(--text-small); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--ink-2); margin:0 0 var(--space-2); }
.omk-sf-col a { color:var(--ink); width:fit-content; }
.omk-sf-col a:hover { color:var(--accent-strong); }
.omk-sf-bottom { max-width:var(--container); margin:var(--space-7) auto 0; padding-top:var(--space-5); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; justify-content:space-between; }
.omk-sf-platforms { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.omk-badges { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-4); }
.omk-badge { display:inline-flex; align-items:center; gap:.35rem; color:var(--ink-2); font-size:var(--text-small); font-weight:var(--weight-medium); }
.omk-sf-label, .omk-sf-copy { margin:0; font-size:var(--text-small); color:var(--ink-2); }
.omk-sf-copy { display:flex; flex-wrap:wrap; gap:var(--space-4); }
.omk-sf-identity { display:block; width:100%; }
@media (min-width: 640px) { .omk-sf-in { grid-template-columns:repeat(3,1fr); } .omk-sf-brand { grid-column:1 / -1; } }
@media (min-width: 960px) { .omk-sf-in { grid-template-columns:1.6fr 1fr 1fr 1fr; } .omk-sf-brand { grid-column:auto; } }

/* K1 — the kit header at every width. Two rules only: the badge never wraps
   and never loses its name (it shrinks its type and its padding instead), and
   the wordmark truncates with an ellipsis rather than breaking across lines.
   "MEDIA KIT" is the one thing that may go: under 480px the kit's own eyebrow
   says it again, two lines below. */
.omk-header-kit .omk-header-inner { gap:clamp(.5rem,3vw,1.6rem); padding-left:clamp(.75rem,4vw,1.5rem); padding-right:clamp(.75rem,4vw,1.5rem); }
.omk-kit-brand { align-items:center; flex:0 1 auto; min-width:0; font-size:clamp(1rem,.92rem + .35vw,1.15rem); gap:clamp(.35rem,1.6vw,.6rem); }
.omk-kit-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.omk-kit-tag { flex:none; white-space:nowrap; display:none; }
.omk-powered { flex:none; white-space:nowrap; gap:.3rem;
  font-size:clamp(.68rem,.6rem + .29vw,.8rem);
  padding:clamp(.3rem,1.2vw,.45rem) clamp(.5rem,2.2vw,.8rem); }
.omk-powered .omk-powered-by { flex:none; }
.omk-logo-inline { font-size:1.0625em; }
@media (min-width: 480px) { .omk-kit-tag { display:inline; } }
/* the marketing site's small "example" frame is a 244px viewport: the badge
   gives up another point and a little padding rather than the wordmark. */
@media (max-width: 319px) { .omk-powered { font-size:.6rem; gap:.22rem; padding-left:.45rem; padding-right:.45rem; } }

/* password gate */
.omk-gate { max-width:460px; margin:2rem auto 0; text-align:left; }
.omk-gate-label { display:block; font-size:var(--text-small); font-weight:500; color:var(--ink-2); margin:0 0 .5rem; }
.omk-gate-row { display:flex; gap:.6rem; align-items:stretch; }
.omk-gate-row .omk-btn { flex:0 0 auto; white-space:nowrap; }
.omk-gate-input { flex:1 1 auto; min-width:0; min-height:3rem; padding:.75rem 1rem; font:inherit; font-size:1rem; font-family:var(--font-mono); border:1px solid var(--line-2); border-radius:var(--radius-2); background:var(--paper-0); color:var(--ink); box-shadow:var(--shadow-1); }
.omk-gate-input:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.omk-gate-hint { margin:.9rem 0 0; font-size:.85rem; color:var(--soft); }
@media (max-width: 480px) { .omk-gate-row { flex-direction:column; } }

/* docs: search + richer blocks */
.omk-docs-search-wrap { margin:1.6rem auto 0; max-width:560px; }
.omk-docs-search { width:100%; padding:.95rem 1.1rem; font:inherit; font-size:1rem; border:1px solid var(--line-2); border-radius:var(--radius-2); background:var(--paper-0); color:var(--ink); box-shadow:var(--shadow-1); }
.omk-docs-search:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.omk-docs-section h3 { font-size:1.05rem; margin:1.4rem 0 .5rem; }
.omk-docs-steps { padding-left:1.4rem; margin:.4rem 0 1rem; }
.omk-docs-steps li { margin:.35rem 0; }
.omk-docs-note { background:var(--paper-2); border-left:3px solid var(--accent); padding:.9rem 1.1rem; border-radius:var(--radius-2); font-size:.95rem; }
.omk-docs-toc-foot { margin:.9rem 0 0; font-size:.82rem; }
.omk-docs-toc-foot a { color:var(--accent-strong); font-weight:600; }
.omk-docs-empty { color:var(--soft); }

/* Ask Arton (docs page) */

/* headings in the shell body (legal, docs prose) share the display face */
.omk-shell-page h1, .omk-shell-page h2, .omk-shell-page h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; line-height:1.15; }
.omk-shell-page h1 { letter-spacing:-.02em; }

/* ------------------------------------------------ the kit inside an iframe */
/* ?omk_embed=1: no header, one line at the foot, no outer margins. */
.omk-footer-embed { display:flex; justify-content:center; padding:1rem 1rem 1.25rem; background:transparent; border:0; }
.omk-powered-embed { font-size:.75rem; }

/* ------------------------------- a full-bleed kit (Horizon) lines up with the shell's top (18 Oct 2026, kit DECISIONS 192)
   Horizon, the plugin's page, spans the window: its content starts at clamp(1.25rem,4vw,4rem) from each edge
   (x ≈ 58 px at 1440), where the site header's 1120 px column started at ≈ 192 and the kit strip's 1160 px column
   at ≈ 164. On a page holding the Horizon root they drop their column for the kit's own side padding, the brand
   bar too, so the logo, the creator's name and every Horizon title start on one line at every width. The other
   designs keep their centred columns. */
.omk-shell-wrap:has(.ywf-mk-hz) .omk-sh { --gutter:clamp(1.25rem,4vw,4rem); }
.omk-shell-wrap:has(.ywf-mk-hz) .omk-sh-in { max-width:none; }
.omk-shell-wrap:has(.ywf-mk-hz) .omk-header-kit .omk-header-inner,
.omk-shell-wrap:has(.ywf-mk-hz) .omk-kb-in { max-width:none; padding-left:clamp(1.25rem,4vw,4rem); padding-right:clamp(1.25rem,4vw,4rem); }
/* review fix-up (19 Oct 2026, kit DECISIONS 192), measured with the real menu (tools/local/horizon-pdf):
   - the no-kit notice printed under the site header (OMK_Site::notice) and the kit's own foot (its name, the verified
     note) take the kit's side padding too. The site footer keeps the site's column: it is the site's own band, the same
     four columns on every page of onemediakit.com, after the kit's foot;
   - a phone under 420 px: the row's gaps (10 px) and the button's side padding (12 px) narrow, so a visitor's row (logo,
     "Get my free kit", the menu button) fits the kit's width from 375 px and stays inside the window at 360 (the wider
     padding had pushed it 8 px past, 4 px on the other designs);
   - a desktop: the menu takes the free room, so the login link's margin-left:auto pushes "Log in" and the button to the
     kit's right edge (they stayed bunched on the left: the button ended at x ≈ 871 at 1440, the kit at ≈ 1382); its
     links never wrap, and its gaps narrow with the window (24 px down to 1rem) so the row still fits at 880 px, where the
     wider padding had sent "For brands", "For agencies" and "Log in" onto two lines. */
.omk-shell-wrap:has(.ywf-mk-hz) .omk-notice { max-width:none; margin-left:clamp(1.25rem,4vw,4rem); margin-right:clamp(1.25rem,4vw,4rem); }
.omk-shell-wrap:has(.ywf-mk-hz) .omk-footer-kit-inner { max-width:none; padding-left:clamp(1.25rem,4vw,4rem); padding-right:clamp(1.25rem,4vw,4rem); }
@media (max-width:419.98px) {
  .omk-shell-wrap:has(.ywf-mk-hz) .omk-sh-in { gap:.625rem; }
  .omk-shell-wrap:has(.ywf-mk-hz) .omk-sh-cta { padding-left:.75rem; padding-right:.75rem; }
}
@media (min-width:880px) {
  .omk-shell-wrap:has(.ywf-mk-hz) .omk-sh-nav { flex:1 1 auto; gap:clamp(1rem,2.25vw,1.5rem); }
  .omk-shell-wrap:has(.ywf-mk-hz) .omk-sh-link { white-space:nowrap; }
}