.elementor-4169 .elementor-element.elementor-element-hero2026v2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4169 .elementor-element.elementor-element-hero2026v2:not(.elementor-motion-effects-element-type-background), .elementor-4169 .elementor-element.elementor-element-hero2026v2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-4169 .elementor-element.elementor-element-identitys2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4169 .elementor-element.elementor-element-c66ccf9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4169 .elementor-element.elementor-element-b9db6ab{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4169 .elementor-element.elementor-element-41f34da{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4169 .elementor-element.elementor-element-fc489ee{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4169 .elementor-element.elementor-element-609671e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4169 .elementor-element.elementor-element-250941e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* =====================================================================
   Agentmark — Single Page Stylesheet  (AGENTMARK-2026 light theme)
   Pure vanilla CSS (no frameworks). Scoped under #agentmark-wrapper so it
   Layout: Flexbox + CSS Grid. Units: rem/em for scalable type & spacing.
   Breakpoints: Mobile <=768px, Tablet <=1024px, Desktop 1025px+.
   ===================================================================== */

/* ----------------------------- Tokens ------------------------------ */
body, html {
    padding: 0;
    margin: 0;
}
#agentmark-wrapper {
    --teal:        #08a6aa;  /* primary accent / buttons          */
    --teal-600:    #078b8f;  /* hover                             */
    --teal-050:    #e6f7f7;  /* light chip fill                   */
    --teal-bright: #14dbc5;  /* bright accent (dot / sparkle)     */

    --ink:         #070d27;  /* headings + strong body            */
    --ink-2:       #0e1e33;  /* secondary dark                    */
    --slate:       #5b6576;  /* muted body text                   */
    --slate-2:     #8a94a3;  /* eyebrow / faint text              */

    --cream:       #f5f5f5;  /* section background                */
    --white:       #ffffff;
    --border:      #e7e7e7;  /* hairline borders                  */
    --border-2:    #ededed;

    --navy:        #0c1329;  /* dark footer                       */
    --navy-2:      #101833;
    --navy-mute:   #1b2540;  /* footer wordmark watermark         */
    --navy-text:   #aab3d6;  /* footer body text                  */

    --radius-sm: 12px;
    --radius:    16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(9,25,42,.05);
    --shadow-sm: 0 1px 1px rgba(11,28,44,.04), 0 8px 20px rgba(11,28,44,.06);
    --shadow-md: 0 10px 30px rgba(11,28,44,.08);
    --shadow-lg: 0 24px 60px rgba(11,28,44,.12);

    --maxw: 1280px;
    --ease: cubic-bezier(.22,.61,.36,1);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.5;
    background: var(--cream);
    overflow-x: hidden;              /* guard against any horizontal scroll */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --------------------------- Resets -------------------------------- */
#agentmark-wrapper * { box-sizing: border-box; }
#agentmark-wrapper h1,
#agentmark-wrapper h2,
#agentmark-wrapper h3,
#agentmark-wrapper h4,
#agentmark-wrapper p,
#agentmark-wrapper ul,
#agentmark-wrapper figure { margin: 0; padding: 0; }
#agentmark-wrapper ul { list-style: none; }
#agentmark-wrapper a { text-decoration: none; color: inherit; }
#agentmark-wrapper img { max-width: 100%; display: block; }
#agentmark-wrapper button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* --------------------------- Layout -------------------------------- */
#agentmark-wrapper .container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 2.5rem;
}
#agentmark-wrapper .section { padding: 8rem 0; background: var(--cream); }
/* Anchor targets stop clear of the fixed header (covers deep links too) */
#agentmark-wrapper section[id] { scroll-margin-top: 5.5rem; }
#agentmark-wrapper .problem { padding: 12rem 0 10rem 0; }
/* Section backgrounds per Figma: alternating cream (#F5F5F5) and white */
#agentmark-wrapper .identity,
#agentmark-wrapper .how,
#agentmark-wrapper .pricing { background: var(--white); }

/* --------------------------- Typography ---------------------------- */
#agentmark-wrapper .eyebrow {
    font-size: .9375rem;          /* 15px */
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate-2);
    font-weight: 400;
    margin-bottom: 1.25rem;
}
#agentmark-wrapper .eyebrow.dark { color: var(--ink-2); font-weight: 700; }
#agentmark-wrapper .eyebrow.teal { color: var(--teal); font-weight: 400; }

#agentmark-wrapper .h2 {
    font-size: clamp(2.25rem, 4.2vw, 3.7rem);  /* up to 56px */
    line-height: 120%;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--ink);
    overflow-wrap: break-word;
}
#agentmark-wrapper .h2 .accent { color: var(--teal); }
#agentmark-wrapper .h2 .muted  { color: var(--slate-2); }
#agentmark-wrapper .h2.center,
#agentmark-wrapper .lead.center { text-align: center; }

#agentmark-wrapper .lead {
    font-size: 1.125rem;          /* 18px */
    line-height: 1.62;
    color: var(--slate);
    margin-top: 1.25rem;
    max-width: 42rem;
}

#agentmark-wrapper .section-head { max-width: 50rem; margin-bottom: 3.5rem; }
#agentmark-wrapper .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
#agentmark-wrapper .section-head.center .lead { margin-left: auto; margin-right: auto; }

