/*
 * Components — the shared set every screen composes (spec §3: no one-off styles).
 *
 * Lifted from the tMP golfer profile (assets/golfer/golfer.css: .gp-btn, .gp-list/.gp-row, .gp-tabs,
 * .gp-sec, .gp-stats, .gp-prog, .gp-sheet, .gp-toast, .gp-f, .gp-seg, .gp-empty, .gp-busy, .gp-tag)
 * and the stoplight pin pulse. Colours, type and radii come only from tokens.css.
 * Mobile-first: the base rules are the phone; min-width queries scale up.
 */

/* ---------- root ---------- */
.hw, .hw-layer, .hw-toast { font-family: var(--hw-sans); color: var(--hw-ink2); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5; }
.hw *, .hw *::before, .hw *::after, .hw-layer *, .hw-layer *::before, .hw-layer *::after { box-sizing: border-box; }
.hw { background: var(--hw-paper); min-height: 100vh; padding: 0 var(--hw-pad) 96px; }
.hw a { color: var(--hw-blue); text-decoration: none; }
.hw a:hover { color: var(--hw-ink); }
.hw button, .hw-layer button { font: inherit; color: inherit; cursor: pointer; }
.hw :focus-visible, .hw-layer :focus-visible { outline: 2px solid var(--hw-accent); outline-offset: 2px; }
.hw p { margin: 0; }
.hw h1, .hw h2, .hw h3, .hw-layer h3 { font-family: var(--hw-serif); font-weight: 400; color: var(--hw-ink); letter-spacing: -.01em; line-height: 1.08; margin: 0; }
.hw-in { max-width: 1200px; margin: 0 auto; }
.hw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- page head ---------- */
.hw-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; padding: 24px 0 18px; border-bottom: 1px solid var(--hw-line); }
.hw-top h1 { font-size: 36px; }
.hw-top .hw-acts { flex: none; }
@media (min-width: 720px) { .hw-top { padding-top: 40px; } .hw-top h1 { font-size: 48px; } }
.hw-eyebrow { font-family: var(--hw-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--hw-muted); }
.hw-meta { font-size: 14px; color: var(--hw-muted); }
.hw-note { color: var(--hw-muted); font-size: 14px; }
.hw-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- buttons ---------- */
.hw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--hw-tap); padding: 0 18px; border-radius: var(--hw-r-btn);
	border: 1px solid var(--hw-line2); background: var(--hw-tint); color: var(--hw-ink) !important; font-size: 15px; font-weight: 500; line-height: 1;
	white-space: nowrap; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.hw-btn:hover { background: var(--hw-tint-2); transform: translateY(-1px); }
.hw-btn--go { background: var(--hw-ink); border-color: var(--hw-ink); color: var(--hw-on-ink) !important; }
.hw-btn--go:hover { background: var(--hw-ink-hover); }
.hw-btn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.hw-btn--bad { color: var(--hw-danger) !important; }
.hw-btn--block { width: 100%; }
.hw-btn:disabled { opacity: .55; cursor: default; transform: none; }
.hw-link { background: none; border: 0; padding: 0; color: var(--hw-blue) !important; font-weight: 500; font-size: 14px; }
.hw-link:hover { color: var(--hw-ink) !important; }

/* ---------- tabs (scroll sideways on a phone) ---------- */
.hw-tabs { position: sticky; top: var(--hw-sticky, 0px); z-index: 20; display: flex; gap: 22px; margin: 0 calc(var(--hw-pad) * -1); padding: 0 var(--hw-pad);
	background: var(--hw-paper); border-bottom: 1px solid var(--hw-line); overflow-x: auto; scrollbar-width: none; }
.hw-tabs::-webkit-scrollbar { display: none; }
.hw-tabs button, .hw-tabs a { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 0 12px; font-size: 15px; font-weight: 500; color: var(--hw-muted) !important; }
.hw-tabs button:hover, .hw-tabs a:hover { color: var(--hw-ink) !important; }
.hw-tabs .is-on { color: var(--hw-ink) !important; border-bottom-color: var(--hw-ink); }
.hw-tabs b { font-family: var(--hw-mono); font-weight: 400; font-size: 11px; margin-left: 6px; color: var(--hw-muted); }

