/* KIMCORPgroup Lead Capture — front-end styles (full-document template)
   Brand: Navy #001a4d, Gold #c9a961, Cream #faf5e5
   Luxe aesthetic (black, dusty rose, brass/gold) */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=Allura&display=swap');

:root {
    --kml-navy:        #001a4d;
    --kml-navy-deep:   #00102e;
    --kml-navy-soft:   #102659;
    --kml-gold:        #c9a961;
    --kml-gold-deep:   #a88641;
    --kml-gold-soft:   #e3cf95;
    --kml-cream:       #faf5e5;
    --kml-cream-deep:  #f3ecd5;
    --kml-ink:         #0a1432;
    --kml-rose:        #b97f7a;
    --kml-white:       #fdf8e8;
    --kml-muted:       #5b6275;
    /* Royal purple from the KCG monogram, used for numbered field markers */
    --kml-purple:      #5d2d8c;
    --kml-purple-deep: #3f1f63;

    --kml-display:     'Cinzel', 'Cormorant Garamond', Georgia, serif;
    --kml-serif:       'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --kml-tagline:     'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --kml-script:      'Allura', 'Great Vibes', cursive;
    --kml-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- RESET / BODY ----------
   SCOPED: only applies to body when it has the .kml-body class. This
   means our dedicated landing-page templates render on a clean white
   surface, BUT pages that merely embed our shortcodes (e.g. a homepage
   with [kml_abc123_card]) keep the host theme's background intact. */
body.kml-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    font-family: var(--kml-sans);
    color: var(--kml-ink);
    -webkit-font-smoothing: antialiased;
}
body.kml-body html { background: #ffffff !important; }
.kml-landing {
    background: #ffffff;
}
.kml-landing,
.kml-landing * {
    box-sizing: border-box;
}
.kml-landing img {
    max-width: 100%;
    height: auto;
    display: block;
}
.kml-landing a {
    color: var(--kml-gold);
}
.kml-landing > * { width: 100%; }

/* ===================================================================
   HERO BAND 1 — WHITE PANEL with branded logo card
   The white card itself is capped narrower than the viewport so the
   header doesn't feel oversized on big screens. Outside the card the
   page background shows through.
   =================================================================== */
.kml-hero-card {
    background: #ffffff;
    padding: 18px 24px 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 940px;
    margin: 0 auto;
}
.kml-landing img.kml-logo-card,
img.kml-logo-card {
    width: 100%;
    max-width: 880px;
    max-height: 240px;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}
/* ===================================================================
   GOLD FLOURISH — Victorian scrollwork divider (SVG)
   .kml-flourish wrapper sets color (currentColor in the SVG paths)
   and the rotation/orientation. Reused at:
     - bottom of hero-card (gold on white)
     - top of hero-strip (gold on navy)
     - bottom of hero-strip (gold on navy, lighter)
   =================================================================== */
.kml-flourish {
    width: 100%;
    max-width: 720px;
    margin: 14px auto 0;
    line-height: 0;
    color: var(--kml-gold);
}
.kml-flourish-svg {
    display: block;
    width: 100%;
    height: auto;
}
/* Mirror vertically: scrolls hanging upward */
.kml-flourish-up .kml-flourish-svg {
    transform: scaleY(-1);
}
/* Lighter variant for the second navy-strip flourish */
.kml-flourish-light {
    color: var(--kml-gold-soft);
    opacity: 0.85;
}

/* ===================================================================
   HERO BAND 2 — NAVY STRIP with main headline
   =================================================================== */
/* The navy strip is now SVG-shaped: the <svg.kml-hero-bg> fills the
   container and provides the navy banner shape + gold curved trim.
   Higher z-index ensures the banner sits ABOVE the two-col below
   (form-col's box-shadow would otherwise paint over the curves). */
.kml-hero-strip {
    position: relative;
    background: transparent;
    color: var(--kml-white);
    text-align: center;
    padding: 48px 24px 56px;
    overflow: visible;
    z-index: 2;
}
.kml-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    overflow: visible;
}
.kml-hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}
.kml-hero-title {
    font-family: var(--kml-serif);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
    color: var(--kml-white);
}
.kml-hero-sub {
    font-size: clamp(14px, 1.4vw, 16px);
    color: var(--kml-cream-deep);
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.5;
}

/* ===================================================================
   TWO-COLUMN: sidebar (left) + form (right)
   The container itself has NO background color — only the inner
   form-col carries the card visual via box-shadow.
   =================================================================== */
