/* Preview-only invitation: preserve the live page and its content. */
.prototype-invitation{display:grid;grid-template-columns:minmax(0,1fr) 174px;align-items:center;gap:14px;margin:14px 0 12px;padding:16px 20px;border:1px solid #b3ae50;border-radius:14px;background:radial-gradient(ellipse at 90% 90%,#24694955,transparent 64%),linear-gradient(115deg,#142f28,#162721);color:#f7f7f3;text-decoration:none;box-shadow:inset 0 1px 0 #fff1;isolation:isolate}
.prototype-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.prototype-eyebrow{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff02e;line-height:1.4}
.prototype-copy strong{font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.045em;margin-top:5px}
.prototype-copy strong span{display:inline-block}
.prototype-description{font-size:12px;line-height:1.5;color:#e0e8e1;margin-top:6px}
.prototype-cta{display:inline-flex;align-items:center;gap:16px;min-height:36px;padding:7px 12px;margin-top:10px;border-radius:7px;border:1px solid #429b6e;background:#116f3d;color:white;font-size:12px;font-weight:800;line-height:1.4}
.prototype-cta>span{font-size:17px;line-height:1}
.prototype-invitation:hover{border-color:#fff02e;background-color:#204735}
.prototype-invitation:hover .prototype-cta{background:#14824a}
.prototype-invitation:focus-visible{outline:3px solid #fff02e;outline-offset:4px}
.prototype-phones{height:142px;display:flex;align-items:center;justify-content:center;position:relative;gap:23px;pointer-events:none}
.prototype-phone{display:block;width:62px;border:3px solid #11181b;border-radius:11px;box-shadow:0 8px 14px #0007,0 0 0 1px #a1afa077;background:white;overflow:hidden;flex-shrink:0}
.prototype-phone img{width:100%;height:auto;display:block}
.household-phone{transform:rotate(-8deg) translateY(3px)}
.professional-phone{transform:rotate(8deg) translateY(-3px)}
.prototype-exchange{position:absolute;left:calc(50% - 15px);top:calc(50% - 15px);width:30px;height:30px;color:#fff02e;z-index:2}
/* Grow with usable window height rather than jumping to the large layout at 901px. */
@media(min-width:1051px){
 .knoq-two-audience-hero{--hero-room:clamp(0px,calc((100svh - 800px) * .06),20px)}
 .knoq-two-audience-hero .site-header nav{min-height:60px;padding-block:6px}
 .knoq-two-audience-hero .logo{width:130px}
 .knoq-two-audience-hero .hero{padding-top:12px;padding-bottom:16px;gap:28px}
 .knoq-two-audience-hero .eyebrow{font-size:10px;line-height:1.4;margin-bottom:6px}
 .knoq-two-audience-hero h1{font-size:clamp(38px,calc(min(3.1vw,47px) + var(--hero-room)),65px);line-height:1.06;margin-bottom:calc(10px + var(--hero-room) * .3)}
 .knoq-two-audience-hero .description{font-size:calc(15px + var(--hero-room) * .15);line-height:1.45;max-width:580px;margin-bottom:6px}
 .knoq-two-audience-hero .availability-status{font-size:13px;line-height:1.45;margin-bottom:10px}
 .knoq-two-audience-hero .audience-card{padding:10px 12px 4px}
 .knoq-two-audience-hero .audience-card .audience-scene{width:195px}
 .knoq-two-audience-hero .audience-card h2{font-size:calc(14px + var(--hero-room) * .1);line-height:1.3;min-height:0;margin-bottom:6px}
 .knoq-two-audience-hero .audience-card>p{font-size:calc(13px + var(--hero-room) * .05);line-height:1.45;margin-bottom:8px}
 .knoq-two-audience-hero .audience-action{min-height:44px;padding:7px 10px;font-size:calc(12px + var(--hero-room) * .05)}
 .knoq-two-audience-hero .audience-card summary{min-height:36px;padding-block:8px;font-size:11px}
 .knoq-two-audience-hero .shared-assurance{line-height:1.4;margin:7px 0 3px}
 .knoq-two-audience-hero .local{line-height:1.4;margin-bottom:0}
 .prototype-invitation{grid-template-columns:minmax(0,1fr) 145px;padding:10px 16px;margin:10px 0 8px;gap:12px}
 .prototype-copy strong{font-size:calc(25px + var(--hero-room) * .25);margin-top:3px}
 .prototype-description{font-size:11px;margin-top:4px}
 .prototype-cta{margin-top:7px;min-height:32px;padding:5px 10px;font-size:11px}
 .prototype-phones{height:calc(114px + var(--hero-room) * 1.4);gap:21px}
 .prototype-phone{width:calc(49px + var(--hero-room) * .65);border-width:2px;border-radius:8px}
 .prototype-exchange{width:25px;height:25px;left:calc(50% - 12.5px);top:calc(50% - 12.5px)}
 .knoq-two-audience-hero .explore{margin-top:8px}
 .knoq-two-audience-hero .explore>a{min-height:50px;padding-block:6px}
 .knoq-two-audience-hero .explore b{font-size:12px}
 .knoq-two-audience-hero .explore small{margin-top:2px}
 .hero-visual{--art-height:clamp(260px,min(55vw,100svh - 150px),1000px)}
}
@media(min-width:1051px) and (max-height:740px){
 .knoq-two-audience-hero .hero{padding-top:8px}
 .knoq-two-audience-hero h1{font-size:clamp(36px,2.8vw,40px)}
 .prototype-invitation{padding-block:8px;margin-top:8px}
 .prototype-phones{height:102px}
 .prototype-phone{width:45px}
 .prototype-copy strong{font-size:23px}
 .prototype-cta{margin-top:5px}
 .knoq-two-audience-hero .explore>a{min-height:48px}
}
@media(max-width:600px){
 .prototype-invitation{grid-template-columns:minmax(0,1fr) 112px;padding:15px 14px;gap:8px}
 .prototype-copy strong{font-size:24px;max-width:200px}
 .prototype-description{font-size:11px;max-width:200px}
 .prototype-eyebrow{font-size:8px;letter-spacing:.08em}
 .prototype-cta{font-size:11px;gap:10px;padding-inline:9px}
 .prototype-phones{height:124px;gap:12px}
 .prototype-phone{width:47px;border-width:2px;border-radius:8px}
 .prototype-exchange{width:21px;height:21px;left:calc(50% - 10.5px);top:calc(50% - 10.5px)}
}
/* Browser toolbars can leave only about 650 CSS pixels on a small laptop. */
@media(min-width:1051px) and (max-height:680px){
 .knoq-two-audience-hero .site-header nav{min-height:54px;padding-block:3px}
 .knoq-two-audience-hero .logo{width:120px}
 .knoq-two-audience-hero h1{font-size:34px;margin-bottom:8px}
 .knoq-two-audience-hero .eyebrow{margin-bottom:4px}
 .prototype-invitation{padding-block:6px;margin-block:7px}
 .prototype-copy strong{font-size:22px}
 .prototype-phones{height:98px}
 .knoq-two-audience-hero .explore{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:7px}
 .knoq-two-audience-hero .explore>a{align-items:flex-start;gap:4px;min-height:60px;padding-block:7px;border-bottom:1px solid var(--line)}
 .knoq-two-audience-hero .explore b{font-size:11px}
 .knoq-two-audience-hero .explore .arrow{font-size:16px}
 .hero-visual .door-controls{transform:translateX(-26px)}
}
@media(max-width:360px){
 .prototype-invitation{grid-template-columns:minmax(0,1fr) 87px;padding:13px 11px}
 .prototype-copy strong{font-size:22px}
 .prototype-phones{gap:9px}
 .prototype-phone{width:37px}
 .prototype-cta{font-size:10px;gap:7px}
}

/* Let the genuine handsets break the card's top edge without adding hero height. */
.prototype-invitation{overflow:visible}
.prototype-phones{align-self:stretch;align-items:flex-end;overflow:visible}
.prototype-phone{position:absolute;bottom:5px;box-shadow:0 12px 18px #0008,0 0 0 1px #afbcad99}
.household-phone{left:5px;transform:rotate(-7deg);transform-origin:center bottom}
.professional-phone{right:5px;transform:rotate(7deg) translateY(-5px);transform-origin:center bottom}
.prototype-exchange{top:42%}
@media(min-width:1251px){
 .prototype-invitation{grid-template-columns:minmax(0,1fr) 174px}
 .prototype-phone{width:calc(66px + var(--hero-room) * .65)}
}
@media(min-width:1051px) and (max-width:1250px){
 .prototype-phone{width:59px}
}
@media(min-width:1051px) and (max-height:740px){
 .prototype-phone{width:59px}
}
@media(max-width:1050px){
 .prototype-invitation{margin-top:34px}
 .prototype-phone{width:75px}
}
@media(max-width:600px){
 .prototype-phones{height:auto;min-height:124px}
 .prototype-phone{width:56px;bottom:10px}
 .household-phone{left:0}
 .professional-phone{right:0}
}
@media(max-width:360px){
 .prototype-phone{width:45px}
}

/* Use spare height on wider monitors, with no change to compact laptop layouts. */
@media(min-width:1251px) and (min-height:801px){
 .knoq-two-audience-hero{--hero-fill:clamp(0px,calc((100svh - 800px) * .05),14px)}
 .knoq-two-audience-hero h1{font-size:clamp(38px,calc(min(3.1vw,47px) + var(--hero-room) + var(--hero-fill) * .4),70px)}
 .knoq-two-audience-hero .audience-card{padding-block:calc(10px + var(--hero-fill) * .5) calc(4px + var(--hero-fill) * .5)}
 .knoq-two-audience-hero .audience-card h2{font-size:calc(14px + var(--hero-room) * .1 + var(--hero-fill) * .12)}
 .knoq-two-audience-hero .audience-card>p{font-size:calc(13px + var(--hero-room) * .05 + var(--hero-fill) * .1)}
 .knoq-two-audience-hero .audience-action{min-height:calc(44px + var(--hero-fill) * .8);font-size:calc(12px + var(--hero-room) * .05 + var(--hero-fill) * .1)}
 .knoq-two-audience-hero .audience-card summary{padding-block:calc(8px + var(--hero-fill) * .25);font-size:calc(11px + var(--hero-fill) * .08)}
 .prototype-invitation{padding-block:calc(10px + var(--hero-fill) * .3)}
 .prototype-phones{height:calc(114px + var(--hero-room) * 1.4 + var(--hero-fill) * 2.2)}
 .prototype-phone{width:calc(66px + var(--hero-room) * .65 + var(--hero-fill) * 1.1)}
 .prototype-description{font-size:calc(11px + var(--hero-fill) * .1)}
 .prototype-cta{min-height:calc(32px + var(--hero-fill) * .8);font-size:calc(11px + var(--hero-fill) * .1)}
 .knoq-two-audience-hero .explore>a{min-height:calc(50px + var(--hero-fill) * 1.3)}
 .knoq-two-audience-hero .explore b{font-size:calc(12px + var(--hero-fill) * .1)}
 .knoq-two-audience-hero .explore small{font-size:calc(10px + var(--hero-fill) * .08)}
}

/* Smooth the rotated handset rims; preserve every existing size and position. */
.prototype-phone{background:#11181b;border-color:#34423b;box-shadow:0 12px 18px #0008;backface-visibility:hidden;outline:1px solid transparent;isolation:isolate}
.prototype-phone img{border-radius:6px;image-rendering:auto;-webkit-mask-image:linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff)}
.household-phone{transform:rotate(-7deg) translateZ(0)}
.professional-phone{transform:rotate(7deg) translateY(-5px) translateZ(0)}