/* --------------------------- Buttons ------------------------------- */
#agentmark-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    font-size: 1rem;
    font-weight: 600;
    padding: .875rem 1.75rem;
    border-radius: var(--radius-pill);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s;
    white-space: nowrap;
}
#agentmark-wrapper .btn:hover {}
#agentmark-wrapper .btn-sm { padding: .625rem 1.25rem; font-size: .9375rem; }
#agentmark-wrapper .btn.full { width: 100%; }

#agentmark-wrapper .btn-teal {background: var(--teal);color: var(--white);/* box-shadow: 0 8px 20px rgba(8,166,170,.28); */}
#agentmark-wrapper .btn-teal:hover { background: var(--teal-600); }
#agentmark-wrapper .btn-dark { background: var(--ink); color: var(--white); }
#agentmark-wrapper .btn-dark:hover { background: #0a1531; }
#agentmark-wrapper .btn-outline { background: var(--white); border: 1px solid var(--border); color: var(--ink); }
#agentmark-wrapper .btn-outline:hover { background: #fafafa; }
#agentmark-wrapper .btn-play { color: rgba(7,13,39,.6); padding-left: .5rem; }
#agentmark-wrapper .btn-play:hover { color: var(--ink); transform: none; }
#agentmark-wrapper .btn-play .play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
}
#agentmark-wrapper .btn-play .play svg { width: 100%; height: 100%; }

/* =========================== HEADER =============================== */
/* Transparent over the light hero; gains a solid white background once
   the user scrolls (adds .scrolled via main.js). */
#agentmark-wrapper .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    max-width: none;
    padding: 0;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
#agentmark-wrapper .site-header.scrolled {
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom-color: rgba(7,13,39,.06);
    box-shadow: 0 6px 24px rgba(11,28,44,.06);
}
#agentmark-wrapper .header-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 5.5rem;
}
#agentmark-wrapper .brand { display: inline-flex; align-items: center; }
#agentmark-wrapper .brand-logo { height: 32px; width: auto; display: block; }

#agentmark-wrapper .main-nav { display: flex; gap: 2.5rem; }
#agentmark-wrapper .main-nav a { font-size: 1rem; font-weight: 500; color: var(--ink); transition: color .2s; }
#agentmark-wrapper .main-nav a:hover { color: var(--teal); }

#agentmark-wrapper .header-actions { display: flex; align-items: center; gap: 1.5rem; }
#agentmark-wrapper .header-login { font-weight: 500; font-size: 1rem; color: var(--ink); }
#agentmark-wrapper .header-login:hover { color: var(--teal); }
#agentmark-wrapper .btn-claim { background: var(--ink); color: var(--white); font-weight: 500; padding: .6875rem 1.375rem; }
#agentmark-wrapper .btn-claim:hover { background: #0a1531; }

#agentmark-wrapper .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
#agentmark-wrapper .nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
#agentmark-wrapper .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#agentmark-wrapper .nav-toggle.open span:nth-child(2) { opacity: 0; }
#agentmark-wrapper .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#agentmark-wrapper .mobile-nav {
    display: none; flex-direction: column; gap: .25rem;
    padding: 1rem 2.5rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--white);
    width: 100%;
}
#agentmark-wrapper .mobile-nav.open { display: flex; }
#agentmark-wrapper .mobile-nav a { padding: .75rem 0; font-weight: 600; color: var(--ink); }
#agentmark-wrapper .mobile-nav a:hover { color: var(--teal); }
#agentmark-wrapper .mobile-nav .btn { margin-top: .75rem; }

/* ============================ HERO ================================ */
#agentmark-wrapper .hero {
    position: relative;
    padding: 12rem 0 0;
    overflow: hidden;
    background:
        radial-gradient(58% 62% at 88% 6%, rgba(150,224,225,.55) 0%, rgba(150,224,225,0) 60%),
        linear-gradient(180deg, #e7f7f7 0%, #f1fafa 45%, #ffffff 100%);
}
#agentmark-wrapper .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 2rem;
    align-items: center;
    min-height: calc(100dvh - 12rem);
}
#agentmark-wrapper .hero .eyebrow { margin-bottom: 1.5rem; }
#agentmark-wrapper .hero-title {
    font-size: clamp(2.75rem, 5.4vw, 5rem); /* up to 80px */
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
    max-width: 40rem;
    overflow-wrap: break-word;
    white-space: nowrap;
}
#agentmark-wrapper .hero-title .line-2 { color: var(--ink); display: block; }
#agentmark-wrapper .hero-lead {
    margin-top: 1.75rem;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--ink);
    max-width: 603px;
}
/* Hero: claim bar and the "See How It Works" link sit on one row */
#agentmark-wrapper .hero-cta-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .75rem 1.75rem; margin-top: 2.25rem;
}
#agentmark-wrapper .hero .claim-bar.hero-claim {
    margin: 0; flex: 1 1 24rem; max-width: 30rem;
}
/* Status stays on its own line under the form, left aligned */
#agentmark-wrapper .hero .claim-status { max-width: none; }

/* Secondary action — plain play-triangle link, no hover effect */
#agentmark-wrapper .link-help {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 1rem; font-weight: 500; color: var(--ink);
    flex: 0 0 auto; white-space: nowrap;
}
#agentmark-wrapper .link-help .play-ico { width: 18px; height: 18px; flex: 0 0 auto; color: #666; }

