/* SEOmise public website: the HOME PAGE, LIGHT design (owner, 14 Oct evening: "I don't like dark"; the original light
   palette with green/teal on near-black ink; big elements; Salient-style interactive pieces; docs/specs/SITE-REDESIGN.md
   §5, "Owner direction" and the anti-AI-look checklist). Loaded only by resources/views/public/home.blade.php, after
   public/css/widgets.css; behaviour in public/js/home.js and public/js/widgets.js. Reads only the tokens in
   public/css/tokens.css. Rules: no dark section; one gradient-text moment (the rotating word); section designs vary
   (white, tinted, warm gradient, colour panel); patterns only where they support a section; everything readable without
   JavaScript; only transform, opacity and translate animate; reduced motion at the end; every picture has a size. */

.hm { position: relative; background: #fff; color: var(--ink); overflow-x: clip; font-size: 17px; }
.hm-wrap { width: 100%; max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.hm :focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.hm a { color: var(--brand-ink); }

/* ---------- Type: big confident headlines, normal tracking, one scale ---------- */
.hm-kicker { margin: 0 0 var(--s4); font: 650 15px/1.3 var(--sans); color: var(--brand-ink); }
.hm-h2 { margin: 0 0 var(--s5); font: 740 clamp(36px, 4.8vw, 68px)/1.0 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; max-width: 17ch; }
.hm-sub { margin: 0; max-width: 54ch; font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hm-head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.hm-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5) var(--s7); flex-wrap: wrap; }
.hm-head-row .hm-h2 { margin-bottom: 0; }
.hm-head-row .hm-sub { max-width: 44ch; }
.hm-head-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s5) var(--s8); align-items: end; }
.hm-head-split .hm-h2 { margin: 0; }
.hm-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 15.5px; color: var(--brand-ink); text-decoration: none; }
.hm-link .ms { font-size: 19px; transition: transform var(--d-2) var(--ease); }
.hm-link:hover { color: var(--brand-hover); }
.hm-link:hover .ms { transform: translateX(4px); }
.hm-caption { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.hm-fine { color: var(--ink-3); font-size: 14.5px; max-width: 80ch; }
.hm code { background: var(--bg-2); color: var(--ink); }
.hm-sec { padding: clamp(80px, 9vw, 144px) 0; position: relative; }

/* While the hero is at the top, its audit button is the only green fill: the header's sign-up button is quiet. */
.js .site-head-over:not(.is-scrolled):not(.mm-open) .head-actions .btn-primary { background: #fff; color: var(--brand-ink); border-color: var(--mint-3); box-shadow: none; }

/* ===================================================================================================================
   1 · HERO: white with a fine dot grid and two soft mint/aqua washes that drift (parallax); copy left with the big audit
   field; the product stage right, in a white frame on a tinted card that overlaps the section's lower edge.
   =================================================================================================================== */
.hm-hero { position: relative; isolation: isolate; padding: calc(76px + clamp(40px, 6vh, 80px)) 0 clamp(56px, 7vh, 96px); min-height: min(100svh, 880px);
  background: linear-gradient(180deg, #fff 0%, #fbfdfc 60%, var(--bg) 100%); }
.hm-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hm-dots { position: absolute; inset: 0; background: var(--dots); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 70% at 72% 38%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 70% at 72% 38%, #000 10%, transparent 75%); opacity: .7; }
.hm-wash { position: absolute; border-radius: 50%; filter: blur(30px); }
.hm-wash-a { width: 760px; height: 620px; right: -160px; top: -120px; background: radial-gradient(closest-side, rgba(25, 195, 125, .22), rgba(20, 184, 196, .12) 55%, transparent 75%); }
.hm-wash-b { width: 560px; height: 520px; left: -200px; bottom: -260px; background: radial-gradient(closest-side, rgba(20, 184, 196, .16), rgba(220, 247, 234, .2) 60%, transparent 75%); }
.hm-hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.hm-hero-copy { min-width: 0; }
.hm-hero .hm-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 14px; color: var(--ink-2); margin-bottom: var(--s5); }
.hm-hero .hm-kicker::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23087249' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* The headline: two lines in a fixed box. The rotating line reserves the width of the longest word (no shift). */
.hm-title { margin: 0 0 var(--s5); }
.hm-h1 { margin: 0; font: 760 clamp(48px, 7vw, 116px)/.96 var(--display); letter-spacing: -.04em; color: var(--ink); }
.hm-h1-line { display: block; }
.hm-h1-rot { padding-bottom: .1em; }
.hm-rot-box { position: relative; display: inline-grid; white-space: nowrap; vertical-align: top; }
.hm-rot-box::before { content: attr(data-longest); visibility: hidden; grid-area: 1 / 1; }
.hm-rot { position: relative; grid-area: 1 / 1; justify-self: start; background: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--brand-ink);
  transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out), filter var(--d-3); }
/* The underline under the word on show: drawn again with every word, with a light running along it. */
.hm-rot::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.03em; height: .075em; border-radius: 99px;
  background: linear-gradient(90deg, #19c37d, #14b8c4, #19c37d) 0 0 / 200% 100%; transform-origin: 0 50%; }
.hm-rot.is-in::after { animation: hm-draw-x .7s var(--ease-out) .1s both; }
@media (prefers-reduced-motion: no-preference) { .hm-rot::after { animation: hm-run 6s linear infinite; } .hm-rot.is-in::after { animation: hm-draw-x .7s var(--ease-out) .1s both, hm-run 6s linear .8s infinite; } }
@keyframes hm-draw-x { from { transform: scaleX(0); } }
@keyframes hm-run { to { background-position: -200% 0; } }
.hm-rot.is-out { opacity: 0; transform: translateY(.22em); filter: blur(6px); }
.hm-rot.is-in { animation: hm-rot-in .5s var(--ease-out); }
@keyframes hm-rot-in { from { opacity: 0; transform: translateY(-.22em); filter: blur(6px); } }
.hm-lede { margin: 0; max-width: 44ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* ---------- The audit widget (partials/audit-widget): big, white, a glowing green focus ring ---------- */
.hm-action { margin-top: clamp(26px, 3.6vh, 40px); }
.aw { --aw-h: 72px; position: relative; max-width: 660px; margin: 0; padding: 0; border-radius: 0; }
.aw-label { display: block; margin: 0 0 10px 2px; font: 600 14px/1.2 var(--sans); color: var(--ink-2); transition: color var(--d-1); }
.aw:focus-within .aw-label { color: var(--brand-ink); }
.aw-slot { min-height: var(--aw-h); }
.aw-row { position: relative; display: flex; align-items: center; gap: 8px; height: var(--aw-h); padding: 7px 7px 7px 20px; border-radius: 20px; border: 1.5px solid var(--line-2); background: #fff;
  box-shadow: 0 1px 2px rgba(11, 21, 38, .05), 0 24px 50px -28px rgba(11, 70, 50, .35); transition: box-shadow var(--d-2) var(--ease), border-color var(--d-2); }
.aw-row:hover { border-color: #b9c6d6; }
.aw-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 5px rgba(25, 195, 125, .18), 0 0 44px -6px rgba(25, 195, 125, .45), 0 24px 50px -28px rgba(11, 70, 50, .35); }
.aw-ico { color: var(--ink-3); font-size: 24px; }
.aw-row input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 500 19px var(--sans); padding: 0 4px; }
.aw-row input::placeholder { color: #8391a6; opacity: 1; }
.aw-row input:focus-visible { outline: none; }
.aw-row input[aria-invalid="true"] { color: var(--coral); }
.aw-go { position: relative; flex: none; height: 100%; min-height: 0; padding: 0 26px; border-radius: 14px; font-size: 16.5px; }
.aw-go-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; visibility: hidden; }
.aw.is-busy .aw-go-idle, .aw.is-busy .aw-go .ms-arrow { visibility: hidden; }
.aw.is-busy .aw-go-busy { visibility: visible; }
.aw.is-busy .aw-go { cursor: progress; }
.aw-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: hm-spin .7s linear infinite; }
@keyframes hm-spin { to { transform: rotate(1turn); } }
.aw-err { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--coral-soft); border: 1px solid #f7cdbf; color: var(--coral); font-size: 15px; font-weight: 500; }
.aw-err .ms { font-size: 20px; }
/* The daily limit: an information panel in place of the field row, pointing to the beta. */
.aw-limit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: var(--aw-h); padding: 10px 10px 10px 14px; border-radius: 20px;
  background: var(--amber-soft); border: 1px solid #f3dcb3; }
.aw-limit p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.aw-limit-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--amber); }
.aw-limit-go { white-space: normal; text-align: left; line-height: 1.2; min-height: 48px; padding: 8px 18px; font-size: 14.5px; max-width: 250px; }
.aw-prev { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-3); }
.aw-prev li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aw-prev .ms { font-size: 18px; color: var(--brand-ink); }
.aw-prev a { font-weight: 600; }
.aw-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 0 2px; font-size: 14px; color: var(--ink-3); }
.aw-note > span:not(:first-child)::before { content: "·"; margin-right: 14px; color: var(--ink-3); }
.aw-beta { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--ink) !important; text-decoration: none; }
.aw-beta .ms { font-size: 18px; color: var(--brand-ink); transition: transform var(--d-2) var(--ease); }
.aw-beta:hover { text-decoration: underline; }
.aw-beta:hover .ms { transform: translateX(3px); }
.aw .fa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Free audit switched off: two buttons in the same space. */
.hm-action-alt { display: flex; flex-wrap: wrap; gap: 12px; min-height: calc(var(--aw-h, 72px) + 64px); align-content: center; }