/* ---------- sections and layout ---------- */
.hw-sec { margin-top: 28px; }
.hw-sec__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hw-sec__h h2 { font-size: 28px; }
.hw-sec__h > span { font-size: 13px; color: var(--hw-muted); text-align: right; }
.hw-layout { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
	.hw-layout { display: grid; grid-template-columns: minmax(0,1fr) 384px; gap: 48px; align-items: start; }
	.hw-aside { position: sticky; top: calc(var(--hw-sticky, 0px) + 24px); }
}
.hw-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 12px; }
.hw-bar > .hw-search { flex: 1 1 220px; }

/* ---------- lists and rows ---------- */
.hw-list { background: var(--hw-card); border-radius: var(--hw-r-list); border: 1px solid var(--hw-line); overflow: hidden; }
.hw-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 60px; width: 100%; background: none; border: 0; text-align: left; color: inherit; }
.hw-row + .hw-row { border-top: 1px solid var(--hw-line2); }
button.hw-row:hover, a.hw-row:hover { background: rgba(15,32,41,.03); }
.hw-row__main { flex: 1; min-width: 0; }
.hw-row__t { font-size: 15.5px; font-weight: 600; color: var(--hw-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.hw-row__s { font-size: 13px; color: var(--hw-muted); margin-top: 2px; overflow-wrap: anywhere; }
.hw-row__end { font-size: 13px; color: var(--hw-muted); text-align: right; flex: none; font-weight: 500; }
.hw-tile { width: 44px; height: 44px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; overflow: hidden; background: var(--hw-tint-2); color: var(--hw-ink); }
.hw-tile img { width: 100%; height: 100%; object-fit: cover; }
.hw-more { display: block; width: 100%; padding: 14px; background: none; border: 0; border-top: 1px solid var(--hw-line2); color: var(--hw-blue); font-weight: 500; }

/* ---------- tags (stage, state, flags) ---------- */
.hw-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--hw-tint-2); color: var(--hw-ink2); white-space: nowrap; }
.hw-tag--blue { background: var(--hw-blue-tint); color: var(--hw-blue); }
.hw-tag--green { background: var(--hw-green-tint); color: var(--hw-green); }
.hw-tag--warn { background: var(--hw-warn-tint); color: var(--hw-warn); }
.hw-tag--bad { background: var(--hw-danger-tint); color: var(--hw-danger); }
.hw-tag--ink { background: var(--hw-ink); color: var(--hw-on-ink); }

/* ---------- stats ---------- */
.hw-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--hw-line2); border-radius: 12px; background: var(--hw-field-bg); }
.hw-stats > div { padding: 14px 6px 12px; text-align: center; border-top: 1px solid var(--hw-line2); }
.hw-stats > div:nth-child(-n+2) { border-top: 0; }
.hw-stats > div:nth-child(2n) { border-left: 1px solid var(--hw-line2); }
@media (min-width: 720px) { .hw-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } .hw-stats > div { border-top: 0; } .hw-stats > div + div { border-left: 1px solid var(--hw-line2); } }
.hw-stats b { display: block; font-family: var(--hw-serif); font-weight: 400; font-size: 32px; line-height: 1; color: var(--hw-ink); }
.hw-stats span { display: block; margin-top: 6px; font-family: var(--hw-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-muted); }

/* ---------- progress ---------- */
.hw-prog { display: flex; align-items: center; gap: 12px; }
.hw-prog__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--hw-line2); overflow: hidden; }
.hw-prog__bar i { display: block; height: 6px; background: var(--hw-green); border-radius: 3px; transition: width .5s ease; }
.hw-prog span { font-size: 13px; color: var(--hw-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- empty and busy ---------- */
.hw-empty { border-radius: var(--hw-r-list); border: 1px dashed rgba(15,32,41,.24); padding: 20px; font-size: 15px; line-height: 1.55; color: var(--hw-ink2); }
.hw-empty b { display: block; font-size: 16px; color: var(--hw-ink); margin-bottom: 2px; }
.hw-busy { display: flex; align-items: center; gap: 5px; padding: 18px 4px; color: var(--hw-muted); font-size: 14px; }
.hw-busy i { width: 7px; height: 7px; border-radius: 50%; background: var(--hw-ink); opacity: .25; animation: hw-dot 1s infinite ease-in-out; }
.hw-busy i:nth-child(2) { animation-delay: .15s; } .hw-busy i:nth-child(3) { animation-delay: .3s; }
.hw-busy span { margin-left: 8px; }
@keyframes hw-dot { 50% { opacity: 1; transform: translateY(-2px); } }

/* ---------- fields ---------- */
.hw-form { display: flex; flex-direction: column; gap: 14px; }
.hw-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--hw-ink); }
.hw-f small { font-weight: 400; color: var(--hw-muted); font-size: 13px; }
.hw-f2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .hw-f2 { grid-template-columns: 1fr 1fr; } }
.hw :where(input:not([type=radio], [type=checkbox]), textarea, select),
.hw-layer :where(input:not([type=radio], [type=checkbox]), textarea, select) {
	font: inherit; font-size: 16px; font-weight: 400; color: var(--hw-ink); background: var(--hw-field-bg); border: 1px solid var(--hw-field); border-radius: var(--hw-r-field);
	padding: 11px 14px; width: 100%; margin: 0; box-shadow: none; min-height: var(--hw-tap); line-height: 1.3; max-width: none; }