#agentmark-wrapper .logo-strip {
    display: flex;
    align-items: center;
    gap: 1.5rem 1.75rem;
    margin-top: 6.5rem;
    margin-bottom: 65px;
    width: 790px;
    justify-content: space-around;
    margin-right: -80px;
}
/* flex:0 0 auto keeps every logo at its natural ratio (no squeezing) */
#agentmark-wrapper .logo-strip li { display: flex; align-items: center; flex: 0 0 auto; }
/* The PNGs are 2x Figma exports, so each is pinned to half its pixel width
   (= its Figma design width). That gives a 2x pixel density on the wire and
   keeps the logos sharp on retina. `--lscale` shrinks the whole strip at the
   smaller breakpoints without touching the individual widths. */
#agentmark-wrapper .logo-strip img {
    height: auto;
    max-width: none;
}

/* Hero visual — hand + phone image, bleeds off the right edge */
#agentmark-wrapper .hero-visual { position: relative; align-self: stretch; }
#agentmark-wrapper .hero-phone {
    position: absolute;
    right: -20%;
    bottom: 0;
    width: 118%;
    max-width: 449px;
    height: auto;
}

/* ========================== PROBLEM =============================== */
#agentmark-wrapper .problem-grid { display: grid; grid-template-columns: 1.1fr 1.05fr; gap: 0; align-items: center; }
#agentmark-wrapper .problem .h2 { max-width: 40rem; line-height: 120%;}
#agentmark-wrapper .problem .lead { max-width: 40rem; }

/* ---------------------------------------------------------------------
   Right column — "borrowed platforms" stage.
   Tags fade in, tumble down with a bounce, then the whole layer
   crossfades into the list of consequences. 100% CSS keyframes; the only
   JS involved is the existing IntersectionObserver adding `.visible`.
   Per-tag drift/rotation/fall are set with custom properties so the
   motion looks organic without needing any measurement at runtime.
   --------------------------------------------------------------------- */
#agentmark-wrapper .am-stage {
    position: relative;
    width: 100%;
    max-width: 556px;
    min-height: 310px;          /* floor, so the tumble always has room */
    margin-left: auto;
    align-self: stretch;        /* match the copy column's height */
    /* centre the tag flow vertically against the copy on the left */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#agentmark-wrapper .am-fall-flow {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    width: 100%;
}
#agentmark-wrapper .am-tag {
    display: inline-flex; align-items: center;
    padding: 13px 22px; border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 500; line-height: 1;
    white-space: nowrap;
    background: var(--white); border: 1px solid #e5e7eb; color: #555;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    /* pre-animation resting state — sits low so it rises into place */
    opacity: 0; transform: translateY(34px);
    will-change: transform, opacity;
}

/* Consequences overlay the same area, vertically centred in the stage */
#agentmark-wrapper .am-cons-layer {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
}
#agentmark-wrapper .am-cons-label {
    font-size: 11px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: #9ca3af;
    margin-bottom: 28px; text-align: center;
}
#agentmark-wrapper .am-cons-list {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
#agentmark-wrapper .am-cons-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px; border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 500; line-height: 1;
    white-space: nowrap;
    background: var(--white); border: 1px solid #e5e7eb; color: #374151;
    opacity: 0; transform: translateY(12px);
}
#agentmark-wrapper .am-cons-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d1d5db; flex: 0 0 auto;
}

/* ---- Looping cycle: each tag rises, holds, falls, fades — one after the
   other, then the whole sequence restarts. ----
   One keyframe track (`amTagCycle`) per tag covers the entire 20s cycle so
   the per-tag `animation-delay` staggers *everything* (rise AND fall) by the
   same offset. That offset survives across iterations, which is what makes
   the boxes drop one after another instead of together. */