.kml-two-col {
    background: transparent;
    padding: 40px 24px;
    display: flex;
    justify-content: center;
}
.kml-two-col-inner {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0, 26, 77, 0.18);
    overflow: hidden;
}
@media (min-width: 900px) {
    .kml-two-col-inner {
        grid-template-columns: 300px 1fr;
    }
}
/* Under 900px the sidebar is hidden — the form takes the full width
   so the page stays compact on phones and tablets. */
@media (max-width: 899px) {
    .kml-sidebar { display: none; }
}

/* ----- SIDEBAR -----
   The cropped sidebar image (text + photo + seal, lifted directly from
   the prototype) IS the sidebar. HTML text content is hidden so we get a
   pixel-perfect match with the design. */
.kml-sidebar {
    position: relative;
    background-color: var(--kml-navy);
    background-image: url('../img/sidebar-bg.jpg');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: var(--kml-white);
    padding: 0;
    border-radius: 14px 0 0 14px;
    overflow: hidden;
    min-height: 600px;
}
/* The HTML text/seal overlay is no longer needed — everything is in the
   image. Keep the markup in case we ever revert to a hybrid approach. */
.kml-sidebar-inner {
    display: none;
}
@media (max-width: 899px) {
    .kml-sidebar { border-radius: 14px 14px 0 0; }
}
.kml-script-block {
    margin: 0 0 24px;
    line-height: 1;
    text-align: left;
}
.kml-script-line1 {
    display: block;
    font-family: var(--kml-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    color: var(--kml-gold-soft);
    margin-bottom: 2px;
}
.kml-script-line2 {
    display: block;
    font-family: var(--kml-script);
    font-size: 46px;
    color: var(--kml-gold);
    line-height: 0.9;
    margin-left: 16px;
}
.kml-pillars {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}
.kml-pillars li {
    color: var(--kml-cream-deep);
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.kml-tagline-soft {
    font-style: italic;
    font-family: var(--kml-serif);
    font-size: 16px;
    color: var(--kml-cream-deep);
    margin: 0 0 28px;
    line-height: 1.45;
}
/* House photo + gold seal now live in the sidebar background image,
   so the placeholder element is no longer rendered. */
.kml-sidebar-art {
    display: none;
}

/* ----- FORM COLUMN -----
   Zero padding on form-col so it sits flush against the sidebar — no
   visible white gap. All breathing-room padding moves into form-wrap. */
.kml-form-col {
    background: transparent;
    padding: 0;
    border-radius: 0 14px 14px 0;
}
@media (max-width: 899px) {
    .kml-form-col {
        border-radius: 0 0 14px 14px;
    }
}
.kml-form-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 32px;
    box-sizing: border-box;
    width: 100%;
}
.kml-form-header {
    text-align: center;
    margin-bottom: 28px;
}
.kml-form-title {
    font-family: var(--kml-serif);
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 500;
    color: var(--kml-navy);
    margin: 0 0 8px;
    letter-spacing: 0.005em;
}
.kml-form-divider {
    display: block;
    width: 100%;
    max-width: 240px;
    height: 16px;
    margin: 6px auto 0;
}

/* ----- FIELD GRID ----- */
.kml-form { display: block; }
.kml-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}
@media (min-width: 720px) {
    .kml-row-2 { grid-template-columns: 1fr 1fr; }
    .kml-row-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.kml-field { margin-bottom: 16px; }
.kml-field-full { margin-bottom: 16px; }
/* Inside multi-column rows, fields become flex columns so the input
   itself is pushed to the BOTTOM (margin-top: auto). This keeps the
   inputs aligned across a row even when one label wraps to 2 lines. */
.kml-row .kml-field {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
.kml-row .kml-field > input,
.kml-row .kml-field > select,
.kml-row .kml-field > textarea {
    margin-top: auto;
}

.kml-field label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--kml-navy);
    margin-bottom: 6px;
    line-height: 1.35;
}
.kml-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 30% 30%, #7d4cb8 0%, var(--kml-purple) 55%, var(--kml-purple-deep) 100%);
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(63, 31, 99, 0.35);
}
.kml-req {
    color: #c0392b;
    margin-left: 2px;
}

.kml-form input[type="text"],
.kml-form input[type="email"],
.kml-form input[type="tel"],
.kml-form select,
.kml-form textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--kml-ink);
    background: #ffffff;
    border: 1.5px solid #d8c98d;
    border-radius: 6px;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
}
.kml-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23001a4d' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    padding-right: 32px;
}
.kml-form input:focus,
.kml-form select:focus,
.kml-form textarea:focus {
    outline: none;
    border-color: var(--kml-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.2);
}
.kml-form .kml-details {
    margin-top: 10px;
    min-height: 56px;
    resize: vertical;
}