.hw :where(textarea), .hw-layer :where(textarea) { min-height: 120px; resize: vertical; line-height: 1.45; }
.hw :where(input, textarea, select):focus, .hw-layer :where(input, textarea, select):focus { outline: 2px solid rgba(88,180,229,.3); outline-offset: 1px; border-color: var(--hw-ink); box-shadow: none; }
.hw-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; color: var(--hw-ink2); }
.hw-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--hw-ink); flex: none; }
.hw-search { position: relative; display: block; }
.hw .hw-search input { padding-left: 40px; }
.hw-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--hw-muted); }

/* segmented choice */
.hw-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.hw-seg label { flex: 1; min-width: 96px; position: relative; }
.hw-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hw-seg span { display: block; text-align: center; padding: 11px 8px; border-radius: var(--hw-r-btn); border: 1px solid var(--hw-field); background: var(--hw-field-bg); font-weight: 500; font-size: 14px; cursor: pointer; color: var(--hw-ink); }
.hw-seg input:checked + span { background: var(--hw-ink); color: var(--hw-on-ink); border-color: var(--hw-ink); }
.hw-seg input:focus-visible + span { outline: 2px solid var(--hw-accent); outline-offset: 2px; }

/* ---------- the Google business card (spec §3: the business as its Google self) ---------- */
.hw-biz { position: relative; border-radius: var(--hw-r-card); overflow: hidden; background: var(--hw-ink); color: var(--hw-on-ink); box-shadow: var(--hw-shadow); }
.hw-biz__photo { height: 148px; background: var(--hw-band); background-size: cover; background-position: center; position: relative; }
.hw-biz__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,32,41,0) 30%, rgba(15,32,41,.85)); }
.hw-biz__body { position: relative; padding: 0 18px 18px; margin-top: -44px; }
.hw-biz__name { font-family: var(--hw-serif); font-size: 32px; line-height: 1.02; letter-spacing: -.01em; color: var(--hw-on-ink); overflow-wrap: anywhere; }
.hw-biz__addr { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.75); }
.hw-biz__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13.5px; }
.hw-biz__facts small { display: block; font-family: var(--hw-mono); font-size: 9px; letter-spacing: .14em; color: rgba(255,255,255,.55); text-transform: uppercase; }
.hw-biz__facts b { display: block; margin-top: 3px; font-weight: 600; }
.hw-biz a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.hw-biz__src { margin-top: 14px; font-family: var(--hw-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
@media (min-width: 720px) { .hw-biz__photo { height: 190px; } .hw-biz__name { font-size: 40px; } .hw-biz__body { padding: 0 26px 22px; } }

/* ---------- key/value ---------- */
.hw-kv { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.hw-kv dt { color: var(--hw-muted); }
.hw-kv dd { margin: 0; color: var(--hw-ink); overflow-wrap: anywhere; }

/* ---------- panel (a card that holds a form or a thread) ---------- */
.hw-panel { background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: var(--hw-r-list); padding: 16px; }
@media (min-width: 720px) { .hw-panel { padding: 20px 22px; } }
.hw-panel + .hw-panel { margin-top: 14px; }
.hw-panel__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hw-panel__h h3 { font-size: 24px; }
.hw-panel > * + .hw-form, .hw-panel > * + .hw-list, .hw-panel > * + .hw-kv { margin-top: 14px; }

/* ---------- activity feed ---------- */
.hw-feed { list-style: none; margin: 0; padding: 0; }
.hw-eyebrow + .hw-feed { margin-top: 10px; }
.hw-feed li { position: relative; padding: 0 0 14px 20px; font-size: 14px; }
.hw-feed li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--hw-line); }
.hw-feed li::after { content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 1px; background: var(--hw-line2); }
.hw-feed li:last-child::after { display: none; }
.hw-feed b { color: var(--hw-ink); font-weight: 600; }
.hw-feed time { display: block; font-family: var(--hw-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--hw-muted); margin-top: 2px; }
.hw-feed .is-stage::before { background: var(--hw-ink); }
.hw-feed .is-email::before, .hw-feed .is-open::before { background: var(--hw-blue); }
.hw-feed .is-google::before { background: var(--hw-green); }
.hw-feed .is-flag::before { background: var(--hw-danger); }

/* ---------- sheet (bottom sheet on a phone, centred above) ---------- */
.hw-layer { position: fixed; inset: 0; z-index: 100000; background: rgba(15,32,41,.42); display: flex; align-items: flex-end; justify-content: center; animation: hw-fade .18s ease; }
@keyframes hw-fade { from { opacity: 0; } }
.hw-sheet { width: 100%; max-width: 640px; max-height: 92vh; background: var(--hw-paper); border-radius: var(--hw-r-card) var(--hw-r-card) 0 0; display: flex; flex-direction: column; animation: hw-up .24s cubic-bezier(.2,.8,.2,1); }
@keyframes hw-up { from { transform: translateY(40px); opacity: .4; } }
@media (min-width: 720px) { .hw-layer { align-items: center; } .hw-sheet { border-radius: var(--hw-r-card); } }
.hw-sheet__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px var(--hw-pad) 10px; }
.hw-sheet__h h3 { font-size: 28px; }
.hw-sheet__b { padding: 6px var(--hw-pad) 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.hw-sheet__f { padding: 14px var(--hw-pad) calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--hw-line2); }
.hw-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--hw-tint); font-size: 20px; line-height: 1; flex: none; }

