/* ============================================================================
   VTurnU homepage.

   SCOPING RULE, do not break it: never style a bare element under .hp.
   .hp is on <body>, so `.hp a {}` repaints the shared header and footer too.
   That is exactly what made the hero button and every footer link invisible:
   links were forced to ink on an ink ground. Style .hp-* section classes and
   named component classes only.
   ============================================================================ */

.hp {
    --paper:      #F6F2EA;
    --paper-2:    #FFFDF9;
    --ink:        #14102A;
    --ink-2:      #1E1940;
    --ink-70:     rgba(20, 16, 42, .72);
    --ink-55:     rgba(20, 16, 42, .60);
    --ink-12:     rgba(20, 16, 42, .12);
    --ink-06:     rgba(20, 16, 42, .06);
    --cyan:       #00A5C4;
    --blue:       #2473D0;
    --violet:     #4438CA;
    --pink:       #E5306E;
    --orange:     #E07600;
    --on-ink:     #F6F2EA;
    --on-ink-70:  rgba(246, 242, 234, .76);
    --on-ink-12:  rgba(246, 242, 234, .16);
    --sans:       Figtree, Poppins, system-ui, -apple-system, sans-serif;
    --display:    Caprasimo, Poppins, system-ui;
    --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 2.5rem;
    --s6: 3rem; --s8: 4rem; --s10: 5rem; --s12: 6rem;
    --shell: 1200px;
}

.hp main { display: block; overflow-x: clip; }
.hp-sec { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.hp-wrap { max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* ---- type ------------------------------------------------------------- */
/* Sized to land on two lines in the widened column rather than five in a
   narrow one. balance keeps those two lines close to even instead of leaving
   one word stranded on the second. */
.hp-h1 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2.375rem, 4.6vw, 4rem);
    line-height: 1.08; letter-spacing: -.02em;
    text-wrap: balance;
    margin: 0 0 var(--s3); color: var(--ink);
}
.hp-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.85rem, 4vw, 2.9rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--s3); color: var(--ink); }
.hp-eyebrow { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--violet); margin: 0 0 var(--s3); }
.hp-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .9375rem; margin: 0 0 var(--s4);
    font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--violet); background: var(--paper-2);
    border: 1px solid rgba(68, 56, 202, .22); border-radius: 999px;
}
.hp-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); flex: none; }
.hp-lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--ink-70); max-width: 60ch; margin: 0 0 var(--s5); }
.hp-sec--ink .hp-h2, .hp-sec--ink .hp-h1 { color: var(--on-ink); }
.hp-sec--ink .hp-lead { color: var(--on-ink-70); }
.hp-sec--ink .hp-eyebrow { color: var(--cyan); }

/* ---- buttons ---------------------------------------------------------- */
/* Specificity is deliberate: these must beat any inherited link colour. */
.hp .hp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 1.0625rem 2rem; min-height: 56px;
    font: 600 1.0625rem/1 var(--sans); text-align: center; text-decoration: none;
    border-radius: 10px; border: 2px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
/* Both gradient stops are dark enough to carry white text at 4.5:1. The
   brighter brand pink and orange measured 4.2 and 3.1, which fails. */
