@charset "UTF-8";
/* Reference composition. Every selector is restricted to this first view. */
.fv-reference{position:relative;isolation:isolate;overflow:hidden;min-height:790px;padding:42px 6% 48px}
.fv-reference .ref-band{position:absolute;z-index:-1;left:-17%;top:235px;width:135%;height:260px;background:var(--yellow);transform:rotate(-11deg);pointer-events:none}
.fv-reference .ref-heading{position:relative;z-index:4}
.fv-reference .ref-label{display:table;margin:0 0 25px;padding:5px 13px;border:1px solid var(--ink);border-radius:24px;font-size:12px;font-weight:800;letter-spacing:.03em;line-height:1.8}
.fv-reference h1{position:relative;inset:auto;transform:none;margin:0;z-index:4;font-size:clamp(52px,7.25vw,112px);line-height:1.5;letter-spacing:-.075em;white-space:nowrap;pointer-events:none}
.fv-reference h1>span{display:block;animation:none;width:auto;text-align:left}
.fv-reference h1>span+span{margin-left:4%}
.fv-reference .ref-people{--figure-width:400px;width:var(--figure-width);position:absolute;right:3.5%;top:100px;z-index:2}
.fv-reference .ref-people-top{height:calc(var(--figure-width)*.702);overflow:hidden}
.fv-reference .ref-people-top img{display:block;width:100%;height:auto}
.fv-reference .ref-people-table{height:calc(var(--figure-width)*.226);position:relative;overflow:hidden;margin-top:-1px}
.fv-reference .ref-people-table img{display:block;position:absolute;width:100%;height:auto;left:0;top:calc(var(--figure-width)*-.4563);transform:scaleY(.65);transform-origin:top center}
.fv-reference .ref-bubble{position:absolute;right:25%;top:26px;background:var(--paper);border:2px solid var(--ink);border-radius:50%;font-size:11px;font-weight:800;line-height:1.8;text-align:center;width:154px;padding:13px 16px;z-index:5}