/* ---------- toast ---------- */
.hw-toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100001; background: var(--hw-ink); color: var(--hw-on-ink);
	padding: 12px 20px; border-radius: var(--hw-r-btn); font-size: 14px; font-weight: 500; box-shadow: var(--hw-shadow-pop); animation: hw-up .2s ease; max-width: calc(100% - 32px); }
.hw-toast.bad { background: var(--hw-danger); }

/* ---------- banner ---------- */
.hw-banner { border-radius: 12px; background: var(--hw-warn-tint); color: var(--hw-warn); padding: 12px 14px; font-size: 14px; font-weight: 500; }
.hw-banner--bad { background: var(--hw-danger-tint); color: var(--hw-danger); }
.hw-banner--ok { background: var(--hw-green-tint); color: var(--hw-green); }

/* ---------- pulse (stoplight's pin ring) — map pins and live dots ---------- */
.hw-pulse { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--hw-live); flex: none; }
.hw-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--hw-live); animation: hw-ring 2.6s ease-out infinite; }
@keyframes hw-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hw-pulse::after, .hw-busy i { animation: none; } }

/* ---------- wp-admin host: the app fills the content area, edge to edge on a phone ---------- */
body.hw-admin #wpcontent { padding-left: 0; }
body.hw-admin #wpbody-content { padding-bottom: 0; }
body.hw-admin .hw { --hw-sticky: 32px; }
@media (max-width: 782px) { body.hw-admin .hw { --hw-sticky: 46px; } body.hw-admin.auto-fold #wpcontent { padding-left: 0; } }
@media (max-width: 600px) { body.hw-admin .hw { --hw-sticky: 0px; } }
body.hw-admin #wpfooter { display: none; }

/* =====================================================================
 * The public site (templates/home.php, templates/page.php, the sign-in page).
 * Same tokens, same components; these are the site's frame and its sections.
 * ===================================================================== */
body.hw-site { margin: 0; background: var(--hw-paper); }
.hw-nav *, .hw-nav *::before, .hw-nav *::after, .hw-foot *, .hw-foot *::before, .hw-foot *::after { box-sizing: border-box; }
.hw--site { padding: 0; min-height: 0; }
.hw-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--hw-ink); color: var(--hw-on-ink); padding: 10px 14px; border-radius: var(--hw-r-btn); }
.hw-skip:focus { left: 8px; }