/* ----- PILL BUTTONS (concerns) -----
   4-column grid with UNIFORM row heights. Every pill takes the same
   cell size regardless of text length; the row height is forced
   uniform via grid-auto-rows so all pills look the same height
   whether the label is one line or two. */
.kml-pills {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 60px;
    gap: 12px;
    margin-bottom: 4px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .kml-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
    .kml-pills { grid-template-columns: 1fr; }
}
.kml-pill {
    display: flex;
    align-items: stretch;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
/* "Understanding the Process" — the bulb icon entry — spans 2 columns
   so its longer label can wrap to two lines without shrinking the others. */
.kml-pill[data-icon="bulb"] {
    grid-column: span 2;
}
@media (max-width: 720px) {
    .kml-pill[data-icon="bulb"] { grid-column: span 2; }
}
@media (max-width: 400px) {
    .kml-pill[data-icon="bulb"] { grid-column: span 1; }
}
.kml-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
/* Rounded-rectangle card style — NOT a pill.
   Border is a very subtle lavender-gray, text is dark navy,
   and the icon sits directly on the white background (no inner circle).
   Fills the parent grid cell completely so all pills share the same height. */
.kml-pill-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 8px 16px;
    border: 1.5px solid #e6e3ed;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kml-ink);
    background: #ffffff;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    line-height: 1.2;
    box-sizing: border-box;
}
.kml-pill:hover .kml-pill-inner {
    border-color: var(--kml-purple);
    box-shadow: 0 2px 8px rgba(93, 45, 140, 0.12);
}
.kml-pill input:checked + .kml-pill-inner {
    border-color: var(--kml-purple);
    background: #f5edff;
    box-shadow: 0 2px 10px rgba(93, 45, 140, 0.20);
}
.kml-pill input:focus-visible + .kml-pill-inner {
    box-shadow: 0 0 0 3px rgba(93, 45, 140, 0.25);
}
/* Icon: just the SVG on white, no surrounding circle. Always in purple. */
.kml-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.kml-pill-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    color: var(--kml-purple);
}
.kml-pill-text {
    white-space: normal;
    text-align: left;
}

/* honeypot — invisible to humans */
.kml-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===================================================================
   CTA PANEL — house-key icon on the LEFT, everything else centered.
   Tagline (gold serif italic) + quote + button stack vertically and
   are centered to the full panel width; the icon sits absolutely on
   the left and overlaps the left margin so the text feels symmetric.
   =================================================================== */
.kml-cta-panel {
    position: relative;
    background: linear-gradient(135deg, var(--kml-navy) 0%, var(--kml-navy-deep) 100%);
    border-radius: 14px;
    padding: 28px 32px 28px 170px;
    margin: 28px 0 4px;
    color: var(--kml-cream-deep);
    box-shadow: 0 4px 18px rgba(0, 26, 77, 0.18);
    text-align: center;
    min-height: 220px;
}
@media (max-width: 600px) {
    .kml-cta-panel {
        padding: 110px 18px 24px;
    }
}
.kml-key-icon {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: auto;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .kml-key-icon {
        left: 50%;
        top: 14px;
        transform: translateX(-50%);
        width: 78px;
    }
}
.kml-cta-tagline {
    margin: 0 0 10px;
    color: var(--kml-gold);
    font-family: var(--kml-tagline);
    font-style: normal;
    font-size: clamp(19px, 2.1vw, 24px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.005em;
    text-align: center;
}
.kml-cta-tagline .kml-tm {
    font-size: 0.42em;
    font-style: normal;
    font-family: var(--kml-sans);
    font-weight: 700;
    vertical-align: 0.9em;
    margin-left: 1px;
    letter-spacing: 0.04em;
}
.kml-cta-quote,
.kml-cta-subquote {
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-family: var(--kml-serif);
    font-size: clamp(15px, 1.5vw, 17px);
    font-weight: 400;
    line-height: 1.4;
}
.kml-cta-subquote {
    margin-bottom: 18px;
}
.kml-submit {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--kml-gold) 0%, var(--kml-gold-deep) 100%);
    color: #ffffff;
    font-family: var(--kml-display);
    font-size: clamp(15px, 1.5vw, 17px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 16px 28px;
    border: 1px solid #8e7232;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, filter .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 1px 2px rgba(0, 26, 77, 0.35);
}
.kml-submit-arrow {
    width: 18px;
    height: 18px;
    color: #ffffff;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 26, 77, 0.35));
}
.kml-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(201, 169, 97, 0.35);
}
.kml-submit:disabled {
    filter: grayscale(.4);
    cursor: wait;
    transform: none;
}

