:root{
    --mk3-navy:#071d3b;
    --mk3-yellow:#ffc51b;
    --mk3-cream:#fffaf1;
    --mk3-cream2:#fff5df;
    --mk3-muted:#65758b;
    --mk3-blue:#edf6ff;
}

/* escape any theme content constraint once, at the component level */
html,body.magik-v3-page{width:100%;max-width:none;overflow-x:hidden}
body.magik-v3-page .wp-block-post-title,
body.magik-v3-page .entry-title,
body.magik-v3-page header.wp-block-template-part,
body.magik-v3-page footer.wp-block-template-part,
body.magik-v3-page .wp-site-blocks>header,
body.magik-v3-page .wp-site-blocks>footer{display:none!important}

body.magik-v3-page .wp-site-blocks,
body.magik-v3-page main,
body.magik-v3-page article,
body.magik-v3-page .entry-content,
body.magik-v3-page .wp-block-post-content,
body.magik-v3-page .wp-block-shortcode,
body.magik-v3-page .is-layout-constrained,
body.magik-v3-page .is-layout-flow{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
}
body.magik-v3-page .wp-block-post-content>*,
body.magik-v3-page .entry-content>*,
body.magik-v3-page article>*{
    max-width:none!important;
}

.mk3-site{
    box-sizing:border-box;
    position:relative;
    left:auto;
    width:100%;
    min-width:100%;
    max-width:none;
    margin:0;
    overflow:hidden;
    color:var(--mk3-navy);
    background:#fff;
    font-family:Arial,Helvetica,sans-serif;
}
.mk3-site *{box-sizing:border-box}
.mk3-site a{text-decoration:none;color:inherit}
.mk3-container{width:min(90vw,1840px);margin:0 auto}

/* header */
.mk3-header{background:#fff;position:relative;z-index:50;border-bottom:1px solid rgba(7,29,59,.06)}
.mk3-header-in{height:66px;display:grid;grid-template-columns:235px 1fr 210px;align-items:center;gap:22px}
.mk3-logo{display:flex;align-items:center;justify-content:flex-start}
.mk3-logo img{display:block;width:174px;height:auto}
.mk3-nav{display:flex;align-items:center;justify-content:center;gap:31px}
.mk3-nav a{font-size:14px;font-weight:700;white-space:nowrap}
.mk3-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    background:var(--mk3-yellow);color:var(--mk3-navy)!important;
    border-radius:16px;font-weight:850;box-shadow:0 8px 22px rgba(255,197,27,.22)
}
.mk3-cta-top{justify-self:end;padding:14px 20px;font-size:14px;min-width:180px}