.hp .hp-btn--primary {
    background: linear-gradient(100deg, #D42461, #B85A00);
    color: #FFFFFF; border-color: transparent;
    box-shadow: 0 8px 22px rgba(212, 36, 97, .32);
}
.hp .hp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(229, 48, 110, .40); color: #FFFFFF; }
.hp .hp-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-12); }
.hp .hp-btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.hp .hp-btn--on-ink { background: var(--on-ink); color: var(--ink); }
.hp .hp-btn--on-ink:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); color: var(--ink); }
.hp .hp-btn--ghost-on-ink { background: transparent; color: var(--on-ink); border-color: var(--on-ink-12); }
.hp .hp-btn--ghost-on-ink:hover { background: var(--on-ink); color: var(--ink); }
.hp .hp-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.hp-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ---- reveal ----------------------------------------------------------- */
.hp-js [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.hp-js [data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .hp-js [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- hero ------------------------------------------------------------- */
/* The banner has to resolve inside one screen. It was 1112px tall against a
   900px viewport, so the visual and the first CTA were both below the fold on
   a laptop. min-height on the section plus centred content makes it fill
   exactly one viewport minus the header, and the padding no longer stacks on
   top of that height. */
.hp-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100svh - 84px);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
    overflow: hidden;
}
.hp-hero > .hp-wrap { width: 100%; }
.hp-hero::before {
    content: ""; position: absolute; inset: -40% -15% auto -15%; height: 110%;
    background:
        radial-gradient(50% 65% at 14% 28%, rgba(36, 115, 208, .24), transparent 70%),
        radial-gradient(46% 60% at 86% 14%, rgba(229, 48, 110, .20), transparent 70%),
        radial-gradient(38% 50% at 60% 78%, rgba(68, 56, 202, .14), transparent 70%);
    pointer-events: none;
}
.hp-hero .hp-wrap { position: relative; }
/* Copy column widened from 42ch. At 42ch the h1 broke into five ragged lines
   in a 435px column while half the row sat empty, which is what made the
   banner read as cramped. */
.hp-hero-grid { display: grid; grid-template-columns: 1.55fr .8fr; gap: clamp(2rem, 3.5vw, 3rem); align-items: center; }
.hp-hero-copy { max-width: none; }
/* Wider than the 60ch body default so the tagline resolves in three lines
   under the two-line heading instead of six in a narrow column. */
.hp-hero .hp-lead { max-width: 54ch; margin-bottom: var(--s4); }

/* Highlighted keywords. The underline is drawn behind the text and grows on
   load, so the eye lands on "Google" and "AI" first. */
.hp-hero-mark {
    color: var(--pink);
    position: relative;
    white-space: nowrap;
}
.hp-hero-mark::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: .06em;
    height: .1em; border-radius: 2px;
    background: currentColor; opacity: .28;
    transform: scaleX(0); transform-origin: left;
    animation: hp-underline .7s cubic-bezier(.2, .7, .3, 1) forwards;
}
.hp-hero-mark--blue { color: var(--blue); }
.hp-hero-mark--blue::after { animation-delay: .18s; }
@keyframes hp-underline { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .hp-hero-mark::after { animation: none; transform: scaleX(1); }
}

.hp-hero-note { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.hp-hero-note li { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; color: var(--ink-70); }
.hp-hero-note svg { flex: none; color: var(--blue); }

/* ---- hero visual: an illustrative search + AI-answer mockup, with real
   client numbers layered on as proof chips. Generic domain, no real brand
   or actual Google artwork, so it reads as an illustration, not a claim to
   be a screenshot. ---------------------------------------------------- */
.hp-hero-visual { display: flex; justify-content: center; padding: var(--s4) var(--s3) var(--s5); }
.hp-mock {
    position: relative; width: 100%; max-width: 440px;
    background: var(--paper-2); border: 1px solid var(--ink-12); border-radius: 18px;
    box-shadow: 0 30px 70px -20px rgba(20, 16, 42, .28);
    transform: rotate(-1.2deg);
}
.hp-mock-bar { display: flex; align-items: center; gap: .4375rem; padding: .8125rem 1.125rem; border-bottom: 1px solid var(--ink-12); }
.hp-mock-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hp-mock-url { margin-left: .625rem; padding: .25rem .75rem; background: var(--ink-06); border-radius: 999px; font-size: .75rem; color: var(--ink-55); font-family: monospace; }
.hp-mock-body { display: grid; gap: var(--s3); padding: clamp(1.25rem, 3vw, 1.75rem); }
.hp-mock-r-title { font-size: 1.0625rem; font-weight: 600; color: #1A0DAB; margin: 0 0 .1875rem; line-height: 1.35; }
.hp-mock-r-url { font-size: .8125rem; color: #0A6B1D; margin: 0 0 .375rem; }
.hp-mock-r-desc { font-size: .875rem; line-height: 1.5; color: var(--ink-70); margin: 0; }
.hp-mock-ai { padding: var(--s3); background: linear-gradient(135deg, rgba(36, 115, 208, .09), rgba(68, 56, 202, .09)); border: 1px solid rgba(68, 56, 202, .18); border-radius: 12px; }
.hp-mock-ai-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); margin: 0 0 .5rem; }
.hp-mock-ai-text { font-size: .875rem; line-height: 1.55; color: var(--ink); margin: 0; }
.hp-mock-ai-text strong { color: var(--violet); }

.hp-chip {
    position: absolute; display: inline-flex; align-items: baseline; gap: .5rem;
    padding: .625rem 1rem; background: var(--paper); border: 1px solid var(--ink-12); border-radius: 999px;
    box-shadow: 0 14px 30px -10px rgba(20, 16, 42, .25);
    font-family: var(--display); font-weight: 400; font-size: 1.1875rem; color: var(--ink); line-height: 1;
    white-space: nowrap;
}
.hp-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.hp-chip-l { font-family: var(--sans); font-size: .8125rem; font-weight: 600; color: var(--ink-55); }
.hp-chip--a { top: -18px; right: -8px; transform: rotate(2deg); }
.hp-chip--b { bottom: -16px; left: -18px; transform: rotate(-2deg); }

/* ---- logo marquee ----------------------------------------------------- */
.hp-marquee-sec { padding: var(--s6) 0; border-block: 1px solid var(--ink-12); background: var(--paper-2); }
.hp-marquee-head { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 var(--s4); }
.hp-marquee { position: relative; 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); }
.hp-marquee-track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); width: max-content; animation: hp-slide 38s linear infinite; }
.hp-marquee:hover .hp-marquee-track { animation-play-state: paused; }
.hp-marquee-track img { height: clamp(34px, 4.5vw, 46px); width: auto; display: block; filter: grayscale(1); opacity: .62; transition: filter .25s ease, opacity .25s ease; }
.hp-marquee-track img:hover { filter: none; opacity: 1; }
@keyframes hp-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
    .hp-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
    .hp-marquee-track { animation: none; }
}