/* ===================================================================
   TRUST LINE — gold padlock + text flanked by line/arrow/sparkle SVGs
   =================================================================== */
.kml-trust-line {
    background: transparent;
    color: var(--kml-ink);
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    padding: 18px 24px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.kml-trust-deco {
    flex: 1 1 0;
    min-width: 80px;
    max-width: 240px;
    height: 14px;
    color: var(--kml-gold);
}
.kml-trust-deco-left  { justify-self: end; }
.kml-trust-deco-right { justify-self: start; }
.kml-trust-lock {
    width: 22px;
    height: auto;
    flex-shrink: 0;
}
.kml-trust-text {
    color: var(--kml-ink);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .kml-trust-line { padding: 14px 16px 20px; gap: 6px; }
    .kml-trust-deco { min-width: 30px; height: 10px; }
    .kml-trust-lock { width: 18px; }
    .kml-trust-text { white-space: normal; text-align: center; font-size: 12px; }
}
/* Under 425px the gold deco lines force horizontal scroll, so drop them */
@media (max-width: 425px) {
    .kml-trust-deco { display: none; }
}

.kml-feedback {
    margin-top: 12px;
    padding: 0;
    text-align: center;
    font-size: 14px;
    border-radius: 6px;
}
.kml-feedback.is-success {
    background: #e8f5ec; color: #1c5b34;
    padding: 12px; border: 1px solid #b9dec4;
}
.kml-feedback.is-error {
    background: #fcebea; color: #8a1b14;
    padding: 12px; border: 1px solid #f1c1bd;
}

/* ===================================================================
   FOOTER — 3-column horizontal
   =================================================================== */
.kml-footer {
    background: var(--kml-navy-deep);
    color: var(--kml-cream-deep);
    padding: 40px 24px;
}
.kml-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
}
@media (min-width: 780px) {
    .kml-footer-grid {
        grid-template-columns: 1fr 1.2fr 1fr;
        text-align: left;
    }
}
.kml-landing img.kml-footer-logo,
img.kml-footer-logo {
    width: auto;
    max-width: min(220px, 80%);
    height: auto;
    margin: 0 auto;
    display: block;
}
.kml-footer-meta-col {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Inner list shrinks to fit its widest child; the list itself is centered
   in the column, but inside each item icons line up at the same left edge. */
.kml-footer-meta-list {
    display: inline-block;
    text-align: left;
}
.kml-footer-meta-item {
    margin: 4px 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.kml-footer-meta-item a {
    color: #ffffff;
    text-decoration: none;
}
.kml-footer-meta-item a:hover {
    text-decoration: underline;
    color: var(--kml-gold);
}
.kml-footer-icon {
    width: 18px;
    height: 18px;
    color: var(--kml-gold);
    flex-shrink: 0;
}
/* Vertical gold dividers between footer columns (desktop only) */
@media (min-width: 780px) {
    .kml-footer-meta-col,
    .kml-footer-tagline-col {
        position: relative;
    }
    .kml-footer-meta-col::before,
    .kml-footer-tagline-col::before {
        content: '';
        position: absolute;
        left: -14px;
        top: 10%;
        bottom: 10%;
        width: 1px;
        background: linear-gradient(180deg, transparent 0%, var(--kml-gold) 25%, var(--kml-gold) 75%, transparent 100%);
        opacity: 0.7;
    }
}
.kml-footer-tagline-col {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.kml-footer-tagline {
    font-family: var(--kml-script);
    color: var(--kml-gold);
    font-size: 36px;
    margin: 0 0 8px;
    line-height: 1;
}
.kml-footer-mission {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--kml-cream-deep);
    margin: 0;
    line-height: 1.6;
}

/* ===================================================================
   RESPONSIVE TWEAKS
   =================================================================== */
@media (max-width: 600px) {
    .kml-hero-card { padding: 24px 16px 18px; }
    .kml-logo-card { max-width: 360px; }
    .kml-hero-strip { padding: 24px 18px 32px; }
    .kml-two-col {
        padding: 20px 14px;
        background: transparent;
    }
    .kml-sidebar { padding: 28px 22px; }
    .kml-form-wrap { padding: 28px 18px; }
    .kml-form-title { font-size: 22px; }
    .kml-footer { padding: 28px 18px; }
    .kml-footer-tagline { font-size: 30px; }
}

/* ===================================================================
   ===================================================================
   ROUND 2 — REALTOR PARTNER PROGRAM PAGE
   Class prefix: .kml-rp-*  (everything below is scoped to the new page
   and shares only the brand color/font variables with round 1.)
   ===================================================================
   =================================================================== */

.kml-rp-body {
    background: #ffffff;
}
.kml-rp-landing,
.kml-rp-landing * {
    box-sizing: border-box;
}
.kml-rp-landing img {
    max-width: 100%;
    height: auto;
    display: block;
}
.kml-rp-landing > * { width: 100%; }

/* Shared section heading style. The ::after rule adds a small gold
   accent line below every section heading — a luxe-design polish detail
   that ties the page's typographic rhythm together. */
.kml-rp-h2 {
    font-family: var(--kml-display);
    font-weight: 600;
    color: var(--kml-navy);
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0 0 18px;
    padding-bottom: 14px;
    position: relative;
}
.kml-rp-h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--kml-gold);
    border-radius: 1px;
}
.kml-rp-h2--left {
    text-align: left;
}
.kml-rp-h2--left::after {
    left: 0;
    transform: none;
}
.kml-rp-h2 .kml-rp-brand {
    color: var(--kml-gold-deep);
    font-style: italic;
}
.kml-rp-eyebrow-sub {
    font-family: var(--kml-serif);
    font-style: italic;
    color: var(--kml-gold-deep);
    font-size: clamp(15px, 1.6vw, 19px);
    text-align: center;
    margin: 0 0 32px;
    letter-spacing: 0.04em;
}