.hm-ticks { list-style: none; margin: clamp(22px, 3vh, 32px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--ink-2); }
.hm-ticks li { display: inline-flex; align-items: center; gap: 8px; }
.hm-ticks svg { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%; background: var(--mint); fill: none; stroke: var(--brand-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.hm-ticks path { stroke-dasharray: 24; stroke-dashoffset: 0; animation: hm-draw .5s var(--ease-out) both; }
.hm-ticks li:nth-child(2) path { animation-delay: .12s; }
.hm-ticks li:nth-child(3) path { animation-delay: .24s; }
@keyframes hm-draw { from { stroke-dashoffset: 24; } }

/* ---------- The product stage: real crops layered on a tinted card, assembling on load ---------- */
.hm-stage-col { min-width: 0; }
.hm-stage { --mx: 0; --my: 0; position: relative; aspect-ratio: 1 / 1.04; max-width: 620px; margin-left: auto; }
.hm-stage-card { position: absolute; inset: 7% 0 0 6%; border-radius: 36px; background: linear-gradient(160deg, var(--mint) 0%, var(--aqua-soft) 70%, #e9f6f9 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 138, 91, .08); }
.hm-stage-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grid-lines); background-size: 32px 32px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); }
.hm-set { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity var(--d-3) var(--ease-in-out), visibility 0s linear var(--d-3); }
.hm-set.is-on { opacity: 1; visibility: visible; transition: opacity var(--d-3) var(--ease-in-out); }
.hm-layer { position: absolute; translate: calc(var(--mx) * var(--depth, 6) * 1px) calc(var(--my) * var(--depth, 6) * 1px); transition: translate .9s var(--ease-out); }
.hm-base { --depth: 6; left: 14%; top: 0; width: 76%; max-height: 92%; overflow: hidden; padding: 8px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 21, 38, .06), 0 50px 90px -40px rgba(11, 70, 50, .45), 0 18px 30px -20px rgba(11, 21, 38, .2);
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
.hm-base img { display: block; width: 100%; height: auto; border-radius: 15px; }
.hm-f1 { --depth: 14; left: -2%; bottom: 8%; width: 58%; }
.hm-f1 img { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 38, .07), 0 30px 60px -24px rgba(11, 70, 50, .45); }
.hm-chip { --depth: 20; right: -2%; bottom: 20%; display: flex; align-items: center; gap: 12px; max-width: 280px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(11, 70, 50, .45); font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.hm-chip-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.hm-chip-ico .ms { font-size: 21px; }
.hm-chip-txt { font-weight: 600; color: var(--ink); }
.hm-set.has-no-float .hm-chip { bottom: 10%; }
/* Staff's own slides: one landscape picture, framed. */
.hm-set.is-own .hm-base { left: 0; top: 18%; width: 100%; -webkit-mask-image: none; mask-image: none; }
.hm-stage-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.hm-pause, .hm-strip-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: 600 13px var(--sans); cursor: pointer; transition: border-color var(--d-1), color var(--d-1); }
.hm-pause .ms, .hm-strip-btn .ms { font-size: 18px; }
.hm-pause:hover, .hm-strip-btn:hover { color: var(--ink); border-color: var(--ink); }
.no-js .hm-pause, .no-js .hm-strip-btn { display: none; }
/* Gentle float of the chip once it has arrived (stops under reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .hm-set.is-on .hm-base { animation: hm-base-in 1.1s var(--ease-out) both; }
  .hm-set.is-on .hm-f1 { animation: hm-f1-in .9s var(--ease-out) .25s both; }
  .hm-set.is-on .hm-chip { animation: hm-chip-in .8s var(--ease-spring) .45s both, hm-bob 5s var(--ease-in-out) 1.4s infinite alternate; }
}
@keyframes hm-base-in { from { transform: translateY(26px) scale(.97); } }
@keyframes hm-f1-in { from { opacity: 0; transform: translate(-30px, 40px); } }
@keyframes hm-chip-in { from { opacity: 0; transform: translate(24px, 16px) scale(.92); } }
@keyframes hm-bob { to { transform: translateY(-8px); } }

/* ===================================================================================================================
   2 · PLATFORMS: a warm soft gradient band (cream → mint), names in plain grey type on a slow loop, with a pause button.
   =================================================================================================================== */
