/* SEO Runway public pages: print-proof theme (shared by home and platform pages) */
  /* ── Print-proof world: uncoated stock, five inks, key black ─────────────── */
  :root {
    --paper: #FAFAF8;
    --ink: #0B0C0E;
    /* channel inks, taken from the brands they connect to */
    --seo: #4285F4;  --seo-deep: #0B3A8F;     /* Google blue */
    --geo: #8E75B2;  --geo-deep: #3F2B73;     /* Gemini violet */
    --loc: #34A853;  --loc-deep: #0F5A27;     /* Google Maps green */
    --ads: #FBBC04;  --ads-deep: #5B4000;     /* Google yellow */
    --soc: #FF0069;  --soc-deep: #7A0030;     /* Instagram pink */
    --gem-grad: linear-gradient(115deg, #4796E3 0%, #9168C0 55%, #D96570 100%);
    --gem-band: linear-gradient(115deg, #5AA3EA 0%, #A585D4 52%, #E8828C 100%);
    --b-google: #4285F4; --b-gsc: #458CF5; --b-ga: #E37400; --b-red: #EA4335;
    --b-gpt: #10A37F; --b-gem: #8E75B2; --b-ppx: #1FB8CD;
    --b-fb: #0866FF; --b-ig: #FF0069; --b-in: #0A66C2;
    --rule: rgba(11, 12, 14, .28);
    --w: 0%;
    --dx: 0px;
    --dy: 0px;
    --acc: #0EA5E9;
  }
  html { scrollbar-color: var(--ink) var(--paper); }
  html body.font-sans, html body .font-sans, html body { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 100%; }
  /* shared header/footer are blue-purple gradient chrome; on this page they take the key-black ink */
  html body header a.bg-gradient-to-r, html body header .bg-gradient-to-tr, html body footer .bg-gradient-to-tr { background-image: none; background-color: var(--ink); box-shadow: none; }
  html body header .bg-sky-100 { background: var(--ads); color: var(--ink); border-color: var(--ink); }
  ::selection { background: var(--ink); color: var(--ads); }
  /* the shared layout paints soft gradient blobs behind every public page; this sheet is flat stock */
  body > .fixed.inset-0.pointer-events-none { display: none; }
  .pp { background: var(--paper); color: var(--ink); caret-color: var(--geo); }
  .pp a:focus-visible, .pp button:focus-visible, .pp summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .pp-on-dark a:focus-visible, .pp-on-dark button:focus-visible { outline-color: var(--ads); }

  .pp-wrap { max-width: 112rem; margin-inline: auto; padding-inline: clamp(24px, 4vw, 64px); }
  html body header .max-w-7xl, html body footer .max-w-7xl { max-width: 112rem; padding-inline: clamp(24px, 4vw, 64px); }
  .pp-d  { font-stretch: 125%; font-weight: 800; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
  .pp-h2 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.9rem, 3.5vw, 3.05rem); letter-spacing: -.03em; line-height: .98; text-wrap: balance; }
  .pp-h3 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.02em; line-height: 1.08; }
  .pp-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; max-width: 62ch; font-weight: 500; }
  .pp-label { font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; }
  .pp-mono { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: .01em; font-weight: 500; }
  .pp-num { font-variant-numeric: tabular-nums; }

  /* buttons: black ink block, square like a printed slug */
  .pp-btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.6rem; background: var(--ink); color: #fff; font-weight: 800; font-stretch: 112%; font-size: 1rem; border: 2px solid var(--ink); transition: background-color .18s, color .18s; }
  .pp-btn:hover { background: var(--ads); color: var(--ink); }
  .pp-btn--alt { background: transparent; color: var(--ink); }
  .pp-btn--alt:hover { background: var(--ink); color: #fff; }
  .pp-on-dark .pp-btn { background: #fff; color: var(--ink); border-color: #fff; }
  .pp-on-dark .pp-btn:hover { background: var(--ads); border-color: var(--ads); }
  .pp-link { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
  .pp-link:hover { text-decoration-color: var(--geo); }

  /* ── proof sheet (hero) ───────────────────────────────────────────────────── */
  .sheet-frame { position: relative; padding: 30px; }
  .crop { position: absolute; width: 22px; height: 22px; border: 0 solid var(--ink); pointer-events: none; }
  .crop--tl { top: 2px; left: 2px;  border-right-width: 1px; border-bottom-width: 1px; }
  .crop--tr { top: 2px; right: 2px; border-left-width: 1px;  border-bottom-width: 1px; }
  .crop--bl { bottom: 2px; left: 2px;  border-right-width: 1px; border-top-width: 1px; }
  .crop--br { bottom: 2px; right: 2px; border-left-width: 1px;  border-top-width: 1px; }
  .reg { position: absolute; width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 50%; pointer-events: none; }
  .reg::before, .reg::after { content: ''; position: absolute; background: var(--ink); }
  .reg::before { left: 50%; top: -5px; bottom: -5px; width: 1px; }
  .reg::after  { top: 50%; left: -5px; right: -5px; height: 1px; }
  .reg--t { top: 6px; left: 50%; translate: -50% 0; }
  .reg--b { bottom: 6px; left: 50%; translate: -50% 0; }
  .reg--l { left: 6px; top: 50%; translate: 0 -50%; }
  .reg--r { right: 6px; top: 50%; translate: 0 -50%; }
  .colorbar { display: flex; height: 12px; margin-bottom: 8px; }
  .colorbar span { flex: 1; }

  .sheet { position: relative; aspect-ratio: 760 / 540; background: #fff; isolation: isolate; container-type: inline-size; border: 1px solid var(--rule); overflow: hidden; }
  .plate { position: absolute; mix-blend-mode: multiply; overflow: hidden; padding: 1.4cqw 1.6cqw; font-size: clamp(11px, 1.7cqw, 12.5px); line-height: 1.25; border: 1px solid var(--ink-plate); background: color-mix(in srgb, var(--ink-plate) 24%, #fff); color: var(--ink-deep); transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: opacity .35s ease; }
  .plate.is-off { opacity: 0; }
  .plate--c { --ink-plate: var(--seo); --ink-deep: var(--seo-deep); left: 0;   top: 0;   width: 50%; height: 54%; --delay: 0s; }
  .plate--m { --ink-plate: var(--geo);  --ink-deep: var(--geo-deep);  left: 49%; top: 0;   width: 51%; height: 54%; --delay: .08s; }
  .plate--y { --ink-plate: var(--loc);  --ink-deep: var(--loc-deep);  left: 0;   top: 52%; width: 34%; height: 48%; --delay: .16s; }
  .plate--k { --ink-plate: var(--ads);  --ink-deep: var(--ads-deep);       left: 33%; top: 52%; width: 34%; height: 48%; --delay: .24s; }
  .plate--o { --ink-plate: var(--soc);  --ink-deep: var(--soc-deep);  left: 66%; top: 52%; width: 34%; height: 48%; --delay: .32s; }
  .plate h4 { font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: 1.02em; display: flex; justify-content: space-between; border-bottom: 1px solid currentColor; padding-bottom: .3em; margin-bottom: .45em; }
  .plate .row { display: flex; justify-content: space-between; gap: .6em; padding: .22em 0; border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); font-weight: 600; }
  .plate .row b { font-variant-numeric: tabular-nums; font-weight: 800; }
  .mx { display: grid; grid-template-columns: 1fr repeat(4, 2.5em); gap: .35em .3em; align-items: center; font-weight: 600; }
  .mx .hd { font-stretch: 75%; font-weight: 800; text-align: center; letter-spacing: .04em; }
  .dot { width: 1.05em; height: 1.05em; border: 1.5px solid currentColor; justify-self: center; }
  .dot--full { background: currentColor; }
  .dot--half { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
  .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: .28em; margin-top: .3em; }
  .grid5 i { aspect-ratio: 1; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-style: normal; font-weight: 800; font-size: .9em; font-variant-numeric: tabular-nums; }
  .grid5 i[data-r="1"] { background: #137333; color: #fff; border-color: #137333; }
  .grid5 i[data-r="2"], .grid5 i[data-r="3"] { background: #B7E1C1; }
  .grid5 i[data-r="4"] { background: #FDE293; }
  .grid5 i[data-r="5"] { background: #F6B8B2; border-color: var(--b-red); color: #8E1B12; }
  .bar { height: .6em; background: color-mix(in srgb, currentColor 18%, transparent); position: relative; flex: 1; align-self: center; }
  .bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: currentColor; }
  .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .22em; margin-top: .3em; }
  .cal i { aspect-ratio: 1.15; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); }
  .cal i.on { background: currentColor; }
  .cal i.half { background: color-mix(in srgb, currentColor 30%, transparent); }

  .switch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
  .switch button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1.5px solid var(--ink); background: #fff; font-weight: 800; font-stretch: 75%; letter-spacing: .08em; font-size: .8rem; text-transform: uppercase; color: var(--ink); transition: background-color .15s; }
  .switch button:hover { background: #f0f0ec; }
  .switch .sw { width: 16px; height: 16px; background: var(--sw); border: 1.5px solid var(--ink); }
  .switch button[aria-pressed="false"] { color: #6a6c72; border-style: dashed; }
  .switch button[aria-pressed="false"] .sw { background: transparent; }
  .switch .reset { margin-left: auto; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; padding: 7px 4px; }

  @media (max-width: 767px) {
    .sheet { aspect-ratio: auto; display: grid; gap: 0; padding: 14px 10px 14px; }
    .plate { position: relative; inset: auto; width: auto; height: auto; font-size: 12px; padding: 12px 14px; margin-top: -12px; }
    .plate:first-child { margin-top: 0; }
    .plate--c, .plate--m, .plate--y, .plate--k, .plate--o { left: auto; top: auto; width: auto; height: auto; }
    .plate--m { margin-left: 18px; } .plate--y { margin-right: 22px; } .plate--k { margin-left: 28px; } .plate--o { margin-right: 14px; }
    .sheet-frame { padding: 20px 6px; }
    .reg--l, .reg--r { display: none; }
  }

  /* ── channel bands: each ink owns a whole region ─────────────────────────── */
  .band { padding: 64px clamp(24px, 4vw, 64px); position: relative; }
  .band > .pp-wrap { padding-inline: 0; }
  @media (min-width: 1024px) { .band { padding-block: 88px; } }
  .band--c { background: var(--seo); }
  .band--m { background: var(--gem-band); }
  .band--y { background: var(--loc); }
  .band--a { background: var(--ads); }
  .band--k { background: var(--ink); color: #fff; }
  .band--o { background: var(--soc); }
  .band::before, .band::after { content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid currentColor; pointer-events: none; }
  .band::before { top: 18px; left: 18px; border-right-width: 1px; border-bottom-width: 1px; }
  .band::after { bottom: 18px; right: 18px; border-left-width: 1px; border-top-width: 1px; }
  .band-slug { margin-bottom: 28px; }
  .band-grid { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 1024px) { .band-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .band-grid--flip > :first-child { order: 2; } }
  .panel--cols { display: grid; gap: 28px; }
  @media (min-width: 1024px) { .panel--cols { grid-template-columns: 1.15fr .85fr; position: relative; } .rules--2 { columns: 2; column-gap: 2.5rem; } .rules--2 li { break-inside: avoid; } }
  .rules { list-style: none; margin: 0; padding: 0; }
  .rules li { border-top: 1.5px solid currentColor; padding: .8rem 0; font-size: 1rem; line-height: 1.45; font-weight: 500; }
  .rules li:last-child { border-bottom: 1.5px solid currentColor; }
  .rules strong { font-weight: 800; }
  .band .ai-pass { margin-top: 1.4rem; display: inline-flex; gap: .7rem; align-items: baseline; padding: .55rem .8rem; background: var(--ink); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.35; max-width: 46ch; }
  .band--k .ai-pass { background: #fff; color: var(--ink); }
  .ai-pass .pp-label { white-space: nowrap; color: var(--ads); }
  .band--k .ai-pass .pp-label { color: var(--geo-deep); }

  .panel { position: relative; isolation: isolate; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: 24px clamp(16px, 2.5vw, 32px) 20px; }
  .panel h4 { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1.5px solid var(--ink); padding-bottom: .5rem; margin-bottom: .7rem; }
  .panel .row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted var(--rule); font-weight: 600; font-size: .95rem; }
  .panel .row:last-child { border-bottom: 0; }
  .panel .pill { display: inline-block; min-width: 2.2em; text-align: center; padding: .12em .5em; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--ink); color: #fff; }
  .panel .pill--c { background: var(--seo); color: var(--ink); } .panel .pill--m { background: var(--geo); color: var(--ink); }
  .panel .pill--y { background: var(--ads); color: var(--ink); } .panel .pill--o { background: var(--soc); color: var(--ink); }
  .panel .cap { margin-top: .8rem; color: #4b4d53; }
  .sev { display: inline-block; width: 6.5rem; height: .7rem; background: rgba(11,12,14,.12); position: relative; flex: none; }
  .sev::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--seo); }
  .gg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .gg i { aspect-ratio: 1; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; font-style: normal; font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; background: #fff; transition: transform .15s; }
  .gg i:hover { transform: scale(1.14); }
  .gg i.t1 { background: #137333; color: #fff; border-color: #137333; } .gg i.t2 { background: #B7E1C1; } .gg i.t3 { background: #FDE293; } .gg i.t4 { background: #F6B8B2; border-color: var(--b-red); color: #8E1B12; }
  .cal-lg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-lg b { font-stretch: 75%; font-weight: 800; text-align: center; font-size: .75rem; letter-spacing: .08em; }
  .cal-lg i { min-height: 3.1rem; border: 1px solid var(--rule); font-style: normal; font-size: .7rem; font-weight: 700; padding: 3px 4px; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .cal-lg i s { text-decoration: none; display: flex; justify-content: center; margin-top: 3px; padding: 2px 3px; background: var(--b-ig); color: #fff; }
  .cal-lg i s.fb { background: var(--b-fb); } .cal-lg i s.in { background: var(--b-in); } .cal-lg i s .ico { width: 12px; height: 12px; }
  .apply { padding: .2rem .6rem; background: #1A73E8; color: #fff; font-weight: 800; font-size: .8rem; font-stretch: 85%; text-transform: uppercase; letter-spacing: .06em; }

  /* USP spec sheet */
  .spec { border-top: 3px solid var(--ink); }
  .spec-row { display: grid; gap: .8rem 3rem; padding: 1.7rem 0; border-bottom: 1.5px solid var(--ink); align-items: baseline; }
  @media (min-width: 1024px) { .spec-row { grid-template-columns: 1.15fr 1.2fr .9fr; } }
  .spec-row .pp-mono { color: #3d3f45; line-height: 1.7; }

  /* pricing, faq, proof */
  .tier-flag { position: absolute; top: -6px; right: 16px; padding: 4px 10px; background: var(--ink); color: #fff; font-stretch: 75%; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; font-size: .8rem; }
  .tier { position: relative; border-top: 6px solid var(--ink); background: #fff; padding: 1.6rem 1.4rem 1.4rem; display: flex; flex-direction: column; justify-content: space-between; border-inline: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .tier--pop { border-top-color: var(--seo); background: #E8F0FE; }
  .tier li { display: flex; gap: .6rem; padding: .5rem 0; border-top: 1px dotted var(--rule); font-size: .95rem; }
  details.faq { border-top: 1.5px solid var(--ink); }
  details.faq:last-child { border-bottom: 1.5px solid var(--ink); }
  details.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 0; display: flex; justify-content: space-between; gap: 1.5rem; font-weight: 800; font-stretch: 108%; font-size: 1.1rem; }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary::after { content: '+'; font-weight: 500; font-size: 1.6rem; line-height: 1; transition: rotate .2s; }
  details.faq[open] summary::after { rotate: 45deg; }
  details.faq p { padding: 0 3rem 1.3rem 0; max-width: 68ch; line-height: 1.6; font-weight: 500; }
  .slip { border: 1.5px solid var(--ink); padding: 1.4rem; background: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; }

  /* ── brand marks ── */
  .ico { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.15em; }
  .hd { display: inline-flex; align-items: center; gap: .45em; }
  .plate h4 .ico { width: 1.35em; height: 1.35em; }
  .logos { display: inline-flex; gap: .45em; align-items: center; }
  .gsearch { display: flex; align-items: center; gap: .5em; padding: .3em .8em; margin-bottom: .45em; border: 1.5px solid currentColor; border-radius: 999px; background: color-mix(in srgb, #fff 55%, transparent); font-weight: 600; }
  .gsearch .ico { width: 1.3em; height: 1.3em; }
  .mx i.lg { display: grid; place-items: center; }
  .mx i.lg .ico { width: 1.5em; height: 1.5em; }
  .gbtn { padding: .05em .55em; background: #1A73E8; color: #fff; border-radius: 3px; font-weight: 800; }
  .plate .row .hd .ico { width: 1.2em; height: 1.2em; }
  .brands { display: flex; flex-wrap: wrap; gap: 8px; margin: -.7rem 0 1.8rem; }
  .brands--top { margin-top: 1.25rem; }
  .brand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); font-weight: 700; font-size: .85rem; line-height: 1.2; }
  .brand .ico { width: 18px; height: 18px; }
  .eng { width: 2.1rem; height: 2.1rem; display: inline-grid; place-items: center; border: 1.5px solid var(--b); font-style: normal; }
  .eng .ico { width: 1.1rem; height: 1.1rem; }
  .eng--g { --b: var(--b-google); } .eng--o { --b: var(--b-gpt); } .eng--m { --b: var(--b-gem); } .eng--p { --b: var(--b-ppx); }
  .eng--cited { background: var(--b); color: #fff; }
  .eng--p.eng--cited { color: var(--ink); }
  .eng--mention { background: color-mix(in srgb, var(--b) 18%, #fff); color: var(--b); }
  .eng--absent { background: transparent; color: #8a8c92; border: 1.5px dashed #8a8c92; }
  .cal i.fb { background: var(--b-fb); } .cal i.ig { background: var(--b-ig); } .cal i.li { background: var(--b-in); }
  .ico--gem { fill: url(#gemGrad); }
  .eng--cited .ico--gem { fill: #fff; } .eng--absent .ico--gem { fill: #8a8c92; }
  .eng--m.eng--cited { background: var(--gem-grad); border-color: #9168C0; }
  .plate--m { --ink-plate: #9168C0; background: linear-gradient(115deg, color-mix(in srgb, #4796E3 24%, #fff), color-mix(in srgb, #9168C0 24%, #fff), color-mix(in srgb, #D96570 24%, #fff)); }
  /* real product screens */
  .plate { display: flex; flex-direction: column; }
  .plate h4 { flex: none; }
  .plate .shot { flex: 1; min-height: 0; display: block; width: 100%; object-fit: contain; object-position: center top; mix-blend-mode: multiply; }
  .panel--shot { margin: 0; }
  .panel .screen { display: block; width: 100%; max-width: 1148px; height: auto; margin-inline: auto; border: 1px solid var(--rule); background: #EEF4FB; }
  @media (max-width: 767px) { .plate .shot { flex: none; height: auto; max-height: 240px; } }
  /* ── compact product screens, rebuilt in HTML from the real app ── */
  .panel--mini { width: 100%; max-width: 680px; justify-self: center; padding: 16px 16px 14px; }
  .ui { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-stretch: 100%; font-size: 12px; line-height: 1.35; color: #1B2638; background: #EEF4FB; border-radius: 12px; padding: 14px; display: grid; gap: 10px; text-align: left; }
  .ui h5 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
  .ui .crumb, .ui .sub { color: #54647B; font-size: 12px; }
  .ui-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
  .ui-btns { display: flex; gap: 6px; flex-wrap: wrap; }
  .ui .btn { padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid #D7E0EC; font-weight: 700; font-size: 12px; white-space: nowrap; }
  .ui .btn.pri { background: #0870B5; border-color: #0870B5; color: #fff; }
  .ui .btn.amb { background: #B45309; border-color: #B45309; color: #fff; }
  .ui .card { background: #fff; border-radius: 10px; padding: 10px 12px; }
  .ui .ui-title { font-weight: 800; font-size: 12px; margin-bottom: 6px; }
  .ui .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .ui .kpi { border-radius: 10px; padding: 10px 11px; color: #fff; }
  .ui .kpi b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .ui .kpi small { font-size: 12px; }
  .ui .k-blue { background: #0A78B5; } .ui .k-green { background: #17843A; } .ui .k-gray { background: #5F6B7B; } .ui .k-red { background: #C93B3B; } .ui .k-navy { background: #1B63C4; }
  .ui-bar { display: flex; height: 8px; border-radius: 8px; overflow: hidden; background: #E3EAF3; }
  .ui-bar i { display: block; height: 100%; }
  .ui .dist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
  .ui .dist div { border: 1px solid #D7E0EC; border-radius: 8px; padding: 6px 8px; }
  .ui .dist b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
  .ui .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #DDF3F8; color: #0B6E8A; font-weight: 700; min-width: 0; font-size: 12px; }
  .ui .engs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .ui .eng-card .top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .ui .eng-card .logo { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #EEF4FB; flex: none; }
  .ui .eng-card .logo .ico { width: 16px; height: 16px; }
  .ui .eng-card .stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border: 1px solid #E3EAF3; border-radius: 8px; padding: 6px 2px; }
  .ui .eng-card .stats b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
  .ui .insight { display: grid; gap: 4px; }
  .ui .formrow { display: flex; gap: 6px; align-items: center; }
  .ui .field { flex: 1; padding: 6px 9px; border: 1px solid #D7E0EC; border-radius: 8px; background: #fff; color: #54647B; min-width: 0; }
  .ui .strip { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
  .ui .strip span { color: #54647B; display: block; font-size: 12px; }
  .ui .strip b { font-size: 14px; font-variant-numeric: tabular-nums; }
  .ui-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 360px; margin-inline: auto; }
  .ui-cell { aspect-ratio: 1.15; display: grid; place-items: center; border-radius: 8px; font-weight: 800; font-size: 12px; border: 1px solid transparent; color: #64748B; font-variant-numeric: tabular-nums; }
  .ui-cell.g { background: #C9EEDD; color: #086146; border-color: #34C58E; } .ui-cell.c { background: #D0F0F8; color: #066A85; border-color: #22B8D8; } .ui-cell.a { background: #FDEBD3; color: #92400E; border-color: #F59E0B; }
  .ui .tabs { display: flex; gap: 4px; flex-wrap: wrap; }
  .ui .tabs span { padding: 4px 9px; border-radius: 7px; color: #54647B; font-weight: 700; }
  .ui .tabs .on { background: #FDE6C7; color: #9A4A06; }
  .ui .rec .meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
  .ui .rec .tag { padding: 1px 8px; border-radius: 999px; font-weight: 800; font-size: 12px; }
  .ui .rec .tag.o { background: #FDE6C7; color: #9A4A06; } .ui .rec .tag.g { background: #D6F3E0; color: #0F6B33; } .ui .rec .tag.r { background: #FBD9D9; color: #A02727; }
  .ui .rec b.t { display: block; font-size: 12.5px; margin-bottom: 2px; }
  .ui .rec .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; color: #54647B; }
  .ui .rows { display: grid; }
  .ui-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 44px 112px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #E8EEF6; }
  .ui-row .cap1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  .ui-row .st { padding: 1px 7px; border-radius: 999px; background: #E8EEF6; color: #54647B; font-weight: 700; text-align: center; }
  .ui-row .pf { padding: 1px 8px; border-radius: 999px; border: 1px solid #D7E0EC; color: #54647B; font-weight: 700; text-align: center; }
  .ui-row.hdr { border-top: 0; color: #54647B; font-weight: 700; padding-top: 0; }
  @media (max-width: 520px) { .ui-row { grid-template-columns: 62px minmax(0, 1fr) 44px; } .ui-row .dt { display: none; } .ui .dist { grid-template-columns: repeat(2, 1fr); } }

  /* ── smooth state changes everywhere ── */
  .pp a, .pp button, .pp summary, .brand, .tier, .eng, .ui .btn { transition-property: color, background-color, border-color, text-decoration-color, opacity, box-shadow; transition-duration: .22s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
  .pp [id] { scroll-margin-top: 96px; }
  .band { isolation: isolate; }
  .band-ink { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .band.is-inked { background: none; }
  details.faq p { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  .footnote { background: var(--paper); border-top: 1.5px solid var(--ink); padding: 18px clamp(24px, 4vw, 64px); }
  /* ── motion: states that exist only while the script runs (content is visible by default) ── */
  .pp-js .plate { clip-path: inset(0% 100% 0% 0%); }
  .pp-js .sheet-frame .crop, .pp-js .sheet-frame .reg { opacity: 0; }
  .pp-js .sheet-frame .colorbar span { transform: scaleX(0); }
  .colorbar span { transform-origin: left; }
  .ghost { position: absolute; inset: -2px; border: 2px solid var(--g1); z-index: -1; pointer-events: none; }
  .ghost--b { border-color: var(--g2); }
  .band--c { --g1: var(--b-red); --g2: var(--ads); } .band--m { --g1: #fff; --g2: var(--ink); }
  .band--y { --g1: var(--seo); --g2: var(--b-red); } .band--a { --g1: var(--seo); --g2: var(--b-red); }
  .band--o { --g1: var(--seo); --g2: var(--ads); }
  #pressBar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; display: flex; transform-origin: left; transform: scaleX(0); pointer-events: none; }
  #pressBar span { flex: 1; }
  @media (prefers-reduced-motion: reduce) { #pressBar { display: none; } }
  /* shared footer takes the sheet's stock and ink on this page */
  html body footer { background: var(--paper); backdrop-filter: none; border-top: 3px solid var(--ink); }
  html body header .text-slate-400 { color: #3d3f45; }
  @media (prefers-reduced-motion: reduce) { .plate { transition: opacity .2s; } .pp-btn { transition: none; } }

/* ═══════════ interactive product screens (shared) ═══════════ */
.is-hidden { display: none !important; }
.ui .is-pending { opacity: 0; }
.ui .ui-split { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ui .split2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.ui button.btn { font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; color: inherit; }
.ui button.btn.pri, .ui button.btn.amb { color: #fff; }
.ui .btn:hover { border-color: #1B2638; }
.ui .btn.is-on, .ui .btn.pri.is-on, .ui .btn.amb.is-on { background: #17843A; border-color: #17843A; color: #fff; }
.ui .btn[disabled] { cursor: default; opacity: .85; }
.ui .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ui .chip { padding: 5px 11px; border-radius: 999px; border: 1px solid #D7E0EC; background: #fff; font: inherit; font-weight: 700; cursor: pointer; color: #1B2638; text-align: left; }
.ui .chip:hover { border-color: #1B2638; }
.ui .chip.is-on, .ui .chip.on { background: #1B2638; color: #fff; border-color: #1B2638; }
.ui .rows { display: grid; }
.ui .ui-row2 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #E8EEF6; }
.ui .ui-row2:first-child { border-top: 0; }
.ui .ui-row2 .ico { width: 22px; height: 22px; }
.ui .ico-dot { width: 22px; height: 22px; border-radius: 50%; background: #D6F3E0; color: #0F6B33; display: grid; place-items: center; font-weight: 800; }
.ui .ui-row3 { display: grid; grid-template-columns: minmax(0, 1.7fr); grid-auto-flow: column; grid-auto-columns: minmax(54px, auto); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #E8EEF6; }
.ui .ui-row3.hdr { border-top: 0; color: #54647B; font-weight: 700; padding-top: 0; }
.ui .ui-row3.rk { cursor: pointer; border-radius: 6px; }
.ui .ui-row3.rk.on { background: #EEF4FB; }
.ui .num { text-align: right; font-variant-numeric: tabular-nums; }
.ui .kd { display: block; height: 6px; border-radius: 6px; background: #E3EAF3; position: relative; min-width: 60px; }
.ui .kd i { position: absolute; inset: 0 auto 0 0; background: #0A78B5; border-radius: 6px; }
.ui .delta { font-weight: 800; white-space: nowrap; } .ui .delta.up { color: #0F6B33; } .ui .delta.dn { color: #A02727; }
.ui .spark { width: 64px; height: 20px; }
.ui .tabs button { padding: 4px 10px; border-radius: 7px; border: 0; background: transparent; font: inherit; font-weight: 700; color: #54647B; cursor: pointer; }
.ui .tabs button.on { background: #1B2638; color: #fff; }
.ui .issue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #E8EEF6; transition: opacity .3s; }
.ui .issues { display: grid; margin-top: 6px; }
.ui .issue.is-done { opacity: .6; }
.ui .tag { padding: 1px 8px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap; }
.ui .tag.r { background: #FBD9D9; color: #A02727; } .ui .tag.o { background: #FDE6C7; color: #8A4305; } .ui .tag.b { background: #D6E7FB; color: #1B4F9A; } .ui .tag.g { background: #D6F3E0; color: #0F6B33; }
.ui .issue.is-done .tag { background: #D6F3E0; color: #0F6B33; }
.ui .gauge-wrap { position: relative; width: 112px; height: 112px; margin: 0 auto 6px; }
.ui .gauge { width: 100%; height: 100%; } .ui .gauge circle[data-ring] { transition: stroke-dasharray .6s cubic-bezier(.16, 1, .3, 1), stroke .4s; }
.ui .gauge-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ui .gauge-n b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; } .ui .gauge-n small { color: #54647B; font-size: 12px; }
.ui .meter { height: 10px; border-radius: 10px; background: #E3EAF3; overflow: hidden; }
.ui .meter i { display: block; height: 100%; width: 0; background: #17843A; transition: width .5s cubic-bezier(.16, 1, .3, 1); }
.ui .meter-n { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } .ui .meter-n b { font-size: 26px; font-variant-numeric: tabular-nums; }
.ui .checks { display: grid; gap: 6px; margin-top: 6px; } .ui .checks.row { display: flex; flex-wrap: wrap; gap: 12px; }
.ui .check { display: flex; gap: 7px; align-items: center; cursor: pointer; } .ui .check input { accent-color: #1B63C4; width: 15px; height: 15px; }
.ui .draft { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #F4F8FD; border: 1px dashed #C0CFE4; }
.ui .draft p { margin: 4px 0 0; }
.ui .pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ui .pcol { background: #fff; border-radius: 10px; padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 128px; }
.ui .pcol-h { font-weight: 800; }
.ui .pcard { background: #EEF4FB; border-radius: 8px; padding: 6px 8px; display: grid; cursor: pointer; border: 1px solid transparent; }
.ui .pcard:hover { border-color: #1B63C4; }
.ui .rp { padding: 8px 0; border-top: 1px solid #E8EEF6; display: grid; }
.ui .form2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 6px; } .ui .form2 label { display: grid; gap: 3px; font-weight: 700; }
.ui .mx2 { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, 34px); gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #E8EEF6; }
.ui .mx2.hdr { border-top: 0; padding-top: 0; } .ui .mx2 .lg { display: grid; place-items: center; } .ui .mx2 .lg .ico { width: 18px; height: 18px; }
.ui .cell { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #17843A; display: inline-block; justify-self: center; vertical-align: middle; }
.ui .cell.cited { background: #17843A; } .ui .cell.mention { background: linear-gradient(90deg, #17843A 50%, #fff 50%); } .ui .cell.absent { background: #fff; border: 1.5px dashed #8A98AD; }
.ui .legend { margin-top: 8px; display: flex; gap: 8px; align-items: center; color: #54647B; flex-wrap: wrap; } .ui .legend .cell { width: 14px; height: 14px; }
.ui .sel-list { display: grid; gap: 6px; align-content: start; }
.ui .ans { margin: 6px 0; font-size: 13px; } .ui mark { background: #FDE293; padding: 0 3px; border-radius: 3px; }
.ui .hbar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; gap: 8px; align-items: center; margin: 7px 0; }
.ui .hbar i { display: block; height: 8px; border-radius: 8px; background: #6366F1; } .ui .hbar.me i { background: #17843A; } .ui .hbar b { text-align: right; font-variant-numeric: tabular-nums; }
.ui .chart { width: 100%; height: 120px; display: block; } .ui .axis { display: flex; justify-content: space-between; color: #54647B; }
.ui .qr { width: 96px; height: 96px; margin: 6px auto 10px; background: conic-gradient(#1B2638 25%, #fff 0 50%, #1B2638 0 75%, #fff 0) 0 0 / 16px 16px; border: 6px solid #fff; outline: 1px solid #D7E0EC; }
.ui .code { margin: 0; padding: 10px; background: #0F1A2E; color: #DCE8FA; border-radius: 8px; font-family: 'Geist Mono', monospace; font-size: 12px; overflow: auto; white-space: pre-wrap; }
.ui .adprev { display: grid; gap: 3px; } .ui .adprev b { color: #1A0DAB; font-size: 14px; }
.ui .cal3 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .ui .cal3 > b { text-align: center; }
.ui .cd { min-height: 46px; border: 1px solid #E3EAF3; border-radius: 6px; padding: 3px 4px; display: grid; align-content: start; gap: 3px; } .ui .cd .d { font-size: 12px; color: #54647B; }
.ui .cd s { display: flex; justify-content: center; padding: 2px; border-radius: 4px; color: #fff; text-decoration: none; background: #FF0069; } .ui .cd s.fb { background: #0866FF; } .ui .cd s.li { background: #0A66C2; } .ui .cd s .ico { width: 12px; height: 12px; }
.ui .ta { width: 100%; font: inherit; border: 1px solid #D7E0EC; border-radius: 8px; padding: 8px; resize: vertical; }
.ui .postprev { display: flex; gap: 8px; padding: 8px; border: 1px solid #E3EAF3; border-radius: 8px; background: #fff; margin-top: 6px; } .ui .postprev .ico { width: 20px; height: 20px; flex: none; }
.ui .drop { border: 1.5px dashed #8A98AD; border-radius: 10px; padding: 16px; text-align: center; color: #54647B; }
.ui .tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.ui .tile { aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; cursor: pointer; } .ui .tile.is-on { border-color: #1B2638; outline: 2px solid #fff; }
.ui .t1 { background: linear-gradient(135deg, #4796E3, #9168C0); } .ui .t2 { background: linear-gradient(135deg, #FBBC04, #FF6A13); } .ui .t3 { background: linear-gradient(135deg, #34A853, #00AEEF); }
.ui .t4 { background: linear-gradient(135deg, #FF0069, #FBBC04); } .ui .t5 { background: linear-gradient(135deg, #0A66C2, #4796E3); } .ui .t6 { background: linear-gradient(135deg, #1B2638, #5F6B7B); }
.ui .alert { padding: 8px 10px; border-radius: 8px; background: #FBD9D9; color: #8E1B1B; font-weight: 700; margin-top: 6px; }
.ui .pf { padding: 1px 8px; border-radius: 999px; border: 1px solid #D7E0EC; color: #54647B; font-weight: 700; text-align: center; }
.ui .ui-bar-cta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui .pill.ok { background: #D6F3E0; color: #0F6B33; } .ui .pill.warn { background: #FDE6C7; color: #8A4305; }
.ui .sub b { color: #1B2638; }
.ui .cap1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .ui .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui .hbar { grid-template-columns: 90px minmax(0, 1fr) 36px; } .ui .tiles { grid-template-columns: repeat(3, 1fr); } .ui .ui-row3 { grid-auto-flow: row; grid-template-columns: 1fr; gap: 4px; } }

/* ═══════════ platform pages ═══════════ */
.band--p { background: var(--paper); }
.band--p::before, .band--p::after { color: var(--ink); }
.plat-hero { padding-block: 72px 64px; }
@media (min-width: 1024px) { .plat-hero { padding-block: 104px 88px; } }
.plat-hero .lede { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .plat-hero .lede { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.jlist { list-style: none; margin: 0; padding: 0; }
.jlist li { border-top: 1.5px solid currentColor; }
.jlist li:last-child { border-bottom: 1.5px solid currentColor; }
.jlist a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: .75rem 0; font-weight: 700; transition: translate .25s cubic-bezier(.16, 1, .3, 1); }
.jlist a b { font-family: 'Geist Mono', monospace; font-weight: 500; }
.jlist a:hover { translate: 8px 0; }
.jlist small { font-weight: 500; display: block; }
.journey { position: sticky; top: 81px; z-index: 40; background: var(--paper); border-block: 1.5px solid var(--ink); display: flex; gap: 6px; overflow-x: auto; padding: 10px clamp(24px, 4vw, 64px); scrollbar-width: thin; }
.journey a { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border: 1.5px solid var(--ink); font-weight: 800; font-stretch: 90%; white-space: nowrap; font-size: .85rem; color: var(--ink); background: #fff; }
.journey a b { font-family: 'Geist Mono', monospace; font-weight: 500; }
.journey a.on { background: var(--ink); color: #fff; }
.step { scroll-margin-top: 140px; }
.handoff { display: flex; gap: 10px; align-items: flex-start; margin-top: 1.4rem; padding: .85rem 0 0; border-top: 1.5px solid currentColor; font-weight: 600; }
.handoff svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.stepnav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1rem; }
.stepnav a { display: inline-flex; gap: .5rem; align-items: center; padding: .6rem 1rem; border: 1.5px solid currentColor; font-weight: 800; font-size: .92rem; }
.stepnav a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.plat-end { padding-block: 72px; }
.plat-end .others { display: grid; }
.plat-end .others a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: .9rem 0; border-top: 1.5px solid rgba(255, 255, 255, .5); font-weight: 700; color: #fff; }
.plat-end .others a:last-child { border-bottom: 1.5px solid rgba(255, 255, 255, .5); }
.plat-end .others a:hover { color: var(--ads); }
.plat-end .others small { font-weight: 500; opacity: .85; display: block; }

/* ═══════════ team workspace, chat, tasks ═══════════ */
.ui .ch { padding: 1px 8px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap; display: inline-block; }
.ui .ch.seo { background: #D6E7FB; color: #1B4F9A; } .ui .ch.loc { background: #D6F3E0; color: #0F6B33; } .ui .ch.ads { background: #FDE7B0; color: #5B4000; } .ui .ch.soc { background: #FFD6E5; color: #8A0037; }
.ui .ch.geo { background: linear-gradient(115deg, #D6E7FB, #E6DCF4, #F7D9DD); color: #3F2B73; }
.ui .avatar, .avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: #1B2638; color: #fff; font: 800 11px 'Plus Jakarta Sans', system-ui, sans-serif; flex: none; }
.ui .avatar.client { background: #0A66C2; }
.ui .msgs { display: grid; gap: 8px; max-height: 190px; overflow: auto; align-content: start; padding-right: 2px; }
.ui .msg { display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: #EEF4FB; max-width: 88%; justify-self: start; }
.ui .msg.me { background: #1B63C4; color: #fff; justify-self: end; } .ui .msg.me b { color: #DCE8FA; }
.ui .msg b { font-size: 12px; color: #54647B; }
.ui .chat-in { display: flex; gap: 6px; margin-top: 8px; } .ui .chat-in .field { color: #1B2638; }
.ui .timer { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.ui .hbar.hot i { background: #C93B3B; }
.ui .pcard .ch { justify-self: start; margin-bottom: 3px; }
.ui .ui-row2 > .ch { justify-self: start; }

/* "make it a task" */
.mktask { margin-top: 1rem; }
.mktask .mk-btn { display: inline-flex; gap: .5rem; align-items: center; padding: .55rem 1rem; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 800 .92rem 'Archivo', sans-serif; font-stretch: 100%; cursor: pointer; }
.mktask .mk-btn:hover, .mktask .mk-btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pp-on-dark .mktask .mk-btn:hover, .pp-on-dark .mktask .mk-btn.is-on { background: #fff; color: var(--ink); border-color: #fff; }
.mktask .mk-out { margin-top: .8rem; display: grid; gap: .5rem; }
.mktask .mk-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.mktask .mk-card .ch { padding: 1px 8px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap; background: #E8EEF6; }
.mktask .mk-card .ch.seo { background: #D6E7FB; color: #1B4F9A; } .mktask .mk-card .ch.loc { background: #D6F3E0; color: #0F6B33; } .mktask .mk-card .ch.ads { background: #FDE7B0; color: #5B4000; } .mktask .mk-card .ch.soc { background: #FFD6E5; color: #8A0037; }
.mktask .mk-card .ch.geo { background: linear-gradient(115deg, #D6E7FB, #E6DCF4, #F7D9DD); color: #3F2B73; }
.mktask .mk-t { display: grid; flex: 1; min-width: 0; } .mktask .mk-t span { font-size: .85rem; color: #4b4d53; font-weight: 500; }
.mktask .avatar { width: 30px; height: 30px; background: var(--ink); color: #fff; font: 800 11px 'Plus Jakarta Sans', system-ui, sans-serif; border-radius: 50%; display: inline-grid; place-items: center; }

/* key-black pages and bands */
.band--k { --g1: var(--seo); --g2: var(--soc); }
.band--k .stepnav a:hover { background: #fff; color: var(--ink); border-color: #fff; }
.band--k .handoff, .band--k .rules li { border-color: rgba(255, 255, 255, .6); }

/* ═══════════ public pages: about, blog, contact, pricing, faq, legal ═══════════ */
.page-hero { padding-block: 72px 64px; }
@media (min-width: 1024px) { .page-hero { padding-block: 104px 88px; } }
.page-hero .lede { display: grid; gap: clamp(28px, 5vw, 80px); align-items: end; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .page-hero .lede { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.sect { padding-block: clamp(56px, 7vw, 104px); position: relative; }
.sect--paper { background: var(--paper); }
.sect--white { background: #fff; border-block: 1.5px solid var(--ink); }
.sect-grid { display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .sect-grid--2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .sect-grid--eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.edge-pad { padding-inline: clamp(24px, 4vw, 64px); }
.spec-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.spec-list li { display: grid; gap: .35rem 2rem; padding: 1.3rem 0; border-bottom: 1.5px solid var(--ink); }
@media (min-width: 900px) { .spec-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; } }
.spec-list h3 { margin: 0; }
.spec-list p { margin: 0; line-height: 1.55; font-weight: 500; }
.notice { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; padding: .6rem .8rem; border: 1.5px dashed currentColor; }

/* forms */
.pform { display: grid; gap: 18px; }
.pform label { display: grid; gap: 6px; font-weight: 800; font-stretch: 90%; }
.pform input, .pform select, .pform textarea { width: 100%; font: inherit; font-weight: 500; font-stretch: 100%; padding: .8rem .9rem; border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 0; }
.pform input:focus, .pform select:focus, .pform textarea:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.pform .row2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pform .has-err input, .pform .has-err select, .pform .has-err textarea { border-color: #C93B3B; background: #FFF5F5; }
.pform .err { color: #8E1B1B; font-weight: 700; font-size: .9rem; }
.pform .hint { color: #3d3f45; font-weight: 500; font-size: .85rem; display: flex; justify-content: space-between; gap: 1rem; }
.pform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pmsg { border: 2px solid var(--ink); padding: .9rem 1rem; font-weight: 700; background: #fff; margin-bottom: 1rem; }
.pmsg.ok { background: #D6F3E0; } .pmsg.err { background: #FBD9D9; }
.contact-list { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.contact-list li { padding: 1rem 0; border-bottom: 1.5px solid var(--ink); display: grid; gap: .2rem; }
.contact-list b { font-stretch: 75%; text-transform: uppercase; letter-spacing: .09em; font-size: .85rem; }

/* blog */
.chipbar { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbar a { padding: .5rem 1rem; border: 1.5px solid var(--ink); font-weight: 800; font-stretch: 90%; font-size: .9rem; background: #fff; color: var(--ink); }
.chipbar a.on, .chipbar a:hover { background: var(--ink); color: #fff; }
.blog-row { display: grid; gap: 16px 28px; padding: 1.5rem 0; border-top: 1.5px solid var(--ink); align-items: start; }
.blog-row:last-child { border-bottom: 1.5px solid var(--ink); }
@media (min-width: 900px) { .blog-row { grid-template-columns: 220px minmax(0, 1fr) 150px; } }
.blog-thumb { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; border: 2px solid var(--ink); background: #E3EAF3; display: block; }
.blog-row h3 { margin: 0 0 .4rem; }
.blog-row:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.meta { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; display: grid; gap: .3rem; }
.avatar-i { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.featured { display: grid; gap: 24px 48px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .featured { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.featured .blog-thumb { aspect-ratio: 16 / 10; }
.article { max-width: 68ch; }
.article p { line-height: 1.75; font-size: 1.08rem; font-weight: 500; margin: 0 0 1.15em; }
.article h2 { font-stretch: 112%; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; margin: 2.2rem 0 .7rem; line-height: 1.1; }
.takeaways { border: 2px solid var(--ink); padding: 1.2rem 1.4rem; background: #fff; margin: 1.6rem 0; }
.takeaways ul { margin: .6rem 0 0; padding-left: 1.2rem; list-style: square; display: grid; gap: .5rem; font-weight: 600; }
.pull { font-stretch: 112%; font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; border-top: 6px solid var(--ink); padding-top: 1rem; margin: 2rem 0; max-width: 28ch; }
.comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 1rem 0; border-top: 1.5px solid var(--ink); }

/* legal and long-form documents */
.doc { display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .doc { grid-template-columns: 250px minmax(0, 1fr); } }
.toc { position: sticky; top: 104px; align-self: start; display: none; }
@media (min-width: 1024px) { .toc { display: block; } }
.toc a { display: block; padding: .5rem 0; border-top: 1px solid var(--rule); font-weight: 700; font-size: .92rem; color: #3d3f45; }
.toc a:hover, .toc a.on { color: var(--ink); border-top-color: var(--ink); }
.toc a.on { border-top-width: 3px; }
.doc-body { max-width: 72ch; }
.doc-body h2 { font-stretch: 112%; font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.1; margin: 2.6rem 0 .8rem; scroll-margin-top: 100px; padding-top: 1rem; border-top: 3px solid var(--ink); }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-weight: 800; margin: 1.4rem 0 .4rem; }
.doc-body p, .doc-body li { line-height: 1.75; font-weight: 500; }
.doc-body p { margin: 0 0 1em; }
.doc-body ul { padding-left: 1.2rem; list-style: square; display: grid; gap: .45rem; margin: 0 0 1em; }
.doc-body a { text-decoration: underline; text-underline-offset: 4px; font-weight: 700; }

/* pricing */
.cyc { display: inline-flex; border: 2px solid var(--ink); background: #fff; padding: 4px; gap: 4px; }
.cyc button { padding: .55rem 1.1rem; font: 800 .9rem 'Archivo', sans-serif; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.cyc button.on { background: var(--ink); color: #fff; }
.jump { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-weight: 700; }
.tier-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 900px) { .tier-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tier-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tier-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tier h3 { margin: 0; }
.tier .mod { align-self: flex-start; padding: 2px 9px; font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; color: var(--ink); margin-bottom: .6rem; display: inline-block; }
.tier .mod.ai_search { background: var(--gem-band); } .tier .mod.local_seo { background: var(--loc); } .tier .mod.google_ads { background: var(--ads); } .tier .mod.social_media { background: var(--soc); }
.tier .mod.core, .tier .mod.bundle { background: var(--seo); }
.tier .pp-btn { justify-content: center; width: 100%; }
.po-tag { font-weight: 800; line-height: 1.3; margin: .9rem 0; }
.po-out { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; font-weight: 700; font-size: .92rem; }
.po-box { border: 1.5px solid var(--ink); padding: .8rem 1rem; margin-bottom: 1rem; background: var(--paper); }
.po-h { font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; margin-bottom: .4rem; }
.po-list { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; }
.po-list li { padding: .35rem 0; border-top: 1px dotted var(--rule); font-weight: 600; font-size: .92rem; }
.po-list li:first-child { border-top: 0; }
details.po-more { border-top: 1.5px solid var(--ink); }
details.po-more summary { cursor: pointer; list-style: none; padding: .8rem 0; font-weight: 800; font-stretch: 100%; display: flex; justify-content: space-between; }
details.po-more summary::-webkit-details-marker { display: none; }
details.po-more summary::after { content: '+'; font-size: 1.3rem; line-height: 1; transition: rotate .2s; }
details.po-more[open] summary::after { rotate: 45deg; }
.po-g { margin-top: .8rem; } .po-g b { display: block; margin-bottom: .3rem; }
.po-g ul { margin: 0; padding-left: 1.1rem; list-style: square; display: grid; gap: .3rem; font-size: .9rem; font-weight: 500; }
.modbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.6rem; }
.modbar button { padding: .55rem 1.1rem; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 800 .9rem 'Archivo', sans-serif; cursor: pointer; }
.modbar button.on { background: var(--ink); color: #fff; }
.faq-cat { margin-bottom: 2.6rem; }

.tier.hidden { display: none !important; }

.pform .err:empty { display: none; }
.pform .row2 { align-items: start; }

/* agency hub */
.ui .swatches { display: flex; gap: 8px; margin-top: 4px; }
.ui .swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; outline: 1px solid #C0CFE4; cursor: pointer; }
.ui .swatch.is-on { outline: 3px solid #1B2638; }
.ui .rpv { border: 1px solid #D7E0EC; border-radius: 10px; overflow: hidden; background: #fff; }
.ui .rpv-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--acc, #0EA5E9); color: #fff; transition: background .3s; }
.ui .rpv-logo { width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, .25); display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; }
.ui .rpv-t { padding: 10px 12px 2px; font-size: 14px; }
.ui .rpv .rp { padding: 8px 12px; }
.ui .rpv-f { padding: 8px 12px; border-top: 1px solid #E8EEF6; color: #54647B; }
.ui .send { display: block; height: 6px; border-radius: 3px; background: #17843A; }

/* blog: detail (contents · article · notes) and list (lead story + index) */
.bd-open-grid { display: grid; gap: 32px 56px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .bd-open-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.bd-plate { aspect-ratio: 4 / 3; }
.bd-by { display: flex; align-items: center; gap: 12px; margin-top: 2rem; padding-top: 1rem; border-top: 1.5px solid var(--ink); flex-wrap: wrap; }
.bd-by-meta { margin-left: auto; text-align: right; }
.bd { display: grid; gap: 32px clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); border-top: 3px solid var(--ink); padding-top: clamp(28px, 4vw, 48px); }
@media (min-width: 1100px) { .bd { grid-template-columns: 210px minmax(0, 1fr) 280px; } }
.bd-body { max-width: 70ch; scroll-margin-top: 100px; }
.bd-body > p:first-child { font-size: 1.2rem; }
.bd-body .takeaways { scroll-margin-top: 100px; }
.bd-rail { display: grid; gap: 16px; align-content: start; }
@media (min-width: 1100px) { .bd-rail { position: sticky; top: 104px; align-self: start; } }
.bd-card { border: 2px solid var(--ink); background: #fff; padding: 1.1rem 1.2rem; }
.bd-card--k { background: var(--ink); color: #fff; }
.bd-share { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-share a, .bd-share button { padding: .45rem .8rem; border: 1.5px solid var(--ink); font-weight: 800; font-stretch: 90%; font-size: .85rem; background: #fff; color: var(--ink); cursor: pointer; }
.bd-share a:hover, .bd-share button:hover { background: var(--ink); color: #fff; }
.bl-mast { display: grid; gap: 24px 48px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 1100px) { .bl-mast { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .bl-mast .chipbar { justify-content: flex-end; } }
.bl-lead-grid { display: grid; gap: 28px 56px; grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: clamp(8px, 2vw, 24px); }
@media (min-width: 1024px) { .bl-lead-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.bl-lead .blog-thumb { aspect-ratio: 4 / 3; }
.bl-row { display: grid; gap: 14px 28px; padding: 1.7rem 0; border-top: 1.5px solid var(--ink); align-items: start; }
.bl-row:last-child { border-bottom: 1.5px solid var(--ink); }
.bl-no { font-size: 13px; font-weight: 600; }
.bl-thumb { max-width: 220px; }
@media (min-width: 900px) { .bl-row { grid-template-columns: 56px minmax(0, 1fr) 130px 200px; } .bl-thumb { max-width: none; } }
.bl-row h3 { margin: 0 0 .5rem; }
.bl-row:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.bd-body .pull { font-size: clamp(1.15rem, 1.6vw, 1.45rem); max-width: none; line-height: 1.3; }
.bd-body { max-width: 78ch; width: 100%; margin-inline: auto; }
.bd-body p { font-size: 1.15rem; line-height: 1.8; }
.bd-body > p:first-child { font-size: 1.3rem; }
@media (min-width: 1100px) { .bd { grid-template-columns: 220px minmax(0, 1fr) 300px; } }
.bd-body { max-width: 86ch; } .bd-body p { font-size: 1.2rem; }

/* list rows and lead story: whole row clickable through the title link, author link stays separate */
.bl-row { position: relative; }
.bl-row h3 a::after { content: ''; position: absolute; inset: 0; }
.bl-row .au-link { position: relative; z-index: 2; }
.bl-row:hover h3 a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.bl-lead h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* author page: sticky profile + feed */
.au { display: grid; gap: 32px clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .au { grid-template-columns: 340px minmax(0, 1fr); } }
.au-card { border: 2px solid var(--ink); background: #fff; padding: 1.5rem; }
.au-side { display: grid; gap: 16px; }
@media (min-width: 1024px) { .au-side { position: sticky; top: 104px; } }
.au-plate { width: 88px; height: 88px; background: var(--ink); color: #fff; display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: 2.6rem; margin-bottom: 1rem; }
.au-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.au-topics span { padding: .3rem .7rem; border: 1.5px solid var(--ink); font-weight: 800; font-stretch: 90%; font-size: .82rem; }
.au-lead { position: relative; display: grid; gap: 20px 32px; grid-template-columns: minmax(0, 1fr); padding-bottom: 2rem; border-bottom: 3px solid var(--ink); margin-bottom: 2rem; }
@media (min-width: 900px) { .au-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.au-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .au-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.au-post { position: relative; display: grid; gap: 12px; align-content: start; }
.au-post h3 a::after, .au-lead h2 a::after { content: ''; position: absolute; inset: 0; }
.au-post:hover h3 a, .au-lead:hover h2 a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.au-others a { display: block; padding: .55rem 0; border-top: 1px solid var(--rule); font-weight: 700; }
.au-others a:hover { border-top-color: var(--ink); }
.au-lead h2 { font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.1; }