/* hero */
.mk3-hero{
    position:relative;
    min-height:520px;
    background:
      radial-gradient(circle at 53% 25%,rgba(255,255,255,.75),transparent 30%),
      linear-gradient(90deg,#fffaf1 0%,#fff8ed 56%,#faeddf 100%);
}
.mk3-hero-in{position:relative;min-height:520px}
.mk3-copy{position:relative;z-index:8;width:40%;padding-top:38px}
.mk3-kicker{font-size:13px;font-weight:900;letter-spacing:1.45px;margin-bottom:13px;color:#9a7000}
.mk3-copy h1{
    display:flex;flex-direction:column;width:max-content;
    margin:0 0 20px;font-size:clamp(62px,5.1vw,92px);line-height:.84;
    letter-spacing:-4.6px;font-weight:950;transform:rotate(-1.3deg);transform-origin:left center;
}
.mk3-copy h1 span:nth-child(2){transform:translateX(-3px) rotate(.3deg)}
.mk3-copy h1 em{
    display:inline-block;position:relative;width:max-content;
    padding:3px 15px 8px;margin-top:9px;font-style:normal;z-index:1;transform:rotate(.6deg)
}
.mk3-copy h1 em:before{
    content:"";position:absolute;inset:8px -14px 3px -14px;z-index:-1;
    background:var(--mk3-yellow);border-radius:45% 55% 44% 53%;transform:rotate(-2deg) skewX(-2deg)
}
.mk3-desc{width:370px;margin:0 0 20px;font-size:17px;line-height:1.43}
.mk3-checks{display:grid;gap:11px}
.mk3-check{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.mk3-check i{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:var(--mk3-yellow);font-style:normal;font-weight:900}

/* photo scene: intentionally extends under the form */
.mk3-photo{
    position:absolute;z-index:3;left:28%;top:0;bottom:0;width:53%;overflow:hidden;
}
.mk3-photo img{display:block;position:absolute;top:-4%;left:12%;height:108%;width:auto;max-width:none;object-fit:contain}
.mk3-photo-fade{
    position:absolute;z-index:2;inset:0;pointer-events:none;
    background:
      linear-gradient(90deg,#fffaf1 0%,#fffaf1 8%,rgba(255,250,241,.75) 13%,rgba(255,250,241,0) 26%,rgba(255,250,241,0) 100%);
}
.mk3-hero-note{
    position:absolute;z-index:4;left:5%;top:29px;
    font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:20px;line-height:1.05;
    transform:rotate(-7deg);color:var(--mk3-navy);text-shadow:0 0 10px #fffaf1,0 0 16px #fffaf1
}
.mk3-hero-note b{display:block;font-size:47px;line-height:.65;margin:8px 0 0 45px;transform:rotate(18deg)}

/* form over the image */
.mk3-form{
    position:absolute;z-index:20;right:0;top:14px;width:31.5%;max-width:510px;min-width:340px;
    min-height:492px;padding:22px 23px 17px;background:#fff;border-radius:23px;
    box-shadow:0 19px 48px rgba(7,29,59,.15)
}
.mk3-form-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.mk3-step-label{background:var(--mk3-yellow);padding:8px 12px;border-radius:12px;font-size:13px;font-weight:900}
.mk3-dots{display:flex;gap:9px}.mk3-dots i{width:15px;height:15px;border-radius:50%;border:2px solid #d9e0e8}.mk3-dots .on{background:var(--mk3-yellow);border-color:var(--mk3-yellow)}
.mk3-form h2{margin:0 0 6px;font-size:30px;line-height:1.06;letter-spacing:-1px}
.mk3-form-intro{margin:0 0 13px;color:#53637a;font-size:14px;line-height:1.35}
.mk3-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:9px}
.mk3-chips button{
    min-height:43px;border:1px solid #d9e1ea;border-radius:10px;background:#fff;color:var(--mk3-navy);
    font:700 12px Arial,Helvetica,sans-serif;cursor:pointer;padding:6px 4px
}
.mk3-chips button:nth-child(4),.mk3-chips button:nth-child(5){grid-column:auto}
.mk3-chips button.is-active{border-color:var(--mk3-yellow);box-shadow:0 0 0 1px var(--mk3-yellow);background:#fffdf5}

.mk3-own-label{font-size:11px;font-weight:700;color:#516177;margin:1px 0 5px}

/* Fluent */
.mk3-form .ff-el-group{margin-bottom:9px!important}
.mk3-form .ff-el-input--label{margin-bottom:4px!important}
.mk3-form .ff-el-input--label label{font-size:12px!important;color:var(--mk3-navy)!important;font-weight:800!important}
.mk3-form .ff-el-group:first-of-type .ff-el-input--label{display:none!important}
.mk3-form .ff-el-form-control{
    width:100%!important;min-height:49px!important;border:1px solid #d9e1ea!important;border-radius:11px!important;
    padding:10px 13px!important;background:#fff!important;color:var(--mk3-navy)!important;font-size:15px!important;box-shadow:none!important
}
.mk3-form .ff-el-form-control:focus{outline:none!important;border-color:var(--mk3-yellow)!important;box-shadow:0 0 0 3px rgba(255,197,27,.15)!important}
.mk3-form .ff-btn,.mk3-form .ff-btn-submit,.mk3-form .ff-btn-next{
    width:100%!important;min-height:51px!important;border:0!important;border-radius:12px!important;
    background:var(--mk3-yellow)!important;color:var(--mk3-navy)!important;font-size:17px!important;font-weight:900!important;box-shadow:none!important
}
.mk3-form .ff-el-progress{display:none!important}

.mk3-range-wrap{margin:6px 0 9px}

.mk3-range{
    -webkit-appearance:none;
    appearance:none;
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--mk3-yellow) 0 18%,#dfe5eb 18% 100%);
    outline:none;
}
.mk3-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:18px;height:18px;border-radius:50%;
    background:var(--mk3-yellow);border:0;box-shadow:none;cursor:pointer
}
.mk3-range::-moz-range-track{
    height:5px;border-radius:999px;background:#dfe5eb;border:0
}
.mk3-range::-moz-range-progress{
    height:5px;border-radius:999px;background:var(--mk3-yellow)
}
.mk3-range::-moz-range-thumb{
    width:18px;height:18px;border-radius:50%;background:var(--mk3-yellow);border:0;cursor:pointer
}
.mk3-range{width:100%;accent-color:var(--mk3-yellow);cursor:pointer}
.mk3-range-wrap>div{display:flex;justify-content:space-between;color:#607087;font-size:10px;margin-top:-2px}
.mk3-form-meta{text-align:center;color:#617087;font-size:10.5px;line-height:1.2;margin-top:8px}

/* section title marker */
.mk3-section-title{position:relative;display:inline-block;margin:0;font-size:29px;letter-spacing:-.7px}
.mk3-section-title:after{content:"";position:absolute;left:0;bottom:-6px;width:105px;height:4px;background:var(--mk3-yellow);border-radius:5px;transform:rotate(-2deg)}

/* 4 steps – proportions follow approved mockup */
.mk3-steps{background:#fffaf1;padding:14px 0 20px}
.mk3-steps .mk3-section-title{font-size:26px;margin-bottom:22px}
.mk3-steps-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.05fr;gap:16px;align-items:start}
.mk3-step{position:relative;display:grid;grid-template-columns:58px 1fr;gap:11px;align-items:start;min-height:92px;padding-right:18px}
.mk3-step-icon{
    position:relative;width:58px;height:58px;border-radius:14px;background:#edf6ff;display:grid;place-items:center
}
.mk3-step-icon svg{width:32px;height:32px;fill:none;stroke:var(--mk3-navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mk3-step-icon span{
    position:absolute;left:-7px;bottom:-8px;width:27px;height:27px;border-radius:50%;
    background:#dbe7f0;display:grid;place-items:center;font-size:12px;font-weight:900
}
.mk3-step:first-child .mk3-step-icon{background:#fff4d5}.mk3-step:first-child .mk3-step-icon span{background:var(--mk3-yellow)}
.mk3-step-copy{padding-top:15px}.mk3-step-copy strong{display:block;font-size:14px}.mk3-step-copy p{margin:5px 0 0;color:#607087;font-size:11.5px;line-height:1.25}
.mk3-arrow{position:absolute;right:-8px;top:23px;color:#718098;font-size:29px}
.mk3-steps-note{
    position:relative;align-self:center;padding:0 0 0 48px;text-align:center;
    font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:18px;line-height:1.12;transform:rotate(4deg)
}
.mk3-yellow-arrow{position:absolute;left:0;bottom:-4px;color:#edae00;font-size:52px;line-height:1;transform:rotate(-15deg)}

/* three product types */
.mk3-types{background:#fffdf9;border-top:1px solid #f0e7da;border-bottom:1px solid #f0e7da;padding:17px 0}
.mk3-types-row{display:grid;grid-template-columns:repeat(3,1fr)}
.mk3-type{padding:2px 34px 3px;border-right:1px solid #dde4eb}
.mk3-type:first-child{padding-left:8px}.mk3-type:last-child{border-right:0}
.mk3-type svg{width:38px;height:38px;fill:none;stroke:var(--mk3-navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.mk3-type strong{display:block;font-size:15px}.mk3-type p{margin:4px 0 0;color:#64748a;font-size:12px}

/* why: compact, no empty vertical field */
.mk3-why{background:#fff;padding:24px 0 25px}
.mk3-why-grid{display:grid;grid-template-columns:250px minmax(440px,520px) 235px;justify-content:space-between;gap:34px;align-items:center;min-height:0;width:min(86vw,1180px)}
.mk3-polaroid{position:relative;background:#fff;padding:10px 10px 21px;box-shadow:0 9px 23px rgba(7,29,59,.18);transform:rotate(-5deg)}
.mk3-polaroid img{display:block;width:100%;height:174px;object-fit:cover;object-position:center 25%}
.mk3-polaroid p{margin:11px 4px 0;font:18px/1.1 "Comic Sans MS","Bradley Hand",cursive}
.mk3-polaroid span{position:absolute;right:14px;bottom:8px;font-size:23px}
.mk3-benefits .mk3-section-title{margin-bottom:16px}
.mk3-benefit{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;margin-bottom:8px}
.mk3-benefit i{width:41px;height:41px;border-radius:11px;background:#fff5dc;display:grid;place-items:center}
.mk3-benefit svg{width:27px;height:27px;fill:none;stroke:var(--mk3-navy);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mk3-benefit strong{display:block;font-size:14px}.mk3-benefit p{margin:3px 0 0;color:#617087;font-size:11.5px;line-height:1.25}
.mk3-sticky{
    position:relative;min-height:165px;padding:27px 26px;background:#ffe574;
    display:flex;align-items:center;box-shadow:0 8px 22px rgba(7,29,59,.08);
    transform:rotate(6deg);font:25px/1.08 "Comic Sans MS","Bradley Hand",cursive
}
.mk3-sticky b{position:absolute;left:-56px;bottom:-8px;color:#edae00;font-size:63px;line-height:1;transform:rotate(-4deg)}

/* no reviews section by request */

/* bottom CTA – every button returns to lead form */
.mk3-bottom{background:var(--mk3-navy);color:#fff;padding:25px 0 27px}
.mk3-bottom-in{display:grid;grid-template-columns:1fr auto 230px;gap:34px;align-items:center}
.mk3-bottom h2{margin:0;font-size:30px;line-height:1.04}.mk3-bottom h2 em{font-style:normal;color:var(--mk3-yellow)}
.mk3-bottom p{margin:7px 0 0;color:#d1dbe6;font-size:12px}
.mk3-bottom-btn{padding:15px 24px;font-size:14px;white-space:nowrap}
.mk3-bottom-note{font:14px/1.14 "Comic Sans MS","Bradley Hand",cursive;text-align:center;transform:rotate(4deg)}
.mk3-bottom-note b{display:block;font-size:40px;line-height:.7}

/* tablet/mobile */
@media(max-width:1100px){
    .mk3-container{width:min(94vw,980px)}
    .mk3-header-in{grid-template-columns:200px 1fr 165px}.mk3-nav{gap:18px}.mk3-nav a{font-size:12px}
    .mk3-logo img{width:158px}
    .mk3-copy{width:43%}.mk3-copy h1{font-size:58px}
    .mk3-photo{left:30%;width:50%}
    .mk3-form{width:37%;min-width:340px;max-width:390px}
    .mk3-steps-row{grid-template-columns:repeat(4,1fr)}.mk3-steps-note{display:none}
    .mk3-why-grid{grid-template-columns:230px 1fr 210px;gap:32px}
}

@media(max-width:820px){
    .mk3-container{width:calc(100% - 30px)}
    .mk3-header-in{height:62px;grid-template-columns:1fr auto}
    .mk3-logo img{width:145px}.mk3-nav{display:none}.mk3-cta-top{min-width:0;padding:11px 13px;font-size:12px;border-radius:13px}

    .mk3-hero{min-height:0;padding-bottom:25px}
    .mk3-hero-in{min-height:0}
    .mk3-copy{width:100%;padding-top:27px;position:relative;z-index:8}
    .mk3-kicker{font-size:10px;margin-bottom:10px}
    .mk3-copy h1{font-size:clamp(48px,15vw,66px);letter-spacing:-3.4px;margin-bottom:16px}
    .mk3-desc{width:100%;max-width:520px;font-size:15px}
    .mk3-check{font-size:13px}.mk3-check i{width:25px;height:25px}

    .mk3-photo{position:relative;left:auto;top:auto;bottom:auto;width:100vw;height:390px;margin:22px 0 0 calc(50% - 50vw)}
    .mk3-photo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
    .mk3-photo-fade{background:linear-gradient(180deg,#fffaf1 0%,rgba(255,250,241,0) 18%,rgba(255,250,241,0) 100%)}
    .mk3-hero-note{left:20px;top:21px;font-size:16px}

    .mk3-form{position:relative;right:auto;top:auto;width:calc(100% - 8px);min-width:0;max-width:620px;min-height:0;margin:-72px auto 0;padding:21px 18px 17px}
    .mk3-form h2{font-size:26px}.mk3-chips{grid-template-columns:repeat(2,1fr)}.mk3-chips button:last-child{grid-column:1/-1}

    .mk3-steps{padding:27px 0}.mk3-steps .mk3-section-title{font-size:24px}
    .mk3-steps-row{grid-template-columns:1fr 1fr;gap:20px 12px}
    .mk3-step{padding:8px 4px;grid-template-columns:54px 1fr}.mk3-step-icon{width:54px;height:54px}.mk3-arrow{display:none}
    .mk3-step-copy{padding-top:12px}

    .mk3-types{padding:8px 0}.mk3-types-row{grid-template-columns:1fr}
    .mk3-type{border-right:0;border-bottom:1px solid #dde4eb;padding:17px 4px!important;display:grid;grid-template-columns:52px 1fr;column-gap:13px}
    .mk3-type>div{grid-row:1/3}.mk3-type strong{align-self:end}.mk3-type p{align-self:start}.mk3-type:last-child{border-bottom:0}

    .mk3-why{padding:34px 0}.mk3-why-grid{grid-template-columns:1fr;gap:28px}
    .mk3-polaroid{width:245px;margin:0 auto}.mk3-benefits{width:100%}.mk3-benefits .mk3-section-title{font-size:28px}
    .mk3-sticky{width:235px;min-height:155px;margin:0 auto;font-size:22px;padding:25px}

    .mk3-bottom{padding:29px 0}.mk3-bottom-in{grid-template-columns:1fr;gap:18px}.mk3-bottom h2{font-size:27px}
    .mk3-bottom-btn{width:100%;text-align:center}.mk3-bottom-note{display:none}
}

@media(max-width:430px){
    .mk3-cta-top{font-size:10.5px;padding:10px 11px;min-width:0}.mk3-cta-top b{font-size:15px}
    .mk3-logo img{width:132px}
    .mk3-copy h1{font-size:48px}
    .mk3-photo{height:340px}
    .mk3-form{margin-top:-54px}
    .mk3-steps-row{grid-template-columns:1fr 1fr;gap:18px 8px}
    .mk3-step{grid-template-columns:48px 1fr}.mk3-step-icon{width:48px;height:48px}.mk3-step-icon svg{width:27px;height:27px}
    .mk3-step-copy{padding-top:8px}.mk3-step-copy strong{font-size:12.5px}.mk3-step-copy p{font-size:10.5px}
}


/* V3.1: landing is mounted directly under BODY by JS */
body.magik-v3-page > .mk3-site{
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    left:0 !important;
    right:auto !important;
}

body.magik-v3-page .mk3-shortcode-source-hidden{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

body.magik-v3-page .wp-block-post-content:has(.mk3-shortcode-source-hidden),
body.magik-v3-page .entry-content:has(.mk3-shortcode-source-hidden){
    min-height:0 !important;
}


/* =========================================================
   V3.2 — REMOVE THE ORIGINAL WORDPRESS PAGE SHELL
   The landing is moved out of Gutenberg. Its old shell must
   disappear completely so it cannot leave a white gap.
   ========================================================= */
body.magik-v3-page > .mk3-source-shell-hidden{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

/* The moved landing always begins directly below the WP admin bar (when logged in). */
body.magik-v3-page > .mk3-site{
    display:block !important;
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    padding:0 !important;
    left:0 !important;
    right:auto !important;
}

/* Fluent Forms is the real form. Make its confirmation state match the landing. */
.mk3-form .ff-message-success,
.mk3-form .ff_success_message,
.mk3-form .ff-message-success p{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--mk3-navy) !important;
    font:700 17px/1.35 Arial,Helvetica,sans-serif !important;
}

.mk3-form.is-success .mk3-amount-ui,
.mk3-form.is-success .mk3-own-label,
.mk3-form.is-success .mk3-range-wrap,
.mk3-form.is-success .mk3-form-meta{
    display:none !important;
}

.mk3-form.is-success{
    min-height:300px;
}

.mk3-form.is-success .mk3-fluent{
    margin-top:25px;
    padding:22px 18px;
    border-radius:14px;
    background:#fff9e8;
    border:1px solid #f0d779;
}


/* =========================================================
   V3.4 — CONVERSATIONAL FLUENT MUST STAY INSIDE THE CARD
   ========================================================= */

/* The white card never grows beyond the hero. */
.mk3-form{
    height:calc(100% - 28px) !important;
    min-height:0 !important;
    max-height:calc(100% - 28px) !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
}

/* Header and our helper UI stay fixed. Fluent gets the remaining space. */
.mk3-form-head,
.mk3-form > h2,
.mk3-form > .mk3-form-intro,
.mk3-form > .mk3-amount-ui,
.mk3-form > .mk3-own-label,
.mk3-form > .mk3-range-wrap,
.mk3-form > .mk3-form-meta{
    flex:0 0 auto;
}

/* Conversational form gets an internal viewport instead of stretching the card. */
.mk3-fluent{
    position:relative !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    max-width:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#d8dee7 transparent;
}

.mk3-fluent::-webkit-scrollbar{width:5px}
.mk3-fluent::-webkit-scrollbar-thumb{background:#d8dee7;border-radius:999px}
.mk3-fluent::-webkit-scrollbar-track{background:transparent}

/*
 * Fluent Conversational uses viewport-like wrappers.
 * Inside our embedded card they must inherit the card's own viewport.
 */
.mk3-fluent [class*="conversational"],
.mk3-fluent [class*="conversation"],
.mk3-fluent [class*="ff_conv"],
.mk3-fluent [class*="ff-conv"],
.mk3-fluent [class*="fluentform"],
.mk3-fluent form{
    max-width:100% !important;
    min-width:0 !important;
}

.mk3-fluent [class*="conversational"],
.mk3-fluent [class*="conversation"],
.mk3-fluent [class*="ff_conv"],
.mk3-fluent [class*="ff-conv"]{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
}

/* Defensive reset for elements Fluent renders with viewport-sized inline styles. */
.mk3-fluent [style*="100vh"],
.mk3-fluent [style*="100vh;"],
.mk3-fluent [style*="min-height: 100vh"],
.mk3-fluent [style*="min-height:100vh"]{
    min-height:0 !important;
    height:auto !important;
}

/* Keep controls and footer inside the card width. */
.mk3-fluent input,
.mk3-fluent select,
.mk3-fluent textarea,
.mk3-fluent button,
.mk3-fluent [role="button"]{
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* On mobile the card can be a little taller, still never viewport-breaking. */
@media(max-width:720px){
    .mk3-form{
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
    }

    .mk3-fluent{
        max-height:430px !important;
        overflow-y:auto !important;
    }
}


/* =========================================================
   V3.5 — CUSTOM AMOUNT STEP -> REAL FLUENT CONVERSATIONAL
   ========================================================= */

.mk3-step-one-ui{
    flex:0 0 auto;
}

.mk3-own-input-wrap{
    position:relative;
    margin-bottom:8px;
}

.mk3-own-input{
    width:100%;
    height:48px;
    border:1px solid #d9e1ea;
    border-radius:11px;
    padding:10px 48px 10px 13px;
    background:#fff;
    color:var(--mk3-navy);
    font:700 15px/1 Arial,Helvetica,sans-serif;
    outline:none;
    box-sizing:border-box;
}

.mk3-own-input:focus{
    border-color:var(--mk3-yellow);
    box-shadow:0 0 0 3px rgba(255,197,27,.15);
}

.mk3-own-input-wrap>span{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:#68768a;
    font:700 12px Arial,Helvetica,sans-serif;
}

.mk3-custom-next{
    width:100%;
    min-height:51px;
    border:0;
    border-radius:12px;
    background:var(--mk3-yellow);
    color:var(--mk3-navy);
    font:900 17px/1 Arial,Helvetica,sans-serif;
    cursor:pointer;
    margin-top:6px;
}

.mk3-custom-next:hover{filter:brightness(.97)}

/*
 * During our custom first step Fluent stays alive in the DOM,
 * but outside the visible card. This lets us populate its real
 * first input and programmatically move it to question 2.
 */
.mk3-form:not([data-mk3-stage="conversation"]):not(.is-success) .mk3-fluent{
    position:absolute !important;
    left:-10000px !important;
    top:0 !important;
    width:360px !important;
    height:450px !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* Once Fluent is on question 2+, hide our amount screen and show Fluent. */
.mk3-form[data-mk3-stage="conversation"] .mk3-step-one-ui{
    display:none !important;
}

.mk3-form[data-mk3-stage="conversation"] > h2,
.mk3-form[data-mk3-stage="conversation"] > .mk3-form-intro{
    display:none !important;
}

.mk3-form[data-mk3-stage="conversation"] .mk3-fluent{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    opacity:1 !important;
    pointer-events:auto !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

.mk3-form[data-mk3-stage="conversation"] .mk3-form-head{
    margin-bottom:8px;
}

.mk3-form[data-mk3-stage="conversation"] .mk3-form-meta{
    margin-top:5px;
}

/* When Fluent reports success, only its success message remains relevant. */
.mk3-form.is-success .mk3-step-one-ui{
    display:none !important;
}

@media(max-width:720px){
    .mk3-own-input{height:47px}
    .mk3-custom-next{min-height:50px}
    .mk3-form[data-mk3-stage="conversation"] .mk3-fluent{
        max-height:420px !important;
    }
}


/* =========================================================
   V3.7 — MOBILE HERO REFINEMENT
   ========================================================= */
@media(max-width:720px){

    .mk3-hero{
        padding-top:0 !important;
    }

    .mk3-copy{
        text-align:center !important;
        padding-left:22px !important;
        padding-right:22px !important;
    }

    .mk3-kicker{
        text-align:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .mk3-copy h1{
        align-items:center !important;
        width:100% !important;
        text-align:center !important;
        transform:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .mk3-copy h1 span,
    .mk3-copy h1 em{
        transform:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .mk3-copy h1 em{
        display:inline-block !important;
    }

    .mk3-desc{
        text-align:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
        max-width:330px !important;
    }

    .mk3-checks{
        max-width:360px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        text-align:left !important;
    }

    /*
     * Handwritten note moves onto the image, but away from the face
     * and without the large emoji/arrow collision.
     */
    .mk3-hero-note{
        left:18px !important;
        top:18px !important;
        max-width:210px !important;
        font-size:16px !important;
        line-height:1.05 !important;
        transform:rotate(-5deg) !important;
        text-align:left !important;
        background:rgba(255,249,239,.72) !important;
        padding:5px 8px !important;
        border-radius:8px !important;
    }

    .mk3-hero-note b{
        position:absolute !important;
        right:-34px !important;
        bottom:-18px !important;
        margin:0 !important;
        font-size:34px !important;
        transform:rotate(8deg) !important;
        line-height:1 !important;
    }

    .mk3-photo{
        margin-top:10px !important;
    }
}


/* =========================================================
   V3.8 — HERO NOTE WITHOUT ARROW, YELLOW MARKER UNDERLINE
   ========================================================= */
.mk3-hero-note{
    position:absolute;
    left:39px;
    top:30px;
    color:var(--mk3-navy);
    font:400 24px/1.02 "Comic Sans MS","Trebuchet MS",cursive;
    transform:rotate(-7deg);
    z-index:3;
    max-width:290px;
    text-shadow:none;
}

.mk3-hero-note span{
    position:relative;
    display:inline;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
    padding:0 .08em;
    background-image:linear-gradient(transparent 64%, rgba(255,199,26,.95) 64%, rgba(255,199,26,.95) 92%, transparent 92%);
}

.mk3-hero-note b{display:none !important}

@media(max-width:1100px){
    .mk3-hero-note{left:24px;top:22px;font-size:18px;max-width:220px}
}

@media(max-width:720px){
    .mk3-hero-note{
        left:18px !important;
        top:18px !important;
        max-width:230px !important;
        font-size:15px !important;
        line-height:1.08 !important;
        transform:rotate(-4deg) !important;
        background:none !important;
        padding:0 !important;
        border-radius:0 !important;
        text-align:left !important;
    }
    .mk3-hero-note span{
        background-image:linear-gradient(transparent 64%, rgba(255,199,26,.95) 64%, rgba(255,199,26,.95) 92%, transparent 92%);
    }
}