.hm-strip { position: relative; padding: clamp(36px, 4.5vw, 56px) 0; background: linear-gradient(100deg, var(--cream) 0%, #f7f5ea 35%, var(--mint-2) 70%, var(--aqua-2) 100%); }
.hm-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.hm-strip-h { margin: 0; font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--sans); color: var(--ink-2); }
.hm-strip-h b { color: var(--ink); font-family: var(--display); font-weight: 750; }
.hm-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-marquee-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.hm-marquee-track li { display: inline-flex; align-items: center; font: 700 clamp(22px, 2.2vw, 32px)/1.3 var(--display); letter-spacing: -.02em; color: #8a97a9; white-space: nowrap; padding: 0 22px; margin-right: -22px; }
.hm-marquee-track li::after { content: ""; width: 7px; height: 7px; margin-left: 44px; border-radius: 50%; background: var(--brand-bright); opacity: .55; }
.hm-strip-more { display: none; margin: 10px 0 0; text-align: center; font-size: 15px; color: var(--ink-3); }
/* Moving only with JavaScript (which adds the pause button) and without reduced motion; otherwise a static list of 12. */
.js .hm-marquee-track { animation: hm-marquee 60s linear infinite; }
.hm-marquee:hover .hm-marquee-track, .hm-marquee:focus-within .hm-marquee-track, .hm-marquee.is-paused .hm-marquee-track, .hm-marquee.is-off .hm-marquee-track { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }
.no-js .hm-marquee, .hm-marquee.is-static { -webkit-mask-image: none; mask-image: none; }
.no-js .hm-marquee-track, .hm-marquee.is-static .hm-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; gap: 4px 0; animation: none; }
.no-js .hm-marquee-track .is-copy, .no-js .hm-marquee-track .is-extra, .hm-marquee.is-static .is-copy, .hm-marquee.is-static .is-extra { display: none; }
.no-js .hm-strip-more, .hm-marquee.is-static .hm-strip-more { display: block; }

/* ===================================================================================================================
   3 · STATEMENT: plain text on white with lots of air; one giant line lit word by word, two real crops inside it.
   =================================================================================================================== */
.hm-statement { position: relative; padding: clamp(96px, 12vw, 184px) 0 clamp(80px, 9vw, 128px); }
.hm-big { position: relative; margin: 0; font: 780 var(--t-mega)/.95 var(--display); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.hm-big-br { display: block; height: 0; }
.hm-w { display: inline-block; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.hm-w-accent { color: var(--brand-ink); }
.hm-big .w-inline-pic { width: 1.7em; height: .78em; vertical-align: -.02em; border-radius: .4em; }
.js [data-hm-words].is-ready .hm-w:not(.is-lit) { opacity: .13; transform: translateY(.06em); }
.hm-statement-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; margin-top: clamp(36px, 4vw, 64px); }
.hm-statement-sub { margin: 0; max-width: 50ch; font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); }
.hm-numbers { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(24px, 4vw, 56px); }
.hm-numbers li { display: grid; gap: 2px; }
.hm-numbers b { font: 760 clamp(44px, 4.6vw, 72px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.hm-numbers span { font-size: 14.5px; color: var(--ink-3); }

/* ===================================================================================================================
   4 · MODULE BENTO: big tiles in soft solid tints (mint, pale aqua, warm cream, soft green, white); the crop floats on
   the tint; the text sits on the same colour; a lift and a light sweep on hover; the "Open" bubble follows the mouse.
   =================================================================================================================== */
.hm .home-mods { background: var(--bg); }
.hm .bento { gap: clamp(16px, 1.6vw, 22px); }
.hm .mcard { --tile: var(--card); isolation: isolate; border-radius: 28px; border: 0; box-shadow: none; background: var(--tile);
  transition: transform var(--d-4) var(--ease-out), box-shadow var(--d-4) var(--ease-out); }
.hm .bento.w-view-on .mcard { cursor: none; }
.hm .mcard::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .1) 56%, transparent 66%); transform: translateX(-110%); }
.hm .mcard:hover, .hm .mcard:focus-within { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(11, 70, 50, .45); border-color: transparent; }
.hm .mcard:hover::before, .hm .mcard:focus-within::before { transform: translateX(110%); transition: transform 1.1s var(--ease-out); }
.hm .mcard-media { --pad: clamp(24px, 2.4vw, 36px); height: 340px; background: transparent; }
.hm .mcard-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 2; background: linear-gradient(180deg, transparent, var(--tile)); pointer-events: none; }
.hm .mcard.is-large .mcard-media { height: 380px; }
.hm .mcard.is-tall .mcard-media { min-height: 620px; }
.hm .mcard-media img { box-shadow: 0 0 0 1px rgba(11, 21, 38, .05), 0 34px 60px -30px rgba(11, 50, 40, .4), 0 12px 24px -16px rgba(11, 21, 38, .14); }
.hm .mcard-body { border-top: 0; padding: 6px clamp(24px, 2.4vw, 36px) clamp(26px, 2.6vw, 34px); gap: 8px; }
.hm .mcard-body h3 { font: 740 clamp(26px, 2.3vw, 34px)/1.05 var(--display); letter-spacing: -.03em; }
.hm .mcard-link { color: var(--ink); }
.hm .mcard-body p { color: var(--ink-2); font-size: 16px; max-width: 46ch; }
.hm .mcard:has(.mcard-link:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 4px; }
.hm .mcard-toollist li { background: #fff; border-color: transparent; box-shadow: var(--sh-1); color: var(--ink); }
.hm .mcard-toollist .ms { background: var(--mint); color: var(--brand-ink); }
/* Tile colours by product group: varied, never the same twice in a row. */
.hm .mcard-seopilot { --tile: var(--mint); }
.hm .mcard-web-seo { --tile: var(--aqua-soft); }
.hm .mcard-ai-seo { --tile: var(--cream); }
.hm .mcard-local { --tile: #e6f6ee; }
.hm .mcard-links { --tile: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.hm .mcard-app-seo { --tile: var(--aqua-2); }
.hm .mcard-visitors { --tile: var(--cream); }
.hm .mcard-reports { --tile: var(--mint-2); box-shadow: inset 0 0 0 1px var(--mint); }
.hm .mcard-content { --tile: var(--aqua-soft); }
.hm .mcard-tools { --tile: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.hm-after { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.hm-after .mcard-note { margin: 0; text-align: left; color: var(--ink-3); font: 500 13px var(--sans); letter-spacing: 0; }

/* ===================================================================================================================
   5 · FLIP BOXES: white fronts with a hairline, tinted backs (mint, aqua, cream by column).
   =================================================================================================================== */
.hm-flips { background: #fff; }
.hm-flip-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 22px); }
.hm-flip .w-flip-face { min-height: 260px; display: flex; flex-direction: column; border-radius: 26px; }
.hm-flip .w-flip-front { background: var(--bg); border: 1px solid var(--line); }
.hm-flip-0 .w-flip-back { background: var(--mint); }
.hm-flip-1 .w-flip-back { background: var(--aqua-soft); }
.hm-flip-2 .w-flip-back { background: var(--cream-2); }
.hm-flip-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: auto; background: #fff; border: 1px solid var(--line); color: var(--coral); }
.hm-flip-ico .ms { font-size: 24px; }
.hm-flip-label { margin: 22px 0 8px; font: 600 14px var(--sans); color: var(--ink-3); }
.w-flip-back .hm-flip-label { margin-top: 0; color: var(--brand-ink); }
.hm-flip-1 .w-flip-back .hm-flip-label { color: var(--aqua); }
.hm-flip-2 .w-flip-back .hm-flip-label { color: var(--amber); }
.hm-flip-t { margin: 0; font: 720 clamp(24px, 2.1vw, 30px)/1.1 var(--display); letter-spacing: -.025em; max-width: 16ch; }
.hm-flip-a { margin: 0; font: 600 clamp(19px, 1.5vw, 22px)/1.4 var(--display); letter-spacing: -.01em; color: var(--ink); }
.w-flip:not(.is-3d) .w-flip-face { min-height: 0; }

/* ===================================================================================================================
   6 · HOW IT WORKS: a dotted path behind; big outlined numbers that fill in; each step on its own soft tint; the frame
   on the right sticks and swaps its picture. Phones and no JavaScript show each picture inside its step.
   =================================================================================================================== */
.hm-how { background: var(--bg); }
.hm-how::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--dots); background-size: 26px 26px; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%, transparent 100%); }
.hm-how-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hm-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.hm-rail { display: none; }
.hm-step { position: relative; padding: clamp(28px, 3vw, 44px); border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.hm-step-0 { background: var(--mint-2); border-color: var(--mint); }
.hm-step-1 { background: var(--aqua-2); border-color: var(--aqua-soft); }
.hm-step-2 { background: var(--cream); border-color: var(--cream-2); }
.hm-step-num { display: block; font: 800 clamp(72px, 8vw, 128px)/.85 var(--display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px rgba(11, 21, 38, .18); margin-bottom: 18px; transition: color var(--d-3), -webkit-text-stroke-color var(--d-3); }
.hm-step.is-on .hm-step-num { color: var(--brand); -webkit-text-stroke-color: transparent; }
.hm-step-1.is-on .hm-step-num { color: var(--aqua); }
.hm-step-2.is-on .hm-step-num { color: var(--amber); }
.hm-step h3 { margin: 0 0 12px; font: 740 clamp(30px, 2.8vw, 44px)/1.02 var(--display); letter-spacing: -.03em; }
.hm-step p { margin: 0 0 16px; max-width: 46ch; font-size: 17.5px; line-height: 1.6; color: var(--ink-2); }
.hm-step-pic { margin: 24px 0 0; padding: 8px; border-radius: 20px; background: #fff; box-shadow: var(--sh-soft); }
.hm-step-pic img { display: block; width: 100%; height: auto; border-radius: 14px; }
.hm-how-media { display: none; }
@media (min-width: 1024px) {
  .js .hm-how-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(48px, 6vw, 104px); }
  .js .hm-steps { gap: 18vh; padding: 6vh 0 6vh 44px; }
  .js .hm-step { opacity: .5; transform: scale(.97); transform-origin: 0 50%; transition: opacity var(--d-3), transform var(--d-4) var(--ease); }
  .js .hm-step.is-on { opacity: 1; transform: none; }
  .js .hm-step-pic { display: none; }
  .js .hm-rail { display: block; position: absolute; left: 0; top: 6vh; bottom: 6vh; width: 0; border-left: 2px dashed var(--line-2); }
  .js .hm-rail-fill { position: absolute; left: -2px; top: 0; width: 2px; height: 100%; border-radius: 2px; background: var(--grad-brand); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .js .hm-how-media { display: block; position: sticky; top: 14vh; align-self: start; }
}
.hm-frame { position: relative; aspect-ratio: 16 / 14; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(160deg, var(--mint) 0%, var(--aqua-soft) 100%); }
.hm-frame::before { content: ""; position: absolute; inset: 0; background: var(--grid-lines); background-size: 36px 36px; -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%); }
.hm-frame-pic { position: absolute; left: 50%; top: 9%; width: min(80%, 540px); height: auto; border-radius: 16px; translate: -50% 0; opacity: 0; transform: translateY(18px) scale(.98);
  box-shadow: 0 0 0 1px rgba(11, 21, 38, .06), 0 40px 80px -36px rgba(11, 50, 40, .5); transition: opacity var(--d-3) var(--ease-in-out), transform var(--d-4) var(--ease-out); }
.hm-frame-pic.is-on { opacity: 1; transform: none; }
.hm-frame-num { position: absolute; right: 24px; bottom: -10px; font: 800 150px/1 var(--display); letter-spacing: -.06em; color: rgba(255, 255, 255, .75); pointer-events: none; }
.hm-how-media .hm-caption { margin-top: 12px; text-align: right; }

/* ===================================================================================================================
   7 · PARALLAX BAND: three real crops at different depths over a mint wash with a fine grid.
   =================================================================================================================== */
.hm-band { position: relative; overflow: hidden; padding: clamp(72px, 8vw, 120px) 0; background: #fff; }
.hm-band-bg { position: absolute; inset: -80px 0; background: radial-gradient(50% 60% at 70% 50%, rgba(25, 195, 125, .18), transparent 70%), radial-gradient(40% 60% at 20% 40%, rgba(20, 184, 196, .14), transparent 70%), var(--grid-lines);
  background-size: auto, auto, 48px 48px, 48px 48px; }
.hm-band-in { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; min-height: 420px; }
.hm-band-t { margin: 0; font: 760 clamp(34px, 4vw, 60px)/1.02 var(--display); letter-spacing: -.035em; color: var(--ink); max-width: 12ch; }
.hm-band-t span { color: var(--brand-ink); }
.hm-band-pics { position: relative; height: 480px; }
.hm-band-pic { position: absolute; margin: 0; padding: 6px; border-radius: 18px; max-height: 330px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 38, .05), 0 40px 70px -36px rgba(11, 50, 40, .5); }
.hm-band-pic img { display: block; width: 100%; height: auto; border-radius: 13px; }
.hm-band-pic-0 { left: 0; top: 70px; width: 46%; transform: rotate(-3deg); }
.hm-band-pic-1 { right: 2%; top: 20px; width: 42%; transform: rotate(2.5deg); z-index: 1; }
.hm-band-pic-2 { left: 30%; bottom: 0; width: 40%; transform: rotate(-1deg); z-index: 2; }

/* ===================================================================================================================
   8 · SCREENS CAROUSEL: a pale aqua band; big slides, picture left, words right; dots, arrows and pause below.
   =================================================================================================================== */
.hm-screens { background: linear-gradient(180deg, var(--aqua-2), #fff); }
.hm-car { --w-slide: min(1040px, 88%); --w-gap: 24px; }
.hm-screen { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: 0; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-soft);
  transition: opacity var(--d-3), transform var(--d-4) var(--ease); }
.js .hm-car.is-ready .hm-screen:not(.is-current) { opacity: .55; transform: scale(.97); }
.hm-screen-pic { margin: 0; padding: clamp(18px, 2vw, 28px) 0 0 clamp(18px, 2vw, 28px); background: linear-gradient(160deg, var(--mint) 0%, var(--aqua-soft) 100%); overflow: hidden; }
.hm-screen-pic img { display: block; width: 100%; height: auto; border-radius: 14px 0 0 0; box-shadow: 0 0 0 1px rgba(11, 21, 38, .05), 0 30px 60px -30px rgba(11, 50, 40, .45); user-select: none; }
.hm-screen-txt { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 40px); }
.hm-screen-k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 14px var(--sans); color: var(--ink-3); }
.hm-screen-k .ms { font-size: 20px; color: var(--brand-ink); }
.hm-screen h3 { margin: 0; font: 740 clamp(26px, 2.4vw, 36px)/1.05 var(--display); letter-spacing: -.03em; }
.hm-screen-txt > p:not(.hm-screen-k) { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.hm-screen .hm-link { margin-top: auto; }
.hm-car .w-car-ui { margin-top: 18px; }

/* ===================================================================================================================
   9 · PROOF: a faint grid behind; the report crop on a pale aqua card; numbered hotspots with white notes.
   =================================================================================================================== */
.hm-proof { background: #fff; }
.hm-proof::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grid-lines); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(50% 60% at 75% 50%, #000, transparent 75%); mask-image: radial-gradient(50% 60% at 75% 50%, #000, transparent 75%); }
.hm-proof-grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hm-legend { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 22px; }
.hm-legend li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.hm-legend b { display: block; color: var(--ink); font: 700 19px/1.3 var(--display); margin-bottom: 2px; }
.hm-legend-n, .hm-hs-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--sans); color: #fff; background: var(--brand); }
.hm-hs-fig { margin: 0; }
.hm-hs-frame { position: relative; padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(110px, 12vw, 170px); border-radius: var(--r-xl); background: linear-gradient(160deg, var(--aqua-soft), var(--mint-2)); }
.hm-hs-base { display: block; width: 82%; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px rgba(11, 21, 38, .05), 0 30px 60px -30px rgba(11, 50, 40, .45); }
.hm-hs-float { position: absolute; right: clamp(14px, 2vw, 28px); bottom: clamp(18px, 2.4vw, 32px); width: 64%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(11, 21, 38, .06), 0 40px 70px -30px rgba(11, 50, 40, .5); }
.hm-hs { position: absolute; left: var(--x); top: var(--y); z-index: 2; }
.hm-hs-btn { position: relative; translate: -50% -50%; border: 0; cursor: pointer; box-shadow: 0 0 0 5px rgba(255, 255, 255, .85), 0 10px 22px -8px rgba(11, 50, 40, .6); }
.hm-hs-btn::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(11, 138, 91, .6); animation: hm-ping 2.2s var(--ease-out) infinite; }
@keyframes hm-ping { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.hm-pop { position: absolute; left: 50%; top: 26px; width: min(290px, 70vw); translate: -50% 0; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(11, 50, 40, .45); z-index: 3; }
.hm-pop b { display: block; color: var(--ink); margin-bottom: 4px; }
.hm-hs:last-of-type .hm-pop { left: auto; right: -16px; translate: 0 0; }
.hm-hs-fig .hm-caption { margin-top: 12px; text-align: right; }

/* ===================================================================================================================
   10 · CATEGORIES: an editorial list on white; the screen of the row under the pointer appears beside it.
   =================================================================================================================== */
.hm-cats { background: var(--bg); }
.hm-cats .w-rv-frame { background: linear-gradient(160deg, var(--cream) 0%, var(--mint-2) 100%); }

/* ===================================================================================================================
   11 · PLATFORM TABS: a large white panel; the tab indicator slides; two steps per platform.
   =================================================================================================================== */
.hm-plat { background: #fff; }
.hm-plat .hm-head { text-align: center; }
.hm-plat .hm-h2, .hm-plat .hm-sub { margin-left: auto; margin-right: auto; }
.hm-tabs { display: flex; flex-direction: column; align-items: center; }
.hm-tabs .w-tabs-panels { width: 100%; }
.hm-tab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(32px, 4vw, 56px); border-radius: 32px; background: var(--mint-2); border: 1px solid var(--mint); min-height: 300px; }
.hm-tab-1 { background: var(--aqua-2); border-color: var(--aqua-soft); }
.hm-tab-2 { background: var(--cream); border-color: var(--cream-2); }
.hm-tab-3 { background: var(--bg); border-color: var(--line); }
.hm-tab .w-tab-h { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font: 760 clamp(32px, 3.4vw, 52px)/1 var(--display); letter-spacing: -.035em; }
.hm-tab .w-tab-h .ms { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--brand-ink); font-size: 30px; box-shadow: var(--sh-1); }
.hm-tab-line { margin: 0 0 18px; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.hm-tab-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: ts; }
.hm-tab-steps li { counter-increment: ts; position: relative; padding: 20px 22px 20px 68px; border-radius: 18px; background: #fff; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); box-shadow: var(--sh-1); }
.hm-tab-steps li::before { content: counter(ts); position: absolute; left: 20px; top: 20px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 14px var(--sans); }
.hm-tab-steps b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 2px; }

/* ===================================================================================================================
   12 · USE CASES: a card carousel with the next card peeking; borderless, image-led; the "Drag" bubble on a mouse.
   =================================================================================================================== */
.hm-cases { background: linear-gradient(180deg, var(--bg), #fff); }
.hm-cases-ui { margin: 0; gap: 10px; }
.hm-row-wrap { position: relative; margin: 0 calc(50% - 50vw); }
.hm-row { --w-slide: min(460px, 84vw); --w-gap: 22px; --w-pad: max(var(--gutter), calc((100vw - var(--wrap-wide)) / 2)); }
.hm-row:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; }
.no-js .hm-cases-ui { display: none; }
.hm-case { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--case, var(--mint)); }
.hm-case-1 { --case: var(--aqua-soft); }
.hm-case-2 { --case: var(--cream); }
.hm-case-3 { --case: #e6f6ee; }
.hm-case-media { height: 260px; overflow: hidden; padding: 26px 26px 0; }
.hm-case-media img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 50px -28px rgba(11, 50, 40, .45); user-select: none; transition: transform .7s var(--ease); }
.hm-case:hover .hm-case-media img { transform: translateY(-6px); }
.hm-case-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; background: rgba(255, 255, 255, .6); }
.hm-case-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 14px var(--sans); color: var(--ink-3); }
.hm-case-label .ms { font-size: 19px; color: var(--brand-ink); }
.hm-case h3 { margin: 0; font: 740 26px/1.1 var(--display); letter-spacing: -.025em; }
.hm-case h3 em { font-style: normal; color: var(--brand-ink); }
.hm-case-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.hm-case-ticks li { position: relative; padding-left: 22px; }
.hm-case-ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-bright); }
.hm-case .hm-link { margin-top: auto; padding-top: 6px; }
.hm-cases-cap { margin-top: 10px; }