#agentmark-wrapper .am-stage.visible .am-tag {
    animation: amTagCycle 20s linear infinite;
}
/* 0.10s apart → the whole strip is on screen in ~1.2s */
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(1)  { animation-delay: 0s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(2)  { animation-delay: .10s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(3)  { animation-delay: .20s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(4)  { animation-delay: .30s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(5)  { animation-delay: .40s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(6)  { animation-delay: .50s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(7)  { animation-delay: .60s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(8)  { animation-delay: .70s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(9)  { animation-delay: .80s; }
#agentmark-wrapper .am-stage.visible .am-tag:nth-child(10) { animation-delay: .90s; }

/* Per-tag drift / spin / fall depth.
   Depths are graded by the row a tag sits in at the design width (4 rows) and
   sized so every row lands on the stage floor — the bottom edge of .am-stage —
   rather than piling up mid-stage. The stage stretches to match the copy column
   (~535px at the design width) and the tag rows start centred around y≈150–310,
   so the drop has to cover 200px (row 4) up to ~365px (row 1). */
/* row 1 — falls the furthest */
#agentmark-wrapper .am-tag:nth-child(1)  { --amx:  -16px; --amr: -12deg; --amf: 362px; }
#agentmark-wrapper .am-tag:nth-child(2)  { --amx:   12px; --amr:   9deg; --amf: 370px; }
#agentmark-wrapper .am-tag:nth-child(3)  { --amx:  -23px; --amr:  16deg; --amf: 358px; }
/* row 2 */
#agentmark-wrapper .am-tag:nth-child(4)  { --amx:   19px; --amr: -14deg; --amf: 308px; }
#agentmark-wrapper .am-tag:nth-child(5)  { --amx:   -9px; --amr:  19deg; --amf: 314px; }
/* row 3 */
#agentmark-wrapper .am-tag:nth-child(6)  { --amx:   25px; --amr:  -8deg; --amf: 254px; }
#agentmark-wrapper .am-tag:nth-child(7)  { --amx:  -20px; --amr:  13deg; --amf: 258px; }
#agentmark-wrapper .am-tag:nth-child(8)  { --amx:   14px; --amr: -18deg; --amf: 250px; }
/* row 4 — shortest drop, it starts closest to the floor */
#agentmark-wrapper .am-tag:nth-child(9)  { --amx:  -11px; --amr:  10deg; --amf: 200px; }
#agentmark-wrapper .am-tag:nth-child(10) { --amx:   21px; --amr: -11deg; --amf: 204px; }

/* Full 20s loop for a single tag: rise → hold → gravity drop with a damped
   bounce → fade out → wait out the rest of the cycle (invisible) → repeat.
   Timeline (20s = 100%):
     0–1.3%       snappy rise from below into the resting row (0.26s)
     1.3–27.5%    hold in place
     27.5–32.75%  fall (1.05s) with per-keyframe easing for real acceleration
     32.75–35.85% rest on the pile
     35.85–37.35% fade out
     40%          silently snap back to the pre-rise state
     40–100%      idle while the consequences layer has the stage */
@keyframes amTagCycle {
    0%   { opacity: 0; transform: translate(0, 34px) rotate(0);
           animation-timing-function: cubic-bezier(.16,.84,.34,1); }
    1.3% { opacity: 1; transform: translate(0, 0) rotate(0); }

    /* hold */
    27.5% { opacity: 1; transform: translate(0, 0) rotate(0);
            animation-timing-function: cubic-bezier(.45,0,1,.5); }  /* accelerate */

    /* --- gravity drop + damped bounce --- */
    29.71% { transform: translate(calc(var(--amx) * .6), var(--amf)) rotate(calc(var(--amr) * .55));
             animation-timing-function: cubic-bezier(0,.5,.4,1); }   /* rebound up */
    30.65% { transform: translate(calc(var(--amx) * .85), calc(var(--amf) - var(--amf) * .2)) rotate(calc(var(--amr) * .85));
             animation-timing-function: cubic-bezier(.45,0,1,.5); }
    31.49% { transform: translate(var(--amx), var(--amf)) rotate(var(--amr));
             animation-timing-function: cubic-bezier(0,.5,.4,1); }
    32.07% { transform: translate(var(--amx), calc(var(--amf) - var(--amf) * .075)) rotate(var(--amr));
             animation-timing-function: cubic-bezier(.45,0,1,.5); }
    32.49% { transform: translate(var(--amx), var(--amf)) rotate(var(--amr));
             animation-timing-function: cubic-bezier(0,.5,.4,1); }
    32.65% { transform: translate(var(--amx), calc(var(--amf) - var(--amf) * .022)) rotate(var(--amr));
             animation-timing-function: cubic-bezier(.45,0,1,.5); }
    32.75% { opacity: 1; transform: translate(var(--amx), var(--amf)) rotate(var(--amr)); }

    /* settle, then clear the stage */
    35.85% { opacity: 1; transform: translate(var(--amx), var(--amf)) rotate(var(--amr)); }
    37.35% { opacity: 0; transform: translate(var(--amx), var(--amf)) rotate(var(--amr)); }
    40%    { opacity: 0; transform: translate(0, 34px) rotate(0); }
    100%   { opacity: 0; transform: translate(0, 34px) rotate(0); }
}

/* ---- Phase 2: consequences take the stage, then bow out before the reset.
   Runs on the same 20s clock (no delay) so it stays locked to the tag loop.
   The last tag finishes fading at ~0.9s + 7.47s ≈ 8.4s, and the layer starts
   fading in at 41% (8.2s) so the two cross over instead of leaving a gap. It
   then holds all the way to 94% (18.8s) — about 10s on screen. */
#agentmark-wrapper .am-stage.visible .am-cons-layer { animation: amConsCycle 20s linear infinite; }
#agentmark-wrapper .am-stage.visible .am-cons-pill  { animation: amPillCycle 20s linear infinite; }
#agentmark-wrapper .am-stage.visible .am-cons-pill:nth-child(1) { animation-delay: 0s; }
#agentmark-wrapper .am-stage.visible .am-cons-pill:nth-child(2) { animation-delay: .08s; }
#agentmark-wrapper .am-stage.visible .am-cons-pill:nth-child(3) { animation-delay: .16s; }
#agentmark-wrapper .am-stage.visible .am-cons-pill:nth-child(4) { animation-delay: .24s; }
#agentmark-wrapper .am-stage.visible .am-cons-pill:nth-child(5) { animation-delay: .32s; }

@keyframes amConsCycle {
    0%, 41%   { opacity: 0; }
    44%, 94%  { opacity: 1; }
    98%, 100% { opacity: 0; }
}
@keyframes amPillCycle {
    0%, 42%   { opacity: 0; transform: translateY(12px); }
    45%, 94%  { opacity: 1; transform: translateY(0); }
    98%, 100% { opacity: 0; transform: translateY(0); }
}

/* ========================== IDENTITY ============================== */
#agentmark-wrapper .identity .section-head { max-width: 46rem; }
#agentmark-wrapper .identity-stage {
    position: relative; display: flex; align-items: center; justify-content: center;
    gap: 2rem; margin-top: 1rem;
}
#agentmark-wrapper .id-col { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; width: 13rem; padding: 10px 0;}
#agentmark-wrapper .id-col.left { margin-bottom: auto; }
#agentmark-wrapper .id-col.right { align-items: flex-end; margin-top: auto; }
#agentmark-wrapper .id-chip {
    background: var(--teal-050); border-radius: 16px;
    padding: 1rem 1.25rem; font-size: 1rem; font-weight: 500; color: var(--ink);
    width: 100%; white-space: nowrap;
}
#agentmark-wrapper .id-phone-wrap { flex: 0 0 auto; position: relative; }
#agentmark-wrapper .id-phone {
    width: 262px; height: auto; display: block;
}

/* ============================ TOOLS =============================== */
#agentmark-wrapper .tools .section-head {  margin-bottom: 2.5rem; }
#agentmark-wrapper .tools-band {
    position: relative; display: flex; justify-content: center;
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
#agentmark-wrapper .tools-band img {
    width: auto;
    max-width: 2048px;
    height: auto;
    display: block;
    margin: -6rem 0 5rem 0;
}
#agentmark-wrapper .card-grid { display: grid; gap: 1.25rem; }
#agentmark-wrapper .card-grid.four { grid-template-columns: repeat(4, 1fr); }
#agentmark-wrapper .tools .card-grid { margin-top: -3rem; position: relative; z-index: 2; }
#agentmark-wrapper .num-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.8125rem;
    min-height: 12.5rem; display: flex; flex-direction: column;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
#agentmark-wrapper .num-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
#agentmark-wrapper .num-card .num { font-size: 1.875rem; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; color: rgba(87,101,116,.35); }
#agentmark-wrapper .num-card h3 { margin-top: auto; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
#agentmark-wrapper .num-card p { margin-top: .625rem; font-size: .9375rem; color: var(--slate); line-height: 1.45; }

/* ========================= HOW IT WORKS =========================== */
#agentmark-wrapper .how .section-head { max-width: none; margin-bottom: 3rem; }
#agentmark-wrapper .how-diagram { text-align: center; margin-bottom: 4.5rem; }
#agentmark-wrapper .how-diagram-img { width: 100%; max-width: 603px; height: auto; margin: 0 auto; display: block; }
#agentmark-wrapper .how-url { text-align: center; margin-top: 1.25rem; font-size: 1rem; font-weight: 700; color: #006D56; }

/* ============================ AMPLIFY (Meet Mark) ================= */
#agentmark-wrapper .amplify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
#agentmark-wrapper .amplify-copy .lead { max-width: 34rem; }
#agentmark-wrapper .mark-list { margin-top: 2rem; display: flex; flex-direction: column; }
#agentmark-wrapper .mark-list li {
    position: relative; padding: 1.1rem 0 1.1rem 1.5rem;
    border-top: 1px solid var(--border);
}
#agentmark-wrapper .mark-list li:last-child { border-bottom: 1px solid var(--border); }
#agentmark-wrapper .mark-list li::before {
    content: ""; position: absolute; left: 0; top: 1.55rem;
    width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}
#agentmark-wrapper .mark-list strong { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; }
#agentmark-wrapper .mark-list span { display: block; color: var(--slate); font-size: .9375rem; margin-top: .15rem; }

/* Chat card (built in HTML/CSS) */
#agentmark-wrapper .chat-card-img {
    max-width: 550px;
    width: 100%; height: auto; display: block;
    border-radius: var(--radius-lg);
    filter: drop-shadow(0 24px 60px rgba(11,28,44,.12));
}
#agentmark-wrapper .chat-card {
    background: var(--white); border: 1px solid var(--border-2);
    border-radius: var(--radius-lg); padding: 1.75rem;
    box-shadow: var(--shadow-lg);
}
#agentmark-wrapper .chat-head { display: flex; align-items: center; gap: .75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
#agentmark-wrapper .chat-head .spark { width: 24px; height: 24px; flex: 0 0 auto; }
#agentmark-wrapper .chat-head b { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
#agentmark-wrapper .chat-head span { display: block; font-size: .8125rem; color: var(--slate); }
#agentmark-wrapper .chat-body { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem 0; min-height: 15rem; }
#agentmark-wrapper .msg { max-width: 78%; font-size: .9375rem; line-height: 1.5; }
#agentmark-wrapper .msg.user { align-self: flex-end; background: var(--teal); color: var(--white); padding: .875rem 1rem; border-radius: 16px; }
#agentmark-wrapper .msg.ai { align-self: flex-start; color: var(--ink); }
#agentmark-wrapper .chat-working { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--slate); }
#agentmark-wrapper .chat-working .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: blink 1.2s infinite; }
@keyframes blink { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
#agentmark-wrapper .chat-input {
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: .5rem .5rem .5rem 1.25rem; margin-top: .5rem;
}
#agentmark-wrapper .chat-input span { flex: 1; color: var(--slate-2); font-size: 1rem; }
#agentmark-wrapper .chat-input .send { background: var(--ink); color: var(--white); font-size: .875rem; font-weight: 600; padding: .5rem 1.1rem; border-radius: var(--radius-pill); }