.fv-reference .ref-panel{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1.16fr;align-items:center;gap:25px;background:#fffbed;border:1px solid #080e584d;box-shadow:6px 7px 0 #080e581a;padding:28px;margin-top:41px;width:760px;max-width:68%;border-radius:4px}
.fv-reference .ref-intro>p{font-size:13px;font-weight:900;line-height:1.9;margin:0 0 9px}
.fv-reference .ref-intro>span{font-size:12px;line-height:1.9;display:block}
.fv-reference .ref-book{min-width:0}
.fv-reference .ref-cta{--cta-rotation:none;transform:none;width:100%;border-radius:16px;background:var(--yellow);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:17px 18px;font-size:13px;line-height:1.8;gap:15px;min-height:85px}
.fv-reference .ref-cta small{display:block;font-size:9px;margin:0 0 5px}
.fv-reference .ref-cta b{font-size:30px;flex-shrink:0}
.fv-reference .ref-cta:hover{transform:none;translate:3px 3px;box-shadow:3px 3px 0 var(--ink)}
.fv-reference .ref-cta:active{translate:5px 5px;box-shadow:1px 1px 0 var(--ink)}
.fv-reference .ref-book>p{font-size:8px;line-height:1.8;margin:14px 0 0;text-align:center}
.fv-reference .ref-scroll{position:absolute;right:6%;bottom:28px;display:flex;align-items:center;gap:17px;font-size:8px;letter-spacing:.1em}.fv-reference .ref-scroll span{font-size:24px}
@media(min-width:1600px){.fv-reference{padding-left:max(6%,calc((100vw - 1400px)/2));padding-right:max(6%,calc((100vw - 1400px)/2))}.fv-reference .ref-people{right:max(3.5%,calc((100vw - 1450px)/2))}}
@media(min-width:701px) and (max-width:1050px){.fv-reference{min-height:720px}.fv-reference h1{font-size:7.2vw}.fv-reference .ref-people{--figure-width:310px;right:1%;top:120px}.fv-reference .ref-bubble{right:23%;top:35px;width:143px;font-size:10px}.fv-reference .ref-band{top:225px;height:220px}.fv-reference .ref-panel{display:block;max-width:58%;width:470px;padding:24px;margin-top:43px}.fv-reference .ref-intro>p{font-size:12px}.fv-reference .ref-intro>span{font-size:11px}.fv-reference .ref-book{margin-top:22px}}
@media(max-width:700px){
.fv-reference{padding:28px 6% 43px;min-height:0}
.fv-reference .ref-label{font-size:9px;padding:5px 10px;margin-bottom:22px;letter-spacing:0}
.fv-reference h1{font-size:clamp(25px,8.2vw,55px);line-height:1.7;transform:none;letter-spacing:-.07em}.fv-reference h1>span+span{margin-left:0}
.fv-reference .ref-band{width:155%;left:-28%;top:160px;height:205px;transform:rotate(-13deg)}
.fv-reference .ref-people{--figure-width:191px;right:1.5%;top:206px}
.fv-reference .ref-bubble{left:6%;right:auto;top:237px;width:129px;font-size:10px;line-height:1.8;padding:12px 10px}
.fv-reference .ref-panel{display:block;width:100%;max-width:100%;margin-top:219px;padding:23px 18px 22px;box-shadow:5px 6px 0 #080e581a}
.fv-reference .ref-intro>p{font-size:12px;line-height:1.9;margin-bottom:8px}.fv-reference .ref-intro>span{font-size:11px;line-height:1.9}.fv-reference .ref-book{margin-top:22px}.fv-reference .ref-cta{font-size:12px;min-height:80px;padding:15px 14px;gap:11px}.fv-reference .ref-cta small{font-size:8px}.fv-reference .ref-cta b{font-size:28px}.fv-reference .ref-book>p{font-size:7px;margin-top:14px}
.fv-reference .ref-scroll{position:static;margin-top:26px;justify-content:flex-end;font-size:6px;gap:14px}.fv-reference .ref-scroll span{font-size:20px}
}
@media(max-width:359px){.fv-reference .ref-people{--figure-width:166px;right:1%;top:194px}.fv-reference .ref-bubble{left:4%;top:229px;width:115px;font-size:9px}.fv-reference .ref-panel{margin-top:202px;padding:22px 14px}.fv-reference .ref-cta{font-size:10px}.fv-reference .ref-intro>p{font-size:10px}.fv-reference .ref-band{top:150px;height:185px}}
@media(prefers-reduced-motion:reduce){.fv-reference *{animation:none!important;transition:none!important}}

/* Airier panel and a closer, more expressive conversation. */
.fv-reference .ref-panel{background:rgba(255,252,242,.84);border:1px solid rgba(255,255,255,.75);border-radius:26px;box-shadow:0 5px 18px rgba(8,14,88,.055)}
.fv-reference .ref-people{--figure-width:452px;right:1.5%;top:85px}
.fv-reference .ref-people-table{height:calc(var(--figure-width)*.185)}
.fv-reference .ref-people-table img{top:calc(var(--figure-width)*-.37908);transform:scaleY(.54)}
.fv-reference .ref-bubble{width:185px;font-size:13px;padding:16px 19px;right:27%;top:29px}
@media(min-width:1600px){.fv-reference .ref-people{right:max(1.5%,calc((100vw - 1500px)/2))}}
@media(min-width:701px) and (max-width:1050px){
.fv-reference .ref-people{--figure-width:347px;right:0;top:116px}
.fv-reference .ref-bubble{width:170px;font-size:12px;right:27%;top:38px}
}
/* Mobile has its own reading order, rather than a scaled desktop overlap. */
@media(max-width:700px){
.fv-reference{display:grid;grid-template-columns:minmax(0,1fr);padding:28px 6% 32px}
.fv-reference .ref-heading{grid-column:1;grid-row:1}
.fv-reference h1{font-size:clamp(27px,9.1vw,60px);line-height:1.6;letter-spacing:-.075em;white-space:nowrap}
.fv-reference .ref-label{font-size:9px;margin-bottom:24px}
.fv-reference .ref-people{--figure-width:clamp(218px,66vw,300px);position:relative;grid-column:1;grid-row:2;justify-self:end;align-self:start;right:auto;top:auto;margin-top:92px;z-index:2}
.fv-reference .ref-bubble{position:relative;grid-column:1;grid-row:2;justify-self:start;align-self:start;left:auto;right:auto;top:auto;width:154px;padding:15px 12px;font-size:12px;line-height:1.8;margin:17px 0 0;z-index:3}

.fv-reference .ref-band{top:228px;left:-28%;height:152px;width:155%;transform:rotate(-13deg)}
.fv-reference .ref-panel{grid-column:1;grid-row:3;display:block;width:100%;max-width:100%;margin-top:27px;padding:25px 19px 24px;border-radius:24px;box-shadow:0 4px 16px rgba(8,14,88,.05)}
.fv-reference .ref-intro>p{font-size:12px;line-height:1.9}.fv-reference .ref-intro>span{font-size:12px;line-height:1.9}
.fv-reference .ref-book{margin-top:23px}.fv-reference .ref-cta{font-size:12px;min-height:82px;padding:16px 15px}
.fv-reference .ref-scroll{grid-column:1;grid-row:4;margin-top:25px}
}
@media(max-width:359px){
.fv-reference h1{font-size:9vw}.fv-reference .ref-people{--figure-width:218px;top:auto;right:auto;margin-top:92px}.fv-reference .ref-bubble{left:auto;top:auto;width:140px;font-size:11px}.fv-reference .ref-band{top:215px;height:145px}.fv-reference .ref-panel{margin-top:24px;padding:23px 15px}.fv-reference .ref-cta{font-size:10px}.fv-reference .ref-intro>p{font-size:10px}
}

/* Desktop: the invitation panel and the conversation share one ground line. */
@media(min-width:1051px){
  .fv-reference{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);column-gap:36px;align-content:start}
  .fv-reference .ref-heading{grid-column:1/-1;grid-row:1}
  .fv-reference .ref-panel{grid-column:1;grid-row:2;align-self:end;width:100%;max-width:100%;margin-top:41px}
  .fv-reference .ref-people{position:relative;grid-column:2;grid-row:1/3;align-self:end;justify-self:end;right:auto;top:auto;width:var(--figure-width);margin-bottom:0}
  .fv-reference .ref-bubble{top:180px;right:23%;width:185px}
  .fv-reference .ref-band{top:275px;height:260px}
}
@media(min-width:701px) and (max-width:1050px){
  .fv-reference{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:22px;align-content:start}
  .fv-reference .ref-heading{grid-column:1/-1;grid-row:1}
  .fv-reference .ref-panel{grid-column:1;grid-row:2;align-self:end;width:100%;max-width:100%;margin-top:43px}
  .fv-reference .ref-people{--figure-width:clamp(260px,34vw,347px);position:relative;grid-column:2;grid-row:1/3;align-self:end;justify-self:end;top:auto;right:auto;margin-bottom:0}
  .fv-reference .ref-bubble{top:130px;right:14%;width:165px}
  .fv-reference .ref-band{top:255px;height:220px}
}

/* Desktop speech bubble: an organic, single-line outline with an integrated tail. */
@media(min-width:701px){
  .fv-reference .ref-bubble{isolation:isolate;background:transparent;border:0;border-radius:0;box-shadow:none;width:210px;top:140px;padding:21px 24px;font-size:13px;line-height:1.8}
  
  
}
@media(min-width:701px) and (max-width:1050px){
  .fv-reference .ref-bubble{top:95px;width:190px;padding:19px 21px;font-size:12px}
}

/* A single, softly uneven oval stroke curls toward the conversation. */
.fv-reference .ref-bubble{isolation:isolate;background:transparent;border:0;border-radius:0;box-shadow:none}


@media(min-width:1051px){
  .fv-reference .ref-bubble{width:232px;top:108px;right:22%;padding:24px 27px;font-size:13px;line-height:1.8}
}
@media(min-width:701px) and (max-width:1050px){
  .fv-reference .ref-bubble{width:208px;top:65px;right:13%;padding:22px 24px;font-size:12px}
}
@media(max-width:700px){
  .fv-reference .ref-bubble{width:174px;padding:19px 16px;font-size:12px;line-height:1.8;margin-top:14px}
  
  .fv-reference .ref-people{margin-top:105px}
}
@media(max-width:359px){
  .fv-reference .ref-bubble{width:158px;padding:18px 15px;font-size:11px}
  .fv-reference .ref-people{margin-top:105px}
}

/* The outline and its small looped tail are one continuous SVG path. */


@media(max-width:700px){}

/* Supplied SVG: original geometry and aspect ratio, with HTML text overlaid. */
.fv-reference .ref-bubble{isolation:isolate;background:none;border:0;border-radius:0;box-shadow:none;padding:0;width:246px;top:75px;right:22%;line-height:1.8}
.fv-reference .ref-bubble-art{display:block;width:100%;height:auto;pointer-events:none}
.fv-reference .ref-bubble>span{position:absolute;left:9%;right:9%;top:41%;transform:translateY(-50%);font-size:13px;font-weight:800;line-height:1.8;text-align:center}
@media(min-width:701px) and (max-width:1050px){.fv-reference .ref-bubble{width:218px;top:35px;right:13%}.fv-reference .ref-bubble>span{font-size:12px}}
@media(max-width:700px){.fv-reference .ref-bubble{position:relative;left:auto;right:auto;top:auto;width:184px;padding:0;margin-top:7px}.fv-reference .ref-bubble>span{font-size:12px}.fv-reference .ref-people{margin-top:133px}}
@media(max-width:359px){.fv-reference .ref-bubble{width:166px}.fv-reference .ref-bubble>span{font-size:11px}.fv-reference .ref-people{margin-top:122px}}