/* header */
.hw-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--hw-paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hw-line2); font-family: var(--hw-sans); }
body.admin-bar .hw-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hw-nav { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .hw-nav { top: 0; } }
.hw-nav__in { max-width: 1200px; margin: 0 auto; padding: 10px var(--hw-pad); display: flex; align-items: center; gap: 16px; min-height: 60px; }
.hw-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hw-serif); font-size: 26px; line-height: 1; color: var(--hw-ink) !important; text-decoration: none !important; letter-spacing: -.01em; }
.hw-nav__links { display: none; gap: 26px; margin-left: 12px; }
.hw-nav__links a, .hw-menu__panel a, .hw-foot__links a { color: var(--hw-ink2); text-decoration: none; font-size: 15px; font-weight: 500; }
.hw-nav__links a:hover, .hw-foot__links a:hover { color: var(--hw-ink); }
.hw-nav__acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hw-nav__signin { display: none; }
.hw-menu { position: relative; }
.hw-menu summary { list-style: none; width: 40px; height: 40px; border-radius: var(--hw-r-btn); display: grid; place-content: center; gap: 4px; cursor: pointer; background: var(--hw-tint); }
.hw-menu summary::-webkit-details-marker { display: none; }
.hw-menu summary span { display: block; width: 16px; height: 1.6px; background: var(--hw-ink); border-radius: 2px; }
.hw-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: var(--hw-r-list); box-shadow: var(--hw-shadow); padding: 8px; display: flex; flex-direction: column; }
.hw-menu__panel a { padding: 12px 12px; border-radius: var(--hw-r-btn); }
.hw-menu__panel a:hover { background: var(--hw-tint); }
@media (min-width: 900px) { .hw-nav__links, .hw-nav__signin { display: flex; } .hw-menu { display: none; } }

/* display type */
.hw-display { font-family: var(--hw-serif); font-weight: 400; color: var(--hw-ink); letter-spacing: -.02em; line-height: 1.02; font-size: clamp(42px, 9vw, 76px); margin: 12px 0 0; }
.hw-display em { font-style: italic; color: var(--hw-blue); }
.hw-display--md { font-size: clamp(34px, 6vw, 52px); }
.hw-lead { font-size: 17px; line-height: 1.6; color: var(--hw-ink2); margin-top: 16px !important; max-width: 38em; }
@media (min-width: 720px) { .hw-lead { font-size: 19px; } }

/* hero */
.hw-hero { display: grid; gap: 40px; padding: 40px var(--hw-pad) 56px; }
.hw-hero .hw-acts { margin-top: 26px; }
.hw-hero__art { display: flex; flex-direction: column; align-items: center; }
.hw-hero__cap { max-width: 360px; text-align: center; margin-top: 12px !important; font-size: 13px; }
@media (min-width: 960px) { .hw-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; padding-top: 72px; padding-bottom: 88px; } }

/* a phone, built from components (the hero illustration) */
.hw-phone { width: min(100%, 360px); background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: 32px; padding: 16px; box-shadow: 0 40px 80px -40px rgba(15,32,41,.45); display: flex; flex-direction: column; gap: 12px; }
.hw-phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.hw-phone .hw-biz__photo { height: 110px; }
.hw-phone .hw-biz__name { font-size: 28px; }
.hw-phone .hw-row { min-height: 52px; padding: 10px 12px; }
.hw-phone .hw-tile { width: 36px; height: 36px; font-size: 12px; }

/* bands: full-width sections */
.hw-band { padding: 56px 0; border-top: 1px solid var(--hw-line2); }
.hw-band > .hw-in { padding: 0 var(--hw-pad); }
.hw-band--alt { background: var(--hw-card); }
.hw-band--ink { background: var(--hw-ink); color: rgba(255,255,255,.78); border-top: 0; }
.hw-band--ink .hw-display, .hw-band--ink .hw-display em { color: var(--hw-on-ink); }
.hw-band--ink .hw-eyebrow, .hw-band--ink .hw-lead { color: rgba(255,255,255,.72); }
.hw-band--ink .hw-panel { color: var(--hw-ink2); }
@media (min-width: 720px) { .hw-band { padding: 88px 0; } }
.hw-split { display: grid; gap: 28px; }
@media (min-width: 960px) { .hw-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }

/* points and steps */
.hw-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hw-line); }
.hw-points li { padding: 18px 0 18px 30px; border-bottom: 1px solid var(--hw-line); position: relative; font-size: 16px; line-height: 1.55; }
.hw-points li::before { content: ''; position: absolute; left: 4px; top: 25px; width: 10px; height: 10px; border-radius: 50%; background: var(--hw-green); box-shadow: 0 0 0 4px var(--hw-green-tint); }
.hw-points b { color: var(--hw-ink); }
.hw-steps { list-style: none; counter-reset: s; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.hw-steps li { counter-increment: s; background: var(--hw-card); border: 1px solid var(--hw-line); border-radius: var(--hw-r-list); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.hw-steps li::before { content: '0' counter(s); font-family: var(--hw-mono); font-size: 11px; letter-spacing: .14em; color: var(--hw-muted); }
.hw-steps b { font-family: var(--hw-serif); font-weight: 400; font-size: 28px; color: var(--hw-ink); line-height: 1.1; }
.hw-steps span { font-size: 15px; }
@media (min-width: 720px) { .hw-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .hw-steps { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hw-stats b { overflow-wrap: anywhere; }
@media (max-width: 719px) { .hw-stats b { font-size: 26px; } }

/* check-chips (multi-select) */
.hw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-chips label { position: relative; }
.hw-chips input { position: absolute; opacity: 0; pointer-events: none; }
.hw-chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hw-field); background: var(--hw-field-bg); font-weight: 500; font-size: 14px; color: var(--hw-ink); cursor: pointer; }
.hw-chips input:checked + span { background: var(--hw-ink); color: var(--hw-on-ink); border-color: var(--hw-ink); }
.hw-chips input:focus-visible + span { outline: 2px solid var(--hw-accent); outline-offset: 2px; }
fieldset.hw-f { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.hw-f legend { padding: 0; margin-bottom: 8px; }
[hidden] { display: none !important; }

/* pages and posts */
.hw-page { padding: 0 var(--hw-pad) 72px; }
.hw-prose .hw-sec { max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--hw-ink2); }
.hw-prose .hw-sec > * + * { margin-top: 1em; }
.hw-prose h2, .hw-prose h3 { font-family: var(--hw-serif); font-weight: 400; color: var(--hw-ink); line-height: 1.1; margin-top: 1.6em !important; }
.hw-prose h2 { font-size: 34px; } .hw-prose h3 { font-size: 26px; }
.hw-prose a { color: var(--hw-blue); text-decoration: underline; text-underline-offset: 3px; }
.hw-prose img { max-width: 100%; height: auto; border-radius: var(--hw-r-list); }
.hw-prose ul, .hw-prose ol { padding-left: 1.3em; }

/* footer */
.hw-foot { background: var(--hw-paper); border-top: 1px solid var(--hw-line); font-family: var(--hw-sans); }
.hw-foot__in { max-width: 1200px; margin: 0 auto; padding: 40px var(--hw-pad) 20px; display: grid; gap: 24px; }
.hw-foot__in .hw-meta { margin-top: 10px; max-width: 34em; }
.hw-foot__links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-content: start; }
.hw-foot__fine { max-width: 1200px; margin: 0 auto; padding: 0 var(--hw-pad) calc(28px + env(safe-area-inset-bottom)); font-family: var(--hw-mono); font-size: 11px; letter-spacing: .08em; color: var(--hw-muted); }
@media (min-width: 900px) { .hw-foot__in { grid-template-columns: 1fr auto; } }

/* the sign-in page */
body.login.hw-login { background: var(--hw-paper); font-family: var(--hw-sans); color: var(--hw-ink2); }
body.hw-login #login { width: min(92vw, 400px); padding-top: 8vh; }
body.hw-login h1 a { background: none !important; width: auto !important; height: auto !important; text-indent: 0 !important; font-family: var(--hw-serif); font-size: 40px; color: var(--hw-ink) !important; margin: 0 auto 20px !important; line-height: 1.1; overflow: visible; text-decoration: none !important; }
body.hw-login form { background: var(--hw-card) !important; border: 1px solid var(--hw-line) !important; border-radius: var(--hw-r-card) !important; box-shadow: var(--hw-shadow) !important; padding: 24px !important; }
body.hw-login label { color: var(--hw-ink); font-weight: 600; font-size: 14px; }
body.hw-login input[type=text], body.hw-login input[type=password], body.hw-login input[type=email] { width: 100%; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--hw-field) !important; border-radius: var(--hw-r-field) !important; min-height: var(--hw-tap); font-size: 16px !important; box-shadow: none !important; background: var(--hw-field-bg) !important; }
body.hw-login .button-primary { color: var(--hw-on-ink) !important; background: var(--hw-ink) !important; border-color: var(--hw-ink) !important; border-radius: var(--hw-r-btn) !important; min-height: var(--hw-tap); padding: 0 20px !important; font-size: 15px !important; box-shadow: none !important; text-shadow: none !important; }
body.hw-login #nav a, body.hw-login #backtoblog a { color: var(--hw-ink2) !important; }
body.hw-login .message, body.hw-login .notice, body.hw-login #login_error { border-left-color: var(--hw-blue) !important; border-radius: var(--hw-r-btn); box-shadow: none; background: var(--hw-card); }