/* ============================ PRICING ============================= */
#agentmark-wrapper .pricing .section-head { max-width: none; }
#agentmark-wrapper .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
#agentmark-wrapper .price-card {
    position: relative; background: var(--white); border: 1px solid var(--border);
    border-radius: 22px; padding: 2rem;
    box-shadow: var(--shadow-sm);
}
#agentmark-wrapper .price-card.featured {
    border: 1.5px solid var(--teal);
    background: linear-gradient(180deg, rgba(8,166,170,.10) 0%, #fff 32%);
    box-shadow: var(--shadow-md);
}
#agentmark-wrapper .popular {
    position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
    background: var(--teal); color: #fff; font-size: .6875rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .4rem .85rem; border-radius: 999px; white-space: nowrap;
}
#agentmark-wrapper .price-card h3 { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
#agentmark-wrapper .tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 500; padding: .25rem .6rem; border-radius: 999px; }
#agentmark-wrapper .tag-muted { background: #eef1f4; color: #5b646f; }
#agentmark-wrapper .tag-premium { background: #d7f3f1; color: #0c8f86; }
#agentmark-wrapper .tag-premium img { width: 13px; height: 13px; }
#agentmark-wrapper .price-sub { margin-top: .625rem; color: var(--slate); font-size: .9375rem; }
#agentmark-wrapper .price { margin-top: 1.25rem; display: flex; align-items: baseline; gap: .3rem; }
#agentmark-wrapper .price .amount { font-size: 3rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
#agentmark-wrapper .price .per { font-size: .9375rem; color: var(--slate); }
#agentmark-wrapper .price-card .btn { margin-top: 1.5rem; border-radius: 12px; }
#agentmark-wrapper .divider { border: none; border-top: 1px solid var(--border); margin: 1.75rem 0; }
#agentmark-wrapper .plus-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: 1.1rem; }
#agentmark-wrapper .feature-list { display: flex; flex-direction: column; gap: .85rem; }
#agentmark-wrapper .feature-list li { position: relative; padding-left: 1.85rem; font-size: .9375rem; color: rgba(9,25,42,.9); line-height: 1.45; }
#agentmark-wrapper .feature-list li .chk { position: absolute; left: 0; top: 3px; width: 1rem; height: 1rem; }

