/* HandyMCP brand layer: loads after the theme styles. Brand tokens first, then the product sections. */

:root {
	--hm-orange: #FF6B35;
	--hm-btn: #C2410C;
	--hm-btn-hover: #9A3412;
	--hm-ink: #14161B;
	--hm-night: #101217;
	--hm-night-2: #1B1E26;
	--hm-mist: #C9CCD6;

	--ink-950: #0C0E12;
	--ink-900: #101217;
	--ink-850: #14161B;
	--ink-800: #1B1E26;
	--cobalt-700: #9A3412;
	--cobalt-600: #C2410C;
	--cobalt-500: #E2541C;
	--cobalt-300: #FF8B4D;
	--sky-300: #FFB27A;
	--sage-50: #FAF9F7;
	--mist-100: #F2F0EC;

	--bg: var(--sage-50);
	--bg-alt: var(--mist-100);
	--surface-2: #F4F2EE;
	--fg: var(--hm-ink);
	--line: #E7E4DE;
	--line-2: #D9D5CD;
	--accent: var(--hm-btn);
	--accent-ink: var(--hm-btn-hover);
	--accent-soft: rgba(255, 107, 53, .1);
	--sd-icon-accent: var(--hm-btn);
	--cobalt-text: linear-gradient(100deg, #EE4B22 0%, #FF6B35 55%, #FF9A5C 100%);
	--sky-text: linear-gradient(100deg, #FFB27A 0%, #FF8B4D 100%);
	--f-display: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--f-text: var(--f-display);
	--glow: radial-gradient(55% 60% at 72% 18%, rgba(255, 107, 53, .3), transparent 70%), radial-gradient(38% 42% at 96% 6%, rgba(255, 178, 122, .18), transparent 70%), radial-gradient(40% 50% at 8% 100%, rgba(238, 75, 34, .12), transparent 70%);
}
:root[data-theme="dark"] {
	--bg: var(--ink-950);
	--fg: var(--chrome);
	--line: rgba(255, 255, 255, .08);
	--line-2: rgba(255, 255, 255, .14);
	--surface-2: var(--ink-800);
	--accent: var(--cobalt-300);
	--accent-ink: var(--cobalt-300);
	--accent-soft: rgba(255, 139, 77, .12);
	--sd-icon-accent: var(--cobalt-300);
	--cobalt-text: linear-gradient(100deg, #FF8B4D 0%, #FFB27A 100%);
}

.sd-btn--primary:hover { background: var(--hm-btn-hover); }
.sd-btn--dark:hover { background: var(--hm-btn); color: #fff; }
.sd-header .sd-header__cta.sd-btn--glass, .sd-header--over-dark:not(.is-scrolled) .sd-header__cta.sd-btn--glass, :root[data-theme="dark"] .sd-header .sd-header__cta.sd-btn--glass { background: var(--hm-btn); color: #fff; box-shadow: 0 8px 22px -10px rgba(194, 65, 12, .8); }
.sd-header .sd-header__cta.sd-btn--glass:hover, .sd-header--over-dark:not(.is-scrolled) .sd-header__cta.sd-btn--glass:hover, :root[data-theme="dark"] .sd-header .sd-header__cta.sd-btn--glass:hover { background: var(--hm-btn-hover); color: #fff; }
:root:not([data-theme="dark"]) .sd-header.is-scrolled .sd-header__bar { background: rgba(250, 249, 247, .88); }
:focus-visible { outline-color: var(--hm-orange); }
::selection { background: rgba(255, 107, 53, .25); }

/* Product screenshot in a browser frame */
.hm-shot { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 27, .08), 0 30px 70px -30px rgba(12, 14, 18, .55); }
.sd-dark .hm-shot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px -36px rgba(0, 0, 0, .9); }
.hm-shot__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F3F2EF; border-bottom: 1px solid #E7E4DE; }
.hm-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #DAD6CF; }
.hm-shot__bar i:first-child { background: #FF6B35; }
.hm-shot__bar b { margin-left: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; color: #8A8F99; text-transform: lowercase; }
.hm-shot img { display: block; width: 100%; height: auto; }
.hm-shot__empty { display: block; aspect-ratio: 1280 / 868; background: linear-gradient(135deg, #F4F2EE, #E9E5DE); }

/* Hero */
.hm-hero .hm-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.hm-hero .sd-hero__title { max-width: 12ch; }
.hm-hero__visual { position: relative; }
.hm-hero__visual .sd-hero__disc { bottom: auto; top: 50%; width: 110%; transform: translate(-50%, -50%); opacity: .55; }
.hm-shot--hero { position: relative; z-index: 1; transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; transition: transform .8s var(--ease-out); }
.hm-hero__visual:hover .hm-shot--hero { transform: none; }
.hm-hero__ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--hm-mist); }
.hm-hero__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.hm-hero__ticks .sd-icon { color: var(--hm-orange); }
@media (max-width: 960px) {
	.hm-hero .hm-hero__grid { grid-template-columns: 1fr; }
	.hm-hero .sd-hero__title { max-width: 16ch; }
	.hm-shot--hero { transform: none; }
}

/* Works with */
.hm-apps .sd-icon { color: var(--hm-btn); }

/* Stack cards with screenshots */
.hm-stack__media { display: flex; align-items: center; padding: clamp(14px, 2vw, 28px); background: radial-gradient(80% 70% at 80% 10%, rgba(255, 107, 53, .28), transparent 70%), linear-gradient(160deg, #1B1E26, #101217); border-radius: inherit; }
.hm-stack__media .hm-shot { width: 100%; }
.hm-product .sd-stack__list li > span { display: inline-flex; align-items: center; gap: 10px; }
.hm-product .sd-stack__list .sd-icon { color: var(--cobalt-300); }

/* Features */
.hm-features__shot { margin-top: 32px; max-width: 520px; }
.hm-pro { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font: 600 10.5px/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: 3px; color: var(--hm-btn); background: rgba(255, 107, 53, .12); }
.sd-dark .hm-pro, :root[data-theme="dark"] .hm-pro { color: var(--cobalt-300); }
@media (max-width: 900px) { .hm-features__shot { display: none; } }

/* Pricing */
.hm-plans { position: relative; }
.hm-bill__input { position: absolute; opacity: 0; pointer-events: none; }
.hm-bill { display: flex; width: fit-content; margin: 0 auto clamp(28px, 4vw, 44px); padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.hm-bill label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--muted); cursor: pointer; transition: background .3s var(--ease), color .3s; }
.hm-bill label span { padding: 2px 8px; border-radius: 999px; font: 600 10.5px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hm-btn); background: rgba(255, 107, 53, .12); }
#hm-bill-yearly:checked ~ .hm-bill label[for="hm-bill-yearly"], #hm-bill-lifetime:checked ~ .hm-bill label[for="hm-bill-lifetime"] { background: var(--hm-ink); color: #fff; }
:root[data-theme="dark"] #hm-bill-yearly:checked ~ .hm-bill label[for="hm-bill-yearly"], :root[data-theme="dark"] #hm-bill-lifetime:checked ~ .hm-bill label[for="hm-bill-lifetime"] { background: var(--hm-btn); }
#hm-bill-lifetime:checked ~ .hm-bill label[for="hm-bill-lifetime"] span { color: #fff; background: rgba(255, 255, 255, .16); }
#hm-bill-yearly:focus-visible ~ .hm-bill label[for="hm-bill-yearly"], #hm-bill-lifetime:focus-visible ~ .hm-bill label[for="hm-bill-lifetime"] { outline: 2px solid var(--hm-orange); outline-offset: 2px; }
#hm-bill-yearly:checked ~ .hm-plans__grid .hm-plan__price--lifetime, #hm-bill-yearly:checked ~ .hm-plans__grid .hm-plan__buy--lifetime,
#hm-bill-lifetime:checked ~ .hm-plans__grid .hm-plan__price--yearly, #hm-bill-lifetime:checked ~ .hm-plans__grid .hm-plan__buy--yearly { display: none; }
.hm-plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.hm-plan { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-lg, 28px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.hm-plan:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), var(--card-shadow-lg); }
.hm-plan.is-popular { background: radial-gradient(90% 60% at 100% 0%, rgba(255, 107, 53, .28), transparent 70%), linear-gradient(170deg, #1B1E26, #101217); color: #fff; box-shadow: 0 0 0 1px rgba(255, 107, 53, .45), 0 40px 80px -40px rgba(194, 65, 12, .7); }
.hm-plan__badge { position: absolute; top: -12px; left: 28px; margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--hm-btn); color: #fff; font-size: 10.5px; }
.hm-plan__name { margin: 0; font: 700 22px/1.2 var(--f-display); letter-spacing: -.01em; }
.hm-plan__sites { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 600; font-size: 14.5px; color: var(--hm-btn); }
.is-popular .hm-plan__sites { color: var(--cobalt-300); }
.hm-plan__blurb { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.is-popular .hm-plan__blurb, .is-popular .hm-plan__list { color: var(--hm-mist); }
.hm-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 22px 0 20px; }
.hm-plan__price b { font: 800 clamp(40px, 4vw, 52px)/1 var(--f-display); letter-spacing: -.03em; }
.hm-plan__price span { font-size: 14px; color: var(--muted); }
.is-popular .hm-plan__price span { color: var(--hm-mist); }
.hm-plan__list { display: grid; gap: 12px; margin: 26px 0 0; padding: 26px 0 0; list-style: none; border-top: 1px solid var(--line); font-size: 15px; }
.is-popular .hm-plan__list { border-color: rgba(255, 255, 255, .12); }
.hm-plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.hm-plan__list .sd-icon { flex: none; margin-top: 3px; color: var(--hm-btn); }
.is-popular .hm-plan__list .sd-icon { color: var(--cobalt-300); }
.hm-plan .sd-btn--dark { background: var(--hm-ink); color: #fff; }
:root[data-theme="dark"] .hm-plan .sd-btn--dark { background: #fff; color: var(--hm-ink); }
.hm-pricing__note { display: flex; justify-content: center; align-items: flex-start; gap: 10px; max-width: 760px; margin: clamp(24px, 3vw, 36px) auto 0; font-size: 14px; line-height: 1.6; text-align: center; color: var(--muted); }
.hm-pricing__note .sd-icon { flex: none; margin-top: 3px; color: var(--hm-btn); }
.hm-pricing__note a { color: var(--accent-ink); }
@media (max-width: 960px) {
	.hm-plans__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
	.hm-plan.is-popular { order: -1; }
}

/* Free vs Pro table */
.hm-compare { max-width: 860px; margin: clamp(48px, 6vw, 80px) auto 0; }
.hm-compare__title { margin: 0 0 18px; font: 700 22px/1.2 var(--f-display); text-align: center; }
.hm-compare__scroll { overflow: hidden; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.hm-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hm-table th, .hm-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.hm-table thead th { font: 600 11.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.hm-table td { width: 140px; text-align: center; color: var(--fg-2); font-size: 14px; }
.hm-table thead th:not(:first-child) { text-align: center; }
.hm-table tbody th { font-weight: 500; }
.hm-table tr:last-child th, .hm-table tr:last-child td { border-bottom: 0; }
.hm-table td:last-child { background: rgba(255, 107, 53, .05); }
.hm-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--hm-btn); }
.hm-no { color: var(--faint); }
@media (max-width: 640px) {
	.hm-table thead { display: none; }
	.hm-table, .hm-table tbody, .hm-table tr { display: block; }
	.hm-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 16px; border-bottom: 1px solid var(--line); }
	.hm-table tr:last-child { border-bottom: 0; }
	.hm-table th, .hm-table td { padding: 0; border: 0; }
	.hm-table tbody th { grid-column: 1 / -1; margin-bottom: 10px; }
	.hm-table td { width: auto; display: flex; align-items: center; justify-content: flex-start; gap: 10px; background: none !important; }
	.hm-table td::before { content: attr(data-label); font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 34px; }
}

.hm-stack__media { aspect-ratio: auto !important; min-height: 0; }
.hm-stack__media::after { display: none; }
.hm-stack__media .hm-shot img { position: static; inset: auto; width: 100%; height: auto; object-fit: initial; transform: none; }
.sd-stack__card:hover .hm-stack__media .hm-shot img { transform: none; }
.sd-stack__card:hover .hm-stack__media .hm-shot { transform: translateY(-4px); }
.hm-stack__media .hm-shot { transition: transform .8s var(--ease-out); }

/* Phones: copy first, then the screenshot */
@media (max-width: 960px) {
	.hm-hero .sd-hero__copy { display: block; }
	.hm-hero .hm-hero__visual { order: 2; margin-top: 8px; }
}
/* Free vs Pro on phones: values never clip */
@media (max-width: 640px) {
	.hm-table tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
	.hm-table td { min-width: 0; flex-wrap: wrap; }
}

/* Closing card: screenshot instead of a portrait */
.sd-cta-card__person.hm-cta-shot { top: 50%; bottom: auto; width: min(40%, 520px); aspect-ratio: auto; transform: translateY(-50%) rotate(-2deg); }
.hm-cta-shot .hm-shot { width: 100%; }
@media (max-width: 1100px) { .sd-cta-card__person.hm-cta-shot { display: none; } }

/* Very small phones */
@media (max-width: 360px) {
	.hm-bill label { padding: 0 14px; font-size: 14px; }
	.hm-plan__price b { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-shot--hero, .hm-plan, .hm-cta-shot .hm-shot { transition: none; transform: none; }
}