/* ===================================================================================================================
   13 · HONEST BY DESIGN: plain text on white, an editorial two-column list with hairlines (no cards).
   =================================================================================================================== */
.hm-honest { background: #fff; }
.hm-honest-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.hm-honest-intro { position: sticky; top: 120px; }
.hm-promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.hm-promise { padding: 28px 0 32px; border-top: 1px solid var(--line-2); }
.hm-promise h3 { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; font: 720 clamp(21px, 1.8vw, 25px)/1.15 var(--display); letter-spacing: -.02em; }
.hm-promise-ico { position: relative; flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--coral-soft); color: var(--coral); margin-top: -2px; }
.hm-promise-ico .ms { font-size: 20px; }
.hm-promise-ico.is-struck::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: currentColor; transform: rotate(-40deg); border-radius: 2px; }
.hm-promise p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.hm-honest .hm-fine { margin: 36px 0 0; }
.hm-help { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: 40px; padding: 22px 22px 22px 28px; border-radius: 24px; background: var(--mint-2); border: 1px solid var(--mint); }
.hm-help-t { display: flex; align-items: center; gap: 10px; margin: 0; font: 680 19px/1.3 var(--display); }
.hm-help-t .ms { color: var(--brand-ink); }
.hm-help-form { display: flex; align-items: center; gap: 8px; flex: 1 1 340px; max-width: 540px; padding: 6px 6px 6px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: #fff; }
.hm-help-form:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
.hm-help-form input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 16px var(--sans); padding: 10px 0; }
.hm-help-form input::placeholder { color: #8391a6; }
.hm-help-form input:focus-visible { outline: none; }

/* ===================================================================================================================
   14 · PRICE: three columns; the recommended plan is the strong green-to-teal colour panel with white text.
   =================================================================================================================== */
.hm-price { background: var(--bg); }
.hm-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.hm-plans.is-1 { grid-template-columns: minmax(0, 560px); }
.hm-plans.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-plan { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 340px; padding: clamp(28px, 2.8vw, 40px); border-radius: 28px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--d-4) var(--ease), box-shadow var(--d-4) var(--ease); }
.hm-plan:hover { transform: translateY(-4px); box-shadow: var(--sh-soft); }
.hm-plan.is-hi { border-color: transparent; background: var(--grad-deep); color: #fff; box-shadow: 0 40px 70px -36px rgba(8, 108, 71, .7); }
.hm-plan-flag { position: absolute; top: 22px; right: 22px; padding: 6px 12px; border-radius: var(--r-pill); background: #fff; color: var(--brand-ink); font: 650 12.5px var(--sans); }
.hm-plan h3 { margin: 0; font: 720 24px/1.2 var(--display); }
.hm-plan-price { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; }
.hm-plan-price b { font: 780 clamp(48px, 4.2vw, 64px)/1 var(--display); letter-spacing: -.04em; }
.hm-plan-price small { color: var(--ink-3); font-size: 15px; }
.hm-plan-desc { margin: 0; color: var(--ink-2); font-size: 16px; }
.hm-plan-trial { margin: 0; font: 600 14px var(--sans); color: var(--brand-ink); }
.hm-plan .hm-link { margin-top: auto; padding-top: 10px; }
.hm-plan.is-hi .hm-plan-price small, .hm-plan.is-hi .hm-plan-desc { color: rgba(255, 255, 255, .86); }
.hm-plan.is-hi .hm-plan-trial, .hm-plan.is-hi .hm-link { color: #fff; }
.hm-plan.is-hi :focus-visible { outline-color: #fff; }

/* ===================================================================================================================
   15 · QUESTIONS: title on the left, soft white cards with a gentle shadow on the right.
   =================================================================================================================== */
.hm-faq { background: #fff; }
.hm-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.hm-faq .faq { max-width: none; gap: 14px; }
.hm-faq .faq details { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px rgba(11, 21, 38, .04), 0 14px 30px -24px rgba(11, 21, 38, .25); }
.hm-faq .faq details[open] { border-color: var(--mint-3); box-shadow: var(--sh-soft); }
.hm-faq .faq summary { font-size: 18.5px; padding: 24px 68px 24px 26px; }
.hm-faq .faq summary::after { background: var(--bg-2); color: var(--ink); }
.hm-faq .faq details[open] summary::after { background: var(--brand); color: #fff; }
.hm-faq .faq .ans { color: var(--ink-2); padding: 0 26px 24px; }

/* ===================================================================================================================
   16 · CLOSING BAND: a strong green-to-teal panel (colour, never black) with soft rings that drift, the white audit
   field again, two light cards; then a giant pale sign-off.
   =================================================================================================================== */
.hm-final { position: relative; padding: var(--sec-tight) 0 0; overflow: hidden; background: #fff; }
.hm-final-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px clamp(32px, 4vw, 64px); align-items: center;
  padding: clamp(36px, 5vw, 80px); border-radius: 40px; background: var(--grad-deep); color: #fff; }
.hm-final-rings { position: absolute; z-index: -1; right: -180px; top: -220px; width: 720px; height: 720px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .09) 0 1px, transparent 1px 44px); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.hm-final .hm-kicker { color: #c9f5e0; }
.hm-final .hm-h2 { max-width: 15ch; color: #fff; }
.hm-final .aw-label, .hm-final .aw-note { color: rgba(255, 255, 255, .86); }
.hm-final .aw-note > span:not(:first-child)::before { color: rgba(255, 255, 255, .6); }
.hm-final .aw-row { border-color: transparent; box-shadow: 0 30px 60px -30px rgba(0, 30, 20, .6); }
.hm-final .aw-row:focus-within { border-color: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3), 0 30px 60px -30px rgba(0, 30, 20, .6); }
.hm-final :focus-visible { outline-color: #fff; }
.hm-final-side { display: grid; gap: 14px; }
.hm-final-card { display: grid; gap: 6px; padding: 24px; border-radius: 22px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); text-decoration: none; color: #fff !important;
  transition: background var(--d-2), transform var(--d-2) var(--ease); }
.hm-final-card:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.hm-final-card b { font: 720 20px/1.2 var(--display); }
.hm-final-card small { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.hm-final-card .hm-link { color: #fff; }
.hm-final-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px; background: #fff; color: var(--brand-ink); }
.hm-final-fine { grid-column: 1 / -1; margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .86); }
.hm-signoff { margin: clamp(28px, 4vw, 48px) 0 0; text-align: center; font: 800 clamp(72px, 17vw, 260px)/.78 var(--display); letter-spacing: -.06em; color: transparent;
  background: linear-gradient(180deg, var(--mint-3), rgba(220, 247, 234, .2) 80%); -webkit-background-clip: text; background-clip: text; user-select: none; white-space: nowrap; overflow: hidden; }
/* The final band already offers the demo and help: the footer's duplicate buttons are left out on this page. */
.has-overlay-head .site-foot .foot-cta { display: none; }

/* ===================================================================================================================
   Responsive: tablet 768–1023, phone ≤ 760 (first screen: the audit button ends above 760 px at 390 × 844).
   =================================================================================================================== */
@media (max-width: 1100px) {
  .hm-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .hm-chip { right: 0; }
  .hm-flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .hm-proof-grid, .hm-faq-grid, .hm-honest-grid, .hm-head-split, .hm-band-in { grid-template-columns: minmax(0, 1fr); }
  .hm-honest-intro { position: static; }
  .hm-final-panel { grid-template-columns: minmax(0, 1fr); }
  .hm-final-side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .hm-plans, .hm-plans.is-2 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .hm-statement-foot { grid-template-columns: minmax(0, 1fr); }
  .hm-screen { grid-template-columns: minmax(0, 1fr); }
  .hm-tab { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hm-hero { min-height: 0; padding-top: calc(64px + 28px); }
  .hm-hero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hm-stage { margin: 0 auto; max-width: 520px; aspect-ratio: 4 / 3.2; }
  .hm-stage-foot { justify-content: space-between; }
  .hm-band-pics { height: 300px; }
}
@media (max-width: 760px) {
  .hm { font-size: 16px; }
  .hm-hero .hm-kicker { font-size: 12.5px; margin-bottom: 18px; padding: 6px 12px 6px 7px; }
  .hm-title { margin-bottom: 16px; }
  .hm-h1 { font-size: clamp(42px, 11.6vw, 54px); }
  .hm-lede { font-size: 17px; }
  .hm-action { margin-top: 22px; }
  .aw { --aw-h: 128px; }
  .aw-label { margin-bottom: 8px; }
  .aw-row { flex-wrap: wrap; height: auto; min-height: var(--aw-h); padding: 6px; gap: 6px; align-content: stretch; }
  .aw-ico { display: none; }
  .aw-row input { flex: 1 1 100%; height: 58px; padding: 0 12px; font-size: 17px; }
  .aw-go { flex: 1 1 100%; height: 54px; }
  .aw-limit { grid-template-columns: auto minmax(0, 1fr); }
  .aw-limit-go { grid-column: 1 / -1; max-width: none; justify-content: center; }
  .aw-note { font-size: 13px; gap: 4px 10px; }
  .aw-note > span:not(:first-child)::before { margin-right: 10px; }
  .aw-beta { margin-left: 0; flex-basis: 100%; font-size: 15px; }
  .hm-ticks { font-size: 13.5px; gap: 8px 14px; }
  .hm-f1, .hm-chip { display: none; }
  .hm-base { left: 6%; width: 88%; top: 2%; max-height: 98%; }
  .hm-stage-card { inset: 10% 0 0 0; border-radius: 26px; }
  .hm-strip-head { align-items: flex-start; }
  .hm-big .w-inline-pic { display: none; }
  .hm-numbers { gap: 22px; }
  /* The bento becomes one row to swipe on a phone (the next tile peeks in), so the page stays short. */
  .hm .home-mods .bento { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); }
  .hm .home-mods .bento::-webkit-scrollbar { display: none; }
  .hm .mcard, .hm .mcard.is-large { flex: 0 0 84%; scroll-snap-align: start; cursor: pointer; }
  .hm .mcard:hover, .hm .mcard:focus-within { transform: none; }
  .hm .mcard-media, .hm .mcard.is-large .mcard-media, .hm .mcard.is-tall .mcard-media { height: 220px; min-height: 0; max-height: none; aspect-ratio: auto; }
  .hm .mcard-go, .hm .mcard-more { display: none; }
  .hm .mcard-body { padding: 8px 20px 22px; }
  .hm .mcard-body h3 { font-size: 24px; }
  .hm-flip-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); }
  .hm-flip-grid::-webkit-scrollbar { display: none; }
  .hm-flip { flex: 0 0 82%; scroll-snap-align: start; }
  .hm-band-pic { translate: none !important; }
  .hm-band-t { margin-bottom: 8px; }
  .hm-flip .w-flip-face { min-height: 200px; }
  .hm-step-pic { max-height: 280px; overflow: hidden; }
  .hm-sec { padding: 64px 0; }
  .hm-head { margin-bottom: 30px; }
  .hm-promises { grid-template-columns: minmax(0, 1fr); }
  .hm-step-num { font-size: 72px; }
  .hm-band-in { min-height: 0; }
  .hm-band-pics { height: 250px; }
  .hm-case-media { height: 210px; }
  .hm-final-panel { border-radius: 28px; }
  .hm-help { padding: 18px; }
  .hm-car { --w-slide: 88%; }
  .hm-car .w-round:not(.is-small) { display: none; }
  .hm-plan { min-height: 0; }
}

/* ===================================================================================================================
   Reduced motion: nothing moves on its own; changes are instant; content is fully shown.
   =================================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hm-hs-btn::before, .aw-spin, .hm-ticks path { animation: none; }
  .hm-layer { translate: none; transition: none; }
  .hm-set, .hm-set.is-on, .hm-frame-pic, .hm-w, .hm-rot, .hm-step, .hm .mcard, .hm .mcard::before, .hm-screen, .hm-plan, .hm-case-media img { transition: none; }
  .hm-rot.is-in, .hm-rot.is-in::after { animation: none; }
  .js .hm-marquee-track { animation: none; }
  .js [data-hm-words].is-ready .hm-w:not(.is-lit) { opacity: 1; transform: none; }
  .hm .mcard:hover, .hm .mcard:focus-within, .hm-plan:hover { transform: none; }
  .hm .mcard:hover::before, .hm .mcard:focus-within::before { transform: translateX(-110%); }
  .hm-frame-pic, .js .hm-step { transform: none; }
  .js .hm-car.is-ready .hm-screen:not(.is-current) { transform: none; }
}

/* Metric-matched fallback for the display face (docs/specs/SITE-REDESIGN.md §3.1): the huge headings keep their place
   while Bricolage Grotesque loads, so nothing on the first screen moves when it arrives. */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 100%; ascent-override: 95%; descent-override: 25%; }
.hm-h1, .hm-big, .hm-h2 { font-family: "Bricolage Grotesque", "Bricolage Fallback", var(--display); }
@media (min-width: 761px) { .hm-ticks { display: grid; grid-template-columns: repeat(2, max-content); } }