/* ============================== CTA =============================== */
#agentmark-wrapper .cta { background: var(--white); text-align: center; }
#agentmark-wrapper .cta-inner { max-width: 56rem; margin: 0 auto; }
#agentmark-wrapper .cta .h2 { font-size: clamp(2.25rem, 4.8vw, 3.5rem); }
#agentmark-wrapper .cta .lead { margin-left: auto; margin-right: auto; }
#agentmark-wrapper .claim-bar {
    display: flex; align-items: center; gap: .5rem;
    background: var(--teal); border-radius: var(--radius-pill);
    padding: 16px 20px;
    max-width: 36rem; margin: 3rem auto 0;
}
#agentmark-wrapper .claim-bar .seal { width: 24px; height: 24px; flex: 0 0 auto; opacity: 0.8; }
#agentmark-wrapper .claim-prefix { color: rgba(255,255,255,.75); font-size: 1.125rem; font-weight: 500; white-space: nowrap; }
#agentmark-wrapper .claim-bar input {
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    color: var(--white); font-size: 1.125rem; font-weight: 600; padding: .55rem .1rem;
}
#agentmark-wrapper .claim-bar input::placeholder { color: var(--white); opacity: .9; font-weight: 600; }
#agentmark-wrapper .claim-bar .btn-claim-cta { background: var(--white); color: var(--teal); font-weight: 600; padding: 8px 20px; border-radius: var(--radius-pill); font-size: 1rem; }
#agentmark-wrapper .claim-bar .btn-claim-cta:hover { background: #f0fbfb; }
#agentmark-wrapper .cta-note { margin-top: 1.5rem; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); font-weight: 600; }
#agentmark-wrapper .btn[disabled] { opacity: .65; cursor: not-allowed; transform: none; }

/* Claim form validation states */
#agentmark-wrapper .claim-bar.is-invalid { box-shadow: 0 0 0 2px #e74c3c; }
#agentmark-wrapper .claim-bar.is-warn    { box-shadow: 0 0 0 2px #f39c12; }
#agentmark-wrapper .claim-bar.is-valid   { box-shadow: 0 0 0 2px #0fa68e; }
/* Status message — the line is always reserved so nothing shifts when a
   message appears; only its visibility toggles. */
#agentmark-wrapper .claim-status {
    display: flex; align-items: center; gap: .45rem;
    max-width: 36rem; margin: .625rem 0 0;
    min-height: 22px;                 /* reserves exactly one message line */
    font-size: .875rem; line-height: 1.4;
    visibility: hidden;
}
#agentmark-wrapper .claim-status.is-show { visibility: visible; animation: statusIn .25s var(--ease); }
/* CTA keeps its centred alignment now that the status is block-level */
#agentmark-wrapper .cta .claim-status { margin-left: auto; margin-right: auto; justify-content: center; }
#agentmark-wrapper .claim-status.is-invalid { color: #e74c3c; }
#agentmark-wrapper .claim-status.is-warn    { color: #d35400; }
#agentmark-wrapper .claim-status.is-valid   { color: #0fa68e; }
/* Small inline success tick that sits on the same line as the message */
#agentmark-wrapper .claim-status .status-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
    background: #0fa68e; animation: statusPop .35s var(--ease);
}
#agentmark-wrapper .claim-status .status-ico svg {
    width: 11px; height: 11px; stroke: var(--white); stroke-width: 3.5;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
@keyframes statusIn  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes statusPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }


/* =====================================================================
   SCROLL-BASED VIEWPORT ANIMATIONS (entry effect)
   Elements start hidden; JS Intersection Observer adds `.visible`.
   ===================================================================== */