/* ---- services --------------------------------------------------------- */
.hp-svc-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.hp-svc-head .hp-lead { margin-bottom: 0; }
.hp-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-12); border: 1px solid var(--ink-12); border-radius: 16px; overflow: hidden; }
.hp-svc {
    display: flex; flex-direction: column; gap: var(--s2);
    padding: clamp(1.5rem, 2.6vw, 2.25rem); background: var(--paper-2);
    text-decoration: none; position: relative; transition: background .2s ease;
}
.hp-svc::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.hp-svc:hover { background: var(--paper); }
.hp-svc:hover::before { transform: scaleX(1); }
.hp-svc:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.hp-svc-t { font-size: 1.1875rem; font-weight: 700; color: var(--ink); margin: 0; }
.hp-svc-d { font-size: .9688rem; line-height: 1.55; color: var(--ink-70); margin: 0; flex: 1; }
/* The accent lives in the top rule, which is decorative. This label is real
   text, and the brighter accents (cyan, pink, orange) only reach 2.5 to 3.7
   against paper, so it stays ink. */
.hp-svc-go { font-size: .9375rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: .375rem; transition: gap .2s ease; }
.hp-svc:hover .hp-svc-go { gap: .625rem; }

/* ---- results ---------------------------------------------------------- */
.hp-sec--ink { background: var(--ink); color: var(--on-ink); }
.hp-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-bottom: var(--s6); }
.hp-res { padding: var(--s5) var(--s4); border: 1px solid var(--on-ink-12); border-radius: 14px; background: linear-gradient(160deg, rgba(246, 242, 234, .05), transparent); }
.hp-res-n { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; margin: 0 0 var(--s2); }
.hp-res:nth-child(1) .hp-res-n { color: #4FC9E3; }
.hp-res:nth-child(2) .hp-res-n { color: #9E93FF; }
.hp-res:nth-child(3) .hp-res-n { color: #FF7FA8; }
.hp-res-l { font-size: 1rem; color: var(--on-ink); margin: 0 0 var(--s2); font-weight: 600; }
.hp-res-w { font-size: .9063rem; color: var(--on-ink-70); margin: 0; }

/* ---- mid-page conversion band ---------------------------------------- */
.hp-band { background: linear-gradient(100deg, var(--violet), var(--blue)); color: #fff; }
.hp-band .hp-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.hp-band-t { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.15; margin: 0 0 .5rem; color: #fff; }
/* Full white, not 88%: over the lighter blue end of the gradient the faded
   version measured 4.04 against a 4.5 requirement. */
.hp-band-s { font-size: 1rem; color: #FFFFFF; margin: 0; max-width: 52ch; }
.hp .hp-band .hp-btn--on-ink { background: #fff; color: var(--violet); }

/* ---- FAQ, two columns ------------------------------------------------- */
.hp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); align-items: start; }
.hp-faq-col { display: flex; flex-direction: column; }
.hp-faq-i { border-bottom: 1px solid var(--ink-12); }
.hp-faq-i summary {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
    padding: var(--s4) 0; min-height: 56px; cursor: pointer; list-style: none;
    font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--ink);
}
.hp-faq-i summary::-webkit-details-marker { display: none; }
.hp-faq-i summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--violet); font-weight: 400; }
.hp-faq-i[open] summary { color: var(--violet); }
.hp-faq-i[open] summary::after { content: "\2212"; }
.hp-faq-i summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.hp-faq-a { padding: 0 0 var(--s4); font-size: 1rem; line-height: 1.65; color: var(--ink-70); max-width: 54ch; }

/* ---- conversion form -------------------------------------------------- */
.hp-form-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hp-form-why { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.hp-form-why li { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: start; font-size: 1rem; line-height: 1.5; color: var(--on-ink-70); }
.hp-form-why b { color: var(--on-ink); font-weight: 600; }
.hp-tick { flex: none; margin-top: .125rem; }

.hp-form { display: grid; gap: var(--s3); padding: clamp(1.5rem, 3vw, 2.25rem); background: rgba(246, 242, 234, .06); border: 1px solid var(--on-ink-12); border-radius: 16px; }
.hp-f { display: grid; gap: .4375rem; }
.hp-f label { font-size: .875rem; font-weight: 600; color: var(--on-ink); }
.hp-f input, .hp-f select, .hp-f textarea {
    width: 100%; padding: .875rem 1rem; min-height: 52px;
    font: 400 1rem/1.4 var(--sans); color: var(--on-ink);
    background: rgba(20, 16, 42, .45); border: 1.5px solid var(--on-ink-12); border-radius: 9px;
    transition: border-color .18s ease, background .18s ease;
}
.hp-f textarea { min-height: 96px; resize: vertical; }
.hp-f input::placeholder, .hp-f textarea::placeholder { color: rgba(246, 242, 234, .45); }
.hp-f input:focus, .hp-f select:focus, .hp-f textarea:focus { outline: none; border-color: var(--cyan); background: rgba(0, 165, 196, .12); }

/* The native dropdown list is drawn by the OS, not by this stylesheet, and it
   inherits the select's light `color` while painting its own light background.
   The result was pale text on a pale menu: every option after the first was
   effectively invisible, so nobody could pick a service. Options need their
   colours stated outright. */
.hp-f select option {
    color: #14102A;
    background: #FFFFFF;
}
.hp-f input[aria-invalid="true"] { border-color: #FF7FA8; }
.hp-f-err { font-size: .8125rem; color: #FF9CBB; min-height: 1.1em; }
.hp-f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp-form-fine { font-size: .8438rem; color: var(--on-ink-70); margin: 0; text-align: center; }
.hp-form-ok { padding: var(--s4); border: 1.5px solid var(--cyan); background: rgba(0, 165, 196, .14); border-radius: 12px; }
.hp-form-ok p { margin: 0; color: var(--on-ink); }
.hp-form-bad { padding: var(--s3); border: 1.5px solid #FF7FA8; background: rgba(229, 48, 110, .14); border-radius: 10px; color: var(--on-ink); font-size: .9375rem; }

/* ---- sticky mobile CTA ------------------------------------------------ */
.hp-sticky { display: none; }
@media (max-width: 760px) {
    .hp-sticky {
        display: flex; gap: .625rem; position: fixed; z-index: 60;
        left: 0; right: 0; bottom: 0; padding: .625rem .875rem calc(.625rem + env(safe-area-inset-bottom));
        background: rgba(246, 242, 234, .96); backdrop-filter: blur(10px);
        border-top: 1px solid var(--ink-12);
    }
    .hp-sticky .hp-btn { flex: 1; padding: .875rem 1rem; font-size: 1rem; min-height: 52px; }
    .hp main { padding-bottom: 84px; }
}

/* Tawk's launcher is suppressed site-wide, see assets/css/style.css. */

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1000px) {
    .hp-hero-grid { grid-template-columns: 1fr; }
    .hp-hero-copy { max-width: 100%; }
    .hp-mock { transform: none; max-width: 480px; }
    .hp-svc-grid { grid-template-columns: repeat(2, 1fr); }
    .hp-res-grid { grid-template-columns: 1fr; }
    .hp-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .hp-faq-grid { grid-template-columns: 1fr; }
    .hp-band .hp-wrap { flex-direction: column; align-items: flex-start; }

    /* Keeping the banner inside one phone screen. Stacked, the copy column
       (661px) and the mockup (596px) came to 1345px against an 844px screen,
       so the CTA sat well below the fold. Everything below is about buying
       back that height without dropping the promise or the proof. */

    /* The three trust lines repeat verbatim further down the page, so they
       are the cheapest 106px to give up here. */
    .hp-hero-note { display: none; }

    /* The browser mockup is a desktop device. Stacked on a phone it cost
       407px, which no amount of trimming could fit alongside 483px of copy on
       a 667px screen. What actually matters in it is the two real client
       numbers, so on phones the frame goes and the proof chips stay, as a
       compact row. Roughly 50px instead of 407px, and the banner resolves in
       one screen with the promise, the CTA and the evidence all visible. */
    .hp-hero-visual { padding: 0; }
    .hp-mock {
        display: flex; flex-direction: row; flex-wrap: wrap;
        gap: .5rem; max-width: none;
        background: none; border: 0; box-shadow: none; transform: none;
    }
    .hp-mock-bar, .hp-mock-body { display: none; }
    .hp-chip {
        position: static; transform: none; margin: 0;
        font-size: 1rem; padding: .5rem .8125rem;
    }
    .hp-chip--b { display: inline-flex; }

    /* The secondary CTA drops to a text link: two stacked full-width buttons
       cost 128px, and only the primary one needs that weight. */
    .hp-hero .hp-actions .hp-btn--ghost {
        border: 0; padding: .5rem 0; min-height: 0;
        text-decoration: underline; text-underline-offset: 4px;
    }
    .hp-hero .hp-actions .hp-btn--ghost:hover { background: none; color: var(--ink); transform: none; }
    .hp-mock-bar { padding: .5rem .75rem; }
    .hp-mock-body { gap: var(--s2); padding: .875rem; }
    .hp-mock-r-title { font-size: .9375rem; }
    .hp-mock-r-desc { font-size: .8125rem; }
    .hp-mock-ai { padding: .75rem; }
    .hp-mock-ai-text { font-size: .8125rem; }
    .hp-chip { font-size: 1rem; padding: .4375rem .75rem; }

    .hp-hero-grid { gap: var(--s3); }
    .hp-hero .hp-lead { margin-bottom: var(--s3); }
}

/* Short viewports (iPhone SE and similar, and any phone in landscape). The
   min-height above is a floor, not a ceiling, so on a 667px screen the banner
   still ran over by the height of its own spacing. This tightens the rhythm
   rather than removing anything. */
@media (max-height: 720px) and (max-width: 760px) {
    .hp-hero { min-height: 0; padding-top: var(--s2); padding-bottom: var(--s3); }
    .hp-badge { margin-bottom: var(--s2); padding: .375rem .75rem; }
    .hp-h1 { font-size: clamp(1.75rem, 7.5vw, 2.25rem); margin-bottom: var(--s2); }
    .hp-hero .hp-lead { font-size: 1rem; margin-bottom: var(--s2); }
    .hp-hero-grid { gap: var(--s2); }
    .hp-chip { font-size: .9375rem; padding: .375rem .6875rem; }
}
@media (max-width: 560px) {
    .hp-svc-grid { grid-template-columns: 1fr; }
    .hp-actions { flex-direction: column; align-items: stretch; }
    .hp .hp-btn { width: 100%; }
    /* Absolute corner chips have no room on a narrow screen, so they drop
       into the card's own flow as a plain row underneath instead. */
    .hp-hero-visual { padding: 0 var(--s3) var(--s4); }
    .hp-mock { display: flex; flex-direction: column; }
    .hp-chip { position: static; transform: none; margin: 0 var(--s3) var(--s3); align-self: flex-start; }
}
@media (max-width: 400px) {
    .hp-chip { font-size: 1.0625rem; padding: .5rem .875rem; }
}