/* ---------- 1. HERO BANNER ---------- */
.kml-rp-hero {
    background: #ffffff;
    padding: 0;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}
.kml-rp-hero-img {
    width: 100%;
    display: block;
}
/* Live QR overlaid exactly on top of the banner's decorative fake-QR area.
   Coords were measured against the banner's intrinsic 1774x887 pixels,
   so the percentages here scale cleanly with the banner image. */
.kml-rp-banner-qr {
    position: absolute;
    left: 6.9%;
    top: 68.2%;
    width: 9.02%;
    height: 18.04%;
    display: block;
    /* Slight inward shrink so the live QR sits inside the fake QR's own
       gold frame instead of bleeding over it. Adjust if scanner needs more
       quiet zone. */
    padding: 0.4%;
    background: #ffffff;
    border-radius: 4px;
    z-index: 2;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kml-rp-banner-qr:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.kml-rp-banner-qr img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* ---------- 1a. HERO CTA (above-the-fold REFER A BUYER)
   The CTA section itself has zero height + transparent background, so
   it doesn't push surrounding sections apart. The button uses
   translateY(-50%) to center its own height exactly on the seam between
   the hero banner and the emotional section — half overlaps the banner
   (banner shows through where the section is transparent), half drops
   into the cream of the emotional section. */
.kml-rp-hero-cta {
    background: transparent;
    padding: 0 24px;
    margin: -30px 0;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
}
.kml-rp-cta-button--hero {
    padding: 18px 40px;
    font-size: 16px;
    letter-spacing: 0.14em;
    border-radius: 12px;
    box-shadow:
        0 18px 38px rgba(168, 134, 65, 0.5),
        0 0 0 1px rgba(168, 134, 65, 0.35) inset;
}
.kml-rp-cta-button--hero .kml-rp-cta-chevron {
    width: 16px;
    height: 16px;
}

/* ---------- 2. EMOTIONAL CONNECTION (split 50/50, title in left col) ---------- */
.kml-rp-emotional {
    background: #ffffff;
    padding: 72px 0 72px 0;
    overflow: hidden;
}
.kml-rp-emotional-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}
@media (min-width: 800px) {
    .kml-rp-emotional-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
}
.kml-rp-emotional-left {
    padding: 0 24px 0 48px;
    text-align: left;
}
@media (max-width: 799px) {
    .kml-rp-emotional-left {
        padding: 0 24px;
    }
}
.kml-rp-script-eyebrow {
    font-family: var(--kml-script);
    color: var(--kml-rose);
    font-size: clamp(22px, 2.4vw, 30px);
    text-align: left;
    margin: 0 0 4px;
    letter-spacing: 0.02em;
}
/* (text-align: left handled in the unified .kml-rp-h2 / .kml-rp-h2--left
   rules near the top of this round-2 block.) */