#agentmark-wrapper .animate { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
#agentmark-wrapper .animate[data-anim="fade-up"]    { transform: translateY(40px); }
#agentmark-wrapper .animate[data-anim="fade-left"]  { transform: translateX(48px); }
#agentmark-wrapper .animate[data-anim="fade-right"] { transform: translateX(-48px); }
#agentmark-wrapper .animate[data-anim="zoom-in"]    { transform: scale(.94); }
#agentmark-wrapper .animate.visible { opacity: 1; transform: none; }
#agentmark-wrapper .animate[data-delay="1"] { transition-delay: .1s; }
#agentmark-wrapper .animate[data-delay="2"] { transition-delay: .2s; }
#agentmark-wrapper .animate[data-delay="3"] { transition-delay: .3s; }

/* Staggered chip reveal (identity + how) */
#agentmark-wrapper .stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
#agentmark-wrapper .stagger.visible > * { opacity: 1; transform: none; }
#agentmark-wrapper .stagger.visible > *:nth-child(1) { transition-delay: .05s; }
#agentmark-wrapper .stagger.visible > *:nth-child(2) { transition-delay: .12s; }
#agentmark-wrapper .stagger.visible > *:nth-child(3) { transition-delay: .19s; }
#agentmark-wrapper .stagger.visible > *:nth-child(4) { transition-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
    #agentmark-wrapper .animate,
    #agentmark-wrapper .stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
    #agentmark-wrapper .chat-working .dot { animation: none; }
    /* Problem stage: skip the tumble, show the end state (consequences) */
    #agentmark-wrapper .am-stage *,
    #agentmark-wrapper .am-stage.visible * { animation: none !important; }
    #agentmark-wrapper .am-stage { min-height: 0; }
    #agentmark-wrapper .am-fall-flow { display: none; }
    #agentmark-wrapper .am-cons-layer { position: static; opacity: 1; pointer-events: auto; }
    #agentmark-wrapper .am-cons-pill { opacity: 1; transform: none; }
}


/* =====================================================================
   RESPONSIVE — Tablet (<=1024px)
   ===================================================================== */
@media (max-width: 1024px) {
    #agentmark-wrapper .section { padding: 5.5rem 0; }
    #agentmark-wrapper .container { padding: 0 2rem; }
    #agentmark-wrapper .hero { padding-top: 7.5rem; }
    #agentmark-wrapper .hero-grid,
    #agentmark-wrapper .problem-grid,
    #agentmark-wrapper .amplify-grid { grid-template-columns: 1fr; gap: 3rem; }
    /* the viewport-height floor only makes sense for the 2-column hero */
    #agentmark-wrapper .hero-grid { min-height: 0; }
    #agentmark-wrapper .hero-visual { order: 2; height: auto; }
    #agentmark-wrapper .hero-phone { position: relative; right: auto; top: auto; bottom: auto; transform: none; width: 66%; max-width: 360px; margin: 0 auto; }

    /* logo strip: drop the fixed 790px track and the desktop bleed.
       flex-wrap is essential — without it the row's min-content (all seven
       logos + gaps, ~458px) forces the whole hero column wider than the
       viewport and the copy gets clipped. */
    #agentmark-wrapper .logo-strip {
        width: 100%; max-width: 790px; margin-right: 0;
        margin-top: 3.5rem; margin-bottom: 2.5rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #agentmark-wrapper .card-grid.four { grid-template-columns: repeat(2, 1fr); }
    #agentmark-wrapper .tools .card-grid { margin-top: 1.5rem; }
    /* the tablet image is ~2000px wide — contain it instead of letting it bleed */
    #agentmark-wrapper .tools-band img { width: 100%; max-width: 100%; margin: -2rem 0 3rem; }

    #agentmark-wrapper .am-stage { max-width: none; margin-left: 0; }
    #agentmark-wrapper .amplify-copy .lead,
    #agentmark-wrapper .chat-card-img { max-width: none; }
}

/* =====================================================================
   RESPONSIVE — Collapse the header nav (<=900px)
   The logo + 4 nav links + Login + Claim button stop fitting comfortably
   before the 768px breakpoint, so the drawer takes over here.
   ===================================================================== */
@media (max-width: 900px) {
    #agentmark-wrapper .main-nav,
    #agentmark-wrapper .header-actions { display: none; }
    #agentmark-wrapper .nav-toggle { display: flex; }
    /* let the headline wrap once there isn't room for a single line */
    #agentmark-wrapper .hero-title { white-space: normal; }
}

/* =====================================================================
   RESPONSIVE — Mobile (<=768px)
   ===================================================================== */
