/* YCT how-it-works pages (yct/howto.py). Served from widget/v1/ so every product's CSP that already allows the status
   widget allows this too. One file, four skins by <html data-skin>. No web fonts: first paint is the text. */
:root { --bg: #fff; --surface: #fff; --ink: #1c1f23; --dim: #5b6470; --line: #e3e6ea; --accent: #2563eb; --on-accent: #fff;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --display: var(--font); }
[data-skin="sm"] { --bg: #0a2540; --surface: #0f2e4f; --ink: #f1f5f9; --dim: #a3b7cc; --line: #1f4569; --accent: #60a5fa; --on-accent: #0a2540; }
[data-skin="wb"] { --bg: #0e1830; --surface: #14213f; --ink: #eef2fa; --dim: #a3b3d1; --line: #26365c; --accent: #ff8a3d; --on-accent: #0e1830;
  --display: "Futura", "Century Gothic", "Avenir Next", "Nunito Sans", system-ui, sans-serif; }
[data-skin="lt"] { --bg: #f9f7f2; --surface: #ffffff; --ink: #1f1a14; --dim: #675d52; --line: #e3d9c8; --accent: #b3261e; --on-accent: #fff; }
[data-skin="fl"] { --bg: #f4ecdd; --surface: #fffdf8; --ink: #2a2118; --dim: #695c4c; --line: #e2d8c6; --accent: #8a3a1f; --on-accent: #fff;
  --font: "Cormorant Garamond", Garamond, Georgia, serif; --display: var(--font); }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 17px/1.55 var(--font); -webkit-text-size-adjust: 100%; }
body { margin: 0; }
a { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }
.hw-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.hw-brand { font: 700 20px/1.2 var(--display); color: var(--ink); text-decoration: none; }
.hw-bar nav { display: flex; gap: 18px; font-size: 15px; }
.hw-bar nav a { text-decoration: none; }
.hw-main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 48px; }
.hw-kicker { margin: 0 0 6px; color: var(--dim); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
h1 { font: 700 clamp(28px, 4.6vw, 42px)/1.15 var(--display); margin: 0 0 14px; }
h2 { font: 700 24px/1.25 var(--display); margin: 44px 0 16px; }
.hw-intro { max-width: 70ch; margin: 0 0 24px; font-size: 19px; }
.hw-cap, .hw-see { color: var(--dim); margin: 0 0 10px; }
.hw-pair { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.hw-shot { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.hw-shot figcaption { font-size: 13px; color: var(--dim); padding: 6px 10px; border-top: 1px solid var(--line); }
.hw-desktop { flex: 1 1 520px; max-width: 760px; }
.hw-phone { flex: 0 0 200px; width: 200px; }
.hw-hero .hw-desktop { flex-basis: 600px; }
.hw-hero .hw-phone { flex-basis: 220px; width: 220px; }
.hw-try { margin: 24px 0 0; }
.hw-btn { display: inline-block; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600;
  padding: 11px 20px; border-radius: 8px; }
.hw-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.hw-steps > li { counter-increment: s; position: relative; padding: 0 0 32px 48px; }
.hw-steps > li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--accent); color: var(--on-accent); }
.hw-say { font-weight: 600; margin: 3px 0 4px; font-size: 18px; }
.hw-only { font-weight: 400; font-size: 13px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
  margin-left: 6px; white-space: nowrap; }
.hw-more { padding-left: 20px; }
.hw-more li { margin: 6px 0; }
.hw-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.hw-cards a { display: flex; flex-direction: column; gap: 8px; height: 100%; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.hw-cards img { aspect-ratio: 1366 / 768; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.hw-card-t { font: 700 18px/1.3 var(--display); padding: 0 14px; }
.hw-card-d { color: var(--dim); font-size: 15px; padding: 0 14px 14px; }
.hw-foot { max-width: 1080px; margin: 0 auto; padding: 20px 20px 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
@media (max-width: 640px) {
  html { font-size: 16px; }
  .hw-steps > li { padding-left: 40px; }
  .hw-desktop { flex-basis: 100%; }
  .hw-phone, .hw-hero .hw-phone { flex-basis: 160px; width: 160px; }
}