.kml-rp-emotional-left .kml-rp-h2--left {
    margin-bottom: 24px;
}
.kml-rp-emotional-text p {
    font-family: var(--kml-serif);
    color: var(--kml-ink);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    margin: 0 0 14px;
}
.kml-rp-tagline {
    font-family: var(--kml-tagline);
    color: var(--kml-gold-deep) !important;
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 26px) !important;
    line-height: 1.3 !important;
    margin-top: 18px !important;
}
.kml-rp-heart {
    /* Layout PDF specifies: "Use gold heart icon at the end" */
    color: var(--kml-gold-deep);
    font-size: 1.1em;
    vertical-align: middle;
    margin: 0 4px;
}
.kml-rp-emotional-right {
    position: relative;
    width: 100%;
    line-height: 0;
}
.kml-rp-emotional-right img {
    width: 100%;
    height: auto;
    display: block;
    /* fade out from right (opaque) to left (transparent) — opaque
       through the right 90% of the image, then fades to transparent
       so the photo blends into the white page background. */
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 60%, transparent 100%);
            mask-image: linear-gradient(to left, #000 0%, #000 60%, transparent 100%);
}

/* ---------- 3. VIDEO (split 50/50: video left, copy + PLAY button right) ---------- */
.kml-rp-video {
    background: #ffffff;
    padding: 72px 24px 80px;
    color: var(--kml-ink);
}
.kml-rp-video-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}
@media (min-width: 800px) {
    .kml-rp-video-grid {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
    }
}
.kml-rp-video-left {
    line-height: 0;
}
.kml-rp-video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px var(--kml-gold) inset,
        0 18px 48px rgba(0, 0, 0, 0.45);
}
.kml-rp-video-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}
.kml-rp-video-right {
    text-align: left;
}
.kml-rp-video-right .kml-rp-h2--left {
    color: var(--kml-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kml-rp-video-sub {
    font-family: var(--kml-serif);
    color: var(--kml-ink);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.55;
    margin: 0 0 14px;
}
.kml-rp-video-body {
    font-family: var(--kml-serif);
    color: var(--kml-ink);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.55;
    margin: 0 0 24px;
}
.kml-rp-cta-button--play {
    /* uses base .kml-rp-cta-button style; override rounding/size */
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 15px;
    letter-spacing: 0.14em;
}
.kml-rp-play-icon {
    width: 20px;
    height: 20px;
    color: #ffffff;
}

/* ---------- 4. HOW IT WORKS — 4 STEPS ---------- */
.kml-rp-how {
    background: #ffffff;
    padding: 72px 24px 64px;
}
.kml-rp-how-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.kml-rp-steps {
    list-style: none;
    padding: 0;
    margin: 36px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    justify-items: center;
}
@media (min-width: 760px) {
    .kml-rp-steps {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        gap: 12px;
        align-items: start;
    }
}
.kml-rp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
    padding: 18px 14px;
    max-width: 240px;
}
.kml-rp-step-icon {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kml-navy);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 26, 77, 0.18);
}
.kml-rp-step-icon svg {
    width: 50px;
    height: 50px;
}
.kml-rp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--kml-gold);
    color: #ffffff;
    font-family: var(--kml-sans);
    font-weight: 700;
    font-size: 13px;
    margin-top: -13px;
    box-shadow: 0 2px 6px rgba(0, 26, 77, 0.25);
    z-index: 2;
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.kml-rp-step-text {
    font-family: var(--kml-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--kml-ink);
    margin: 14px 0 0;
    line-height: 1.4;
}
.kml-rp-step-text strong {
    font-weight: 700;
}
.kml-rp-arrow {
    color: var(--kml-gold);
    font-size: 28px;
    line-height: 1;
    /* Steps use align-items: start so every icon sits at the same y.
       Push the arrow down so its vertical center lines up with the icon
       center: step padding-top (18) + half icon (45) - half arrow (14) ≈ 49. */
    padding-top: 49px;
}
@media (max-width: 759px) {
    .kml-rp-arrow {
        transform: rotate(90deg);
        display: block;
        padding-top: 0;
    }
}

/* ---------- 5. BENEFITS — 3 COLUMNS ---------- */
.kml-rp-benefits {
    background: #ffffff;
    padding: 72px 24px 80px;
}
.kml-rp-benefits-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.kml-rp-benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 36px;
}
@media (min-width: 760px) {
    .kml-rp-benefit-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}