@media (max-width: 768px) {
    #agentmark-wrapper .header-inner { height: 4.5rem; }

    #agentmark-wrapper .section { padding: 4rem 0; }
    #agentmark-wrapper section[id] { scroll-margin-top: 4.5rem; }
    #agentmark-wrapper .container { padding: 0 1.25rem; }

    /* headline: the desktop clamp floor (44px) is too big for phones */
    #agentmark-wrapper .hero-title { font-size: clamp(2rem, 8.4vw, 2.75rem); }
    #agentmark-wrapper .h2 { font-size: clamp(1.875rem, 6.4vw, 2.25rem); }
    #agentmark-wrapper .hero { padding-top: 6rem; }
    #agentmark-wrapper .hero-lead { font-size: 1.125rem; }
    #agentmark-wrapper .hero-phone { width: 78%; max-width: 300px; }
    #agentmark-wrapper .hero-cta-row { gap: 1.25rem; margin-top: 1.75rem; }
    #agentmark-wrapper .hero .claim-bar.hero-claim { flex: 1 1 100%; max-width: none; }
    #agentmark-wrapper .hero .claim-bar.hero-claim .btn-claim-cta { width: 100%; }
    #agentmark-wrapper .logo-strip { gap: 1.25rem 1.5rem; margin-top: 2.5rem; margin-bottom: 40px; }
    /* scale the whole set down together so the relative sizing stays as designed */
    #agentmark-wrapper .logo-strip img { --lscale: .82; }

    /* Problem stage — smaller pills and a shorter tumble on phones */
    #agentmark-wrapper .am-stage { min-height: 260px; }
    #agentmark-wrapper .am-fall-flow { gap: 8px; }
    #agentmark-wrapper .am-tag { font-size: 13px; padding: 10px 16px; }
    #agentmark-wrapper .am-cons-pill { font-size: 13px; padding: 11px 18px; }
    #agentmark-wrapper .am-cons-label { margin-bottom: 20px; }
    #agentmark-wrapper .am-tag:nth-child(n) { --amf: 130px; }


    /* Identity: stack chips above/below the phone */
    #agentmark-wrapper .identity-stage { flex-direction: column; gap: 1.5rem; }
    #agentmark-wrapper .id-col { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; padding: 0; }
    #agentmark-wrapper .id-col.left { margin-bottom: 0; }
    #agentmark-wrapper .id-col.right { align-items: center; margin-top: 0; }
    #agentmark-wrapper .id-chip { width: auto; font-size: .9375rem; padding: .8rem 1rem; white-space: normal; }
    #agentmark-wrapper .id-phone { width: 100%; max-width: 230px; }

    /* Tools: pull the band in tighter now that it's contained */
    #agentmark-wrapper .tools-band img { margin: -1rem 0 2rem; }

    /* How-it-works: tighter spacing */
    #agentmark-wrapper .how-diagram { margin-bottom: 3rem; }

    #agentmark-wrapper .price-grid,
    #agentmark-wrapper .card-grid.four { grid-template-columns: 1fr; }
    #agentmark-wrapper .price-grid { gap: 2.75rem; }
    #agentmark-wrapper .price-card { padding: 1.5rem; }
    #agentmark-wrapper .price .amount { font-size: 2.5rem; }
    #agentmark-wrapper .price-card h3 { font-size: 1.25rem; }

    #agentmark-wrapper .chat-card { padding: 1.25rem; }
    #agentmark-wrapper .msg { max-width: 88%; }

    #agentmark-wrapper .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; padding: 1rem 1.25rem 2.5rem; }
    #agentmark-wrapper .footer-links { align-items: flex-start; }
    #agentmark-wrapper .footer-wordmark { padding: 2.5rem 1.25rem 0; }

    #agentmark-wrapper .claim-bar { flex-wrap: wrap; border-radius: var(--radius-lg); padding: 1rem; }
    #agentmark-wrapper .claim-bar .btn-claim-cta { width: 100%; }

    /* drawer padding should match the mobile container gutter */
    #agentmark-wrapper .mobile-nav { padding: 1rem 1.25rem 1.5rem; }
}

/* =====================================================================
   RESPONSIVE — Small phones (<=480px)
   ===================================================================== */
@media (max-width: 480px) {
    #agentmark-wrapper .section { padding: 3rem 0; }
    #agentmark-wrapper .container { padding: 0 1rem; }

    #agentmark-wrapper .hero-title { font-size: clamp(1.75rem, 9vw, 2.25rem); }
    #agentmark-wrapper .h2 { font-size: clamp(1.625rem, 7.4vw, 2rem); }
    #agentmark-wrapper .hero-lead { font-size: 1rem; }
    #agentmark-wrapper .lead { font-size: 1rem; }
    #agentmark-wrapper .hero-phone { width: 86%; max-width: 260px; }

    /* claim bar: keep the prefix + input on one comfortable line */
    #agentmark-wrapper .claim-prefix,
    #agentmark-wrapper .claim-bar input { font-size: 1rem; }
    #agentmark-wrapper .claim-bar { padding: .875rem; }

    #agentmark-wrapper .logo-strip { gap: 1rem 1.1rem; margin-top: 2rem; margin-bottom: 1.75rem; }
    #agentmark-wrapper .logo-strip img { --lscale: .66; }

    #agentmark-wrapper .am-tag { font-size: 12px; padding: 8px 13px; }
    #agentmark-wrapper .am-cons-pill { font-size: 12px; padding: 10px 14px; }
    #agentmark-wrapper .am-cons-label { font-size: 10px; letter-spacing: .12em; }

    #agentmark-wrapper .id-chip { font-size: .875rem; padding: .7rem .9rem; }
    #agentmark-wrapper .num-card { padding: 1.5rem; min-height: 0; }
    #agentmark-wrapper .price-card { padding: 1.25rem; }
    #agentmark-wrapper .link-help { font-size: .9375rem; }

    #agentmark-wrapper .footer-wordmark { padding: 2rem 1rem 0; }
    #agentmark-wrapper .footer-grid { padding: 1rem 1rem 2rem; }
    #agentmark-wrapper .social-list a { width: 2.5rem; height: 2.5rem; }

}/* End custom CSS */