.kml-rp-benefit {
    background: #ffffff;
    border: 1px solid rgba(201, 169, 97, 0.45);
    border-radius: 14px;
    padding: 36px 26px;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(201, 169, 97, 0.15) inset,
        0 10px 24px rgba(0, 26, 77, 0.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kml-rp-benefit:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 169, 97, 0.75);
    box-shadow:
        0 1px 0 rgba(201, 169, 97, 0.25) inset,
        0 16px 32px rgba(0, 26, 77, 0.12);
}
.kml-rp-benefit-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kml-gold-deep);
}
.kml-rp-benefit-icon svg {
    width: 100%;
    height: 100%;
}
.kml-rp-benefit-title {
    font-family: var(--kml-display);
    font-weight: 600;
    color: var(--kml-navy);
    font-size: 19px;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.kml-rp-benefit-text {
    font-family: var(--kml-serif);
    color: var(--kml-ink);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}

/* ---------- 6. QR & CTA ---------- */
.kml-rp-qr {
    background: #ffffff;
    padding: 72px 24px 80px;
}
.kml-rp-qr-inner {
    max-width: 1000px;
    margin: 0 auto;
}
.kml-rp-qr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 36px;
}
@media (min-width: 760px) {
    .kml-rp-qr-grid {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
    }
}
.kml-rp-qr-image-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.kml-rp-qr-image {
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 26, 77, 0.15);
}
.kml-rp-qr-hand {
    font-family: var(--kml-script);
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--kml-rose);
    margin: 8px 0 0;
    transform: rotate(-3deg);
}
.kml-rp-qr-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}
.kml-rp-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, var(--kml-gold) 0%, var(--kml-gold-deep) 100%);
    color: #ffffff !important;
    font-family: var(--kml-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.12em;
    padding: 16px 32px;
    border-radius: 999px;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(168, 134, 65, 0.4);
    transition: transform .15s ease, box-shadow .15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.kml-rp-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(168, 134, 65, 0.5);
}
.kml-rp-cta-chevron {
    width: 14px;
    height: 14px;
    color: #ffffff;
}

/* ---------- 7. SUBSCRIBE FORM ---------- */
.kml-rp-subscribe {
    background: var(--kml-navy);
    padding: 72px 24px 80px;
    color: var(--kml-cream);
}
.kml-rp-subscribe-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.kml-rp-subscribe .kml-rp-h2 {
    color: var(--kml-cream);
}
.kml-rp-subscribe-sub {
    font-family: var(--kml-serif);
    color: var(--kml-cream-deep);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.55;
    margin: 0 0 30px;
}
.kml-rp-form {
    text-align: left;
}
.kml-rp-hp {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.kml-rp-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (min-width: 600px) {
    .kml-rp-form-row {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
}
.kml-rp-field label {
    display: block;
    font-family: var(--kml-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--kml-cream);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.kml-rp-req {
    color: var(--kml-gold-soft);
    font-weight: 700;
}
.kml-rp-field input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(250, 245, 229, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--kml-ink);
    font-family: var(--kml-sans);
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.kml-rp-field input:focus {
    outline: none;
    border-color: var(--kml-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.25);
}
.kml-rp-submit-wrap {
    text-align: center;
    margin-top: 24px;
}
.kml-rp-submit-btn {
    background: linear-gradient(180deg, var(--kml-gold) 0%, var(--kml-gold-deep) 100%);
    color: #ffffff;
    font-family: var(--kml-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.14em;
    padding: 14px 40px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(168, 134, 65, 0.4);
    transition: transform .15s ease, box-shadow .15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.kml-rp-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(168, 134, 65, 0.5);
}
.kml-rp-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.kml-rp-form-status {
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: var(--kml-sans);
    font-size: 14px;
    text-align: center;
    min-height: 1.4em;
    background: transparent;
}
.kml-rp-form-status.is-success {
    background: rgba(63, 156, 89, 0.18);
    color: #b9f0c8;
    border: 1px solid rgba(63, 156, 89, 0.4);
}
.kml-rp-form-status.is-error {
    background: rgba(220, 53, 69, 0.18);
    color: #ffc3c8;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

/* ---------- 8. TRUST STRIP ---------- */
.kml-rp-trust {
    background: #ffffff;
    padding: 36px 24px 44px;
    border-top: 1px solid rgba(201, 169, 97, 0.25);
}
.kml-rp-trust-title {
    font-family: var(--kml-display);
    font-weight: 600;
    color: var(--kml-navy);
    font-size: clamp(16px, 1.6vw, 20px);
    letter-spacing: 0.08em;
    text-align: center;
    margin: 0 0 24px;
    text-transform: uppercase;
}
.kml-rp-trust-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.kml-rp-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 22px;
    color: var(--kml-navy);
}
.kml-rp-trust-divider {
    width: 1px;
    height: 38px;
    background: rgba(0, 26, 77, 0.2);
}
.kml-rp-trust-icon {
    width: 30px;
    height: 30px;
    color: var(--kml-navy);
    flex-shrink: 0;
}
.kml-rp-trust-label {
    font-family: var(--kml-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kml-navy);
    line-height: 1.3;
}
@media (max-width: 760px) {
    .kml-rp-trust-divider { display: none; }
    .kml-rp-trust-item { padding: 6px 14px; }
}

/* ---------- 9. FOOTER overrides (reuses .kml-footer from round 1) ---------- */
.kml-rp-landing .kml-footer {
    margin-top: 0;
}

/* ---------- RESPONSIVE FINAL TOUCHES ---------- */
@media (max-width: 600px) {
    .kml-rp-emotional,
    .kml-rp-video,
    .kml-rp-how,
    .kml-rp-benefits,
    .kml-rp-qr,
    .kml-rp-subscribe {
        padding-left: 16px;
        padding-right: 16px;
    }
    .kml-rp-step {
        max-width: 100%;
    }
    .kml-rp-cta-button {
        padding: 14px 24px;
        font-size: 14px;
        letter-spacing: 0.08em;
    }
}

/* ===================================================================
   ===================================================================
   ABC's & 123's GLOSSARY TRIPWIRE CARD  ([kml_abc123_card])
   Designed for the existing dark/navy gap on the home page. Cream
   card with gold border for contrast on dark backgrounds; navy card
   adapts cleanly on light backgrounds too thanks to the explicit
   background-color.
   ===================================================================
   =================================================================== */
.kml-abc-card-section {
    background: transparent;
    padding: 56px 24px;
    display: flex;
    justify-content: center;
}
.kml-abc-card {
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    background: linear-gradient(165deg, #faf5e5 0%, #f3ecd5 100%);
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 16px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(201, 169, 97, 0.25) inset;
    padding: 28px;
    align-items: center;
    box-sizing: border-box;
    font-family: var(--kml-sans);
    color: var(--kml-ink);
}
@media (min-width: 760px) {
    .kml-abc-card {
        grid-template-columns: minmax(220px, 320px) 1fr;
        gap: 40px;
        padding: 36px;
    }
}
.kml-abc-card * { box-sizing: border-box; }
.kml-abc-card-cover {
    line-height: 0;
}
.kml-abc-card-cover a {
    display: block;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 12px 28px rgba(0, 26, 77, 0.25);
}
.kml-abc-card-cover a:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 26, 77, 0.35);
}
.kml-abc-card-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.kml-abc-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kml-abc-eyebrow {
    font-family: var(--kml-serif);
    font-style: italic;
    color: var(--kml-gold-deep);
    font-size: 16px;
    letter-spacing: 0.06em;
    margin: 0;
    text-transform: uppercase;
}
.kml-abc-title {
    font-family: var(--kml-display);
    font-weight: 600;
    color: var(--kml-navy);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: 0.02em;
    margin: 0;
}
.kml-abc-title sup {
    font-size: 0.55em;
    vertical-align: super;
    color: var(--kml-gold-deep);
    margin: 0 0.05em;
}
.kml-abc-sub {
    font-family: var(--kml-serif);
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--kml-ink);
    line-height: 1.45;
    margin: 0 0 6px;
}
.kml-abc-bullets {
    list-style: none;
    padding: 0;
    margin: 4px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kml-abc-bullets li {
    position: relative;
    padding-left: 26px;
    font-family: var(--kml-sans);
    font-size: 15px;
    color: var(--kml-ink);
    line-height: 1.45;
}
.kml-abc-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--kml-gold);
    box-shadow: 0 0 0 1px var(--kml-gold-deep) inset;
}
.kml-abc-bullets li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 8px;
    height: 4px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}
.kml-abc-cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.kml-abc-price {
    font-family: var(--kml-display);
    color: var(--kml-navy);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.kml-abc-buy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, var(--kml-gold) 0%, var(--kml-gold-deep) 100%);
    color: #ffffff !important;
    font-family: var(--kml-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.14em;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none !important;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(168, 134, 65, 0.4);
    transition: transform .15s ease, box-shadow .15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.kml-abc-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(168, 134, 65, 0.5);
}
.kml-abc-buy-chevron {
    width: 14px;
    height: 14px;
    color: #ffffff;
}
@media (max-width: 600px) {
    .kml-abc-card-section { padding: 36px 14px; }
    .kml-abc-card { padding: 22px; }
    .kml-abc-buy {
        padding: 12px 22px;
        font-size: 13px;
        letter-spacing: 0.1em;
    }
}