@font-face{font-family:"Archivo";src:url(/assets/if4/fonts/archivo-core.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+00D7,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2191-2193,U+2197,U+2713}@font-face{font-family:"Archivo";src:url(/assets/if4/fonts/archivo-ext.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+00A1-00A8,U+00AA-00B6,U+00B8-00D6,U+00D8-00FF,U+2010-2012,U+2015-2017,U+201A-201B,U+201E-2021,U+2023-2025,U+2027,U+2030,U+2039-203A,U+20AC,U+2122,U+2190,U+2715}@font-face{font-family:"Archivo";src:url(/assets/if4/fonts/archivo-core.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+00D7,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2191-2193,U+2197,U+2713}@font-face{font-family:"Archivo";src:url(/assets/if4/fonts/archivo-ext.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap;unicode-range:U+00A1-00A8,U+00AA-00B6,U+00B8-00D6,U+00D8-00FF,U+2010-2012,U+2015-2017,U+201A-201B,U+201E-2021,U+2023-2025,U+2027,U+2030,U+2039-203A,U+20AC,U+2122,U+2190,U+2715}@font-face{font-family:"Newsreader";src:url(/assets/if4/fonts/75514a8348.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:"Newsreader";src:url(/assets/if4/fonts/7c7aff2d0a.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:"Courier Prime";src:url(/assets/if4/fonts/d9be7c25cf.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:"Courier Prime";src:url(/assets/if4/fonts/e8ad727976.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--f-sans:"Archivo","Helvetica Neue",Arial,sans-serif;--f-serif:"Newsreader",Georgia,"Times New Roman",serif;--f-mono:"Courier Prime","Courier New",Courier,monospace;--x-logo:url(/assets/if4/img/286bd42d5a.webp);--x-mono:url(/assets/if4/img/eaccdbc3ab.webp)}
html,body{margin:0;background:#faf9f5}body{color:#172636;font-family:var(--f-sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}button,input,textarea,select{font:inherit;color:inherit}img{max-width:100%}[hidden]{display:none!important}
/* ifpossible.ai homepage, grown up. Designed at 1440 wide; the same markup reflows on a phone through container queries.
   Every color comes from the tokens the knobs write onto .hp. */
.hp{container-type:inline-size;font-family:var(--f-sans);color:var(--ink);background:var(--g);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;--mx:96px;position:relative;overflow:hidden}
.hp *{box-sizing:border-box}
.hp a{color:inherit;text-decoration:none}
.hp .in{padding-left:var(--mx);padding-right:var(--mx)}
.hp section,.hp header,.hp footer,.hp .ann{position:relative}
.hp .sg-light{background:var(--g);color:var(--ink)}
.hp .sg-alt{background:var(--g2);color:var(--ink)}
.hp .sg-dark{background:var(--dk);color:var(--inkD)}
.hp .sg-dark .muted{color:var(--ink2D)}
.hp .muted{color:var(--ink2)}

/* type voices */
.hp .eb{font-stretch:var(--eb-fs,120%);font-weight:650;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--eb,var(--acc));display:flex;align-items:center;gap:14px}
.hp .sg-dark .eb{color:var(--ebD,var(--accD))}
.hp .eb.ln::before{content:"";display:block;width:28px;height:1px;background:currentColor;opacity:.7}
.hp .hd{font-stretch:var(--fs);font-weight:var(--fw);text-transform:var(--tt);line-height:var(--lh);letter-spacing:var(--ls);margin:0;text-wrap:balance}
/* the payoff word: one lift, chosen on the Highlight slider. The band is Scott's pick. */
.hp .pay{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hp.em-band .pay{color:inherit;background:linear-gradient(transparent 54%,var(--band) 54%,var(--band) 93%,transparent 93%);padding:0 .06em}
.hp.em-band .sg-dark .pay{color:var(--bandInk);background:var(--bandD);padding:.02em .1em 0}
.hp.em-color .pay,.hp.em-social .pay{color:var(--acc)}
.hp.em-color .sg-dark .pay,.hp.em-social .sg-dark .pay{color:var(--accD)}
.hp.em-under .pay{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.14em;text-decoration-color:var(--acc)}
.hp.em-under .sg-dark .pay{text-decoration-color:var(--accD)}
.hp.em-weight .hd{font-weight:300}.hp.em-weight .pay{font-weight:850}
.hp.em-italic .pay{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--acc)}
.hp.em-italic .sg-dark .pay{color:var(--accD)}
.hp.t-weight .hd{font-weight:300}
.hp.t-weight .hd .pay{font-weight:780}
.hp.c0.em-band .pay{background:linear-gradient(transparent 54%,var(--hair2,#e3e0d5) 54%,var(--hair2,#e3e0d5) 93%,transparent 93%)}
.hp.c0.em-band .sg-dark .pay{color:var(--inkD);background:rgba(255,255,255,.16)}
/* the staircase highlight: each section's payoff word takes the next step's color, lavender, yellow, pink, green */
.hp.band-rotate section:nth-of-type(4n+1) .pay{--band:var(--b1);--bandD:var(--bD1)}
.hp.band-rotate section:nth-of-type(4n+2) .pay{--band:var(--b2);--bandD:var(--bD2)}
.hp.band-rotate section:nth-of-type(4n+3) .pay{--band:var(--b3);--bandD:var(--bD3)}
.hp.band-rotate section:nth-of-type(4n+4) .pay{--band:var(--b4);--bandD:var(--bD4)}
.hp .h1{font-size:80px}
.hp .h2{font-size:50px}
.hp .h3{font-size:30px}
.hp.t-wide .h1{font-size:62px;letter-spacing:.02em}
.hp.t-wide .h2{font-size:40px;letter-spacing:.03em}
.hp.t-wide .h3{font-size:22px;letter-spacing:.04em}
.hp.t-stack .h1{font-size:104px}
.hp.t-wide .cmp .ttl{font-size:20px;letter-spacing:.04em}.hp.t-wide .card .ttl{font-size:21px;letter-spacing:.04em;line-height:1.15}.hp.t-wide .meth .lines li{font-size:25px;letter-spacing:.04em}
.hp.t-stack .h2{font-size:70px}
.hp.t-heavy .h1{font-size:94px}.hp.t-heavy .h2{font-size:62px}
.hp .lead{font-size:22px;line-height:1.45;font-weight:400;max-width:600px;margin:0}
.hp .body{font-size:17px;line-height:1.62;font-weight:400}
.hp .aside{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.25}
.hp .typed{font-family:var(--f-mono);font-size:13px;letter-spacing:.01em}
.hp .num{font-stretch:var(--fs-num,74%);font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:.9}
.hp.t-stack .num{font-stretch:70%;font-weight:850}
.hp .wc{font-stretch:120%;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* buttons */
.hp .btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:var(--btnInk);font-weight:650;font-size:16px;padding:17px 26px;letter-spacing:.005em;border-radius:var(--rad,0)}
.hp .sg-dark .btn{background:var(--btnD);color:var(--btnDInk)}
.hp .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.hp .sg-dark .btn.ghost{color:var(--inkD);box-shadow:inset 0 0 0 1.5px var(--inkD)}
.hp .tl{font-weight:650;font-size:16px;display:inline-flex;gap:8px;align-items:center;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.hp .arr{display:inline-block;width:18px;height:10px;position:relative}
.hp .arr::before{content:"";position:absolute;left:0;right:2px;top:4.5px;height:1.5px;background:currentColor}
.hp .arr::after{content:"";position:absolute;right:1px;top:1.5px;width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}

/* logo, the exact current mark used as a mask */
.hp .logo{display:block;aspect-ratio:1400/259;background:var(--logo);-webkit-mask:var(--x-logo) center/contain no-repeat;mask:var(--x-logo) center/contain no-repeat}
.hp .sg-dark .logo{background:var(--logoD,#fff)}

/* announcement bar */
.hp .ann{display:flex;gap:18px;align-items:center;justify-content:center;padding-block:13px;font-size:14px;background:var(--annBg);color:var(--annInk)}
.hp .ann .dot{width:7px;height:7px;border-radius:999px;background:var(--annDot)}
.hp .ann .wc{color:var(--annDot);font-size:11px}
.hp .ann b{font-weight:650}
.hp .ann .sep{width:1px;height:14px;background:currentColor;opacity:.3}
.hp .ann .go{font-weight:650;border-bottom:1px solid currentColor;padding-bottom:1px}

/* header */
.hp .hdr{display:flex;align-items:center;justify-content:space-between;padding-block:24px;border-bottom:1px solid var(--line)}
.hp .hdr .logo{width:178px}
.hp .nav{display:flex;gap:34px;align-items:center;font-size:15px;font-weight:550}
.hp .nav .dd::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-3px);margin-left:9px;opacity:.7}
.hp .hdr .btn{padding:12px 18px;font-size:14px}
.hp .hdr.sg-dark{border-bottom-color:var(--lineD)}

/* hero */
.hp .hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:92px 84px}
.hp .hero .copy{display:flex;flex-direction:column;gap:30px}
.hp .hero .ctas{display:flex;gap:28px;align-items:center;margin-top:6px}
.hp .hero .fig{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}
.hp .hero .fig svg{width:100%;height:auto;display:block;overflow:visible}
.hp .hero.has-panel .fig{margin-right:calc(var(--mx) * -1);align-self:stretch}
.hp .hero .panel{position:absolute;inset:-92px 0 -84px 0;background:var(--g2)}
.hp .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hp .stats>div{padding:30px 0 28px 0}
.hp .stats>div+div{padding-left:36px;border-left:1px solid var(--line)}
.hp .stats .num{font-size:64px}
.hp .stats .wc{margin-top:12px;color:var(--ink2)}
.hp .stats .aside{font-size:22px;align-self:center}
.hp .stats .tagline{display:flex;flex-direction:column;justify-content:center;gap:10px}

/* the problem */
.hp .prob{padding-block:120px}
.hp .prob-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:56px}
.hp .prob-top .pivot{font-stretch:var(--fs);font-weight:600;font-size:28px;line-height:1.2;margin:18px 0 0;letter-spacing:-.01em}
.hp .cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.hp .cmp .col{padding:44px 44px 40px}
.hp .cmp .col.old{background:var(--g);box-shadow:inset 0 0 0 1px var(--line)}
.hp .sg-alt .cmp .col.old{background:var(--g2-card,#fff)}
.hp .cmp .col.new{background:var(--dk);color:var(--inkD)}
.hp .cmp .col.new.light{background:var(--tint);color:var(--ink)}
.hp .cmp .ttl{font-stretch:var(--fs);font-weight:var(--fw2,650);font-size:27px;line-height:1.04;margin:12px 0 26px;letter-spacing:.006em;text-transform:var(--tt2,none)}
.hp .cmp ul{list-style:none;margin:0;padding:0}
.hp .cmp li{display:flex;gap:16px;align-items:baseline;font-size:17.5px;line-height:1.45;padding:14px 0;border-top:1px solid var(--line)}
.hp .cmp .new li{border-top-color:var(--lineD)}
.hp .cmp .new.light li{border-top-color:var(--line)}
.hp .cmp .old li{color:var(--ink2)}
.hp .cmp .mk{flex:none;width:12px;height:12px;position:relative;top:1px}
.hp .cmp .old .mk{border:1.5px solid var(--ink2);border-radius:999px;opacity:.6}
.hp .cmp .new .mk{background:var(--spark);-webkit-mask:var(--spark-svg) center/contain no-repeat;mask:var(--spark-svg) center/contain no-repeat;width:14px;height:14px}
.hp .cmp .wc{opacity:.85}

/* three ways in */
.hp .ways{padding-block:120px}
.hp .ways-top{text-align:left;margin-bottom:56px;display:flex;flex-direction:column;gap:18px}
.hp .cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr);gap:22px;align-items:stretch}
.hp .card{background:var(--card,#fff);padding:40px 36px 36px;display:flex;flex-direction:column;gap:16px;position:relative;box-shadow:var(--card-sh)}
.hp .card .ttl{font-stretch:var(--fs);font-weight:var(--fw2,650);font-size:29px;line-height:1;letter-spacing:.006em;margin:0;text-transform:var(--tt2,none)}
.hp .card .body{font-size:16px}
.hp .card ul{list-style:none;margin:6px 0 0;padding:0}
.hp .card li{font-size:15.5px;padding:11px 0;border-top:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.hp .card .acts{margin-top:auto;padding-top:12px;display:flex;gap:22px;align-items:center}
.hp .card.feat{background:var(--dk);color:var(--inkD);transform:translateY(-18px);box-shadow:0 30px 60px rgba(9,25,40,.22)}
.hp .card.feat li{border-top-color:var(--lineD)}
.hp .card.feat .muted{color:var(--ink2D)}
.hp .card.feat.light{background:var(--tint);color:var(--ink);box-shadow:0 18px 40px rgba(9,25,40,.10)}
.hp .card.feat.light li{border-top-color:var(--line)}
.hp .card .sub2{font-family:var(--f-mono);font-size:12.5px;opacity:.9}
.hp .card .price{font-stretch:var(--fs);font-weight:600;font-size:20px}
.hp .seal{position:absolute;right:26px;top:-36px;width:108px;height:108px}
.hp .card .wc{color:var(--acc)}
.hp .card.feat .wc{color:var(--ebD)}
.hp .card.feat.light .wc{color:var(--acc)}

/* methodology */
.hp .meth{padding-block:120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:60px;align-items:center}
.hp .meth .lines{list-style:none;margin:28px 0 0;padding:0}
.hp .meth .lines li{font-stretch:var(--fs);font-weight:var(--fw2,600);font-size:34px;line-height:1.05;letter-spacing:.006em;padding:20px 0;border-top:1px solid var(--line);text-transform:var(--tt2,none)}
.hp.em-color .meth .lines li .pay{color:var(--acc)}
.hp.t-weight .meth .lines li{font-weight:300}
.hp.t-weight .meth .lines li .pay{font-weight:780}
.hp.c0.em-color .meth .lines li .pay{color:inherit;font-weight:800}
.hp .venn svg{width:100%;height:auto;display:block}

/* about */
.hp .about{padding-block:120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.hp .duo{position:relative;height:640px}
.hp .duo .fr{position:absolute;background:var(--frame,#fff);padding:var(--frame-pad,14px);box-shadow:var(--frame-sh)}
.hp .duo .fr img{display:block;width:100%;height:100%;object-fit:cover}
/* Colleen and Scott at the same size (Scott, Oct 18), still staggered */
.hp .duo .c{left:0;top:0;width:46%;height:66%}
.hp .duo .s{right:0;top:16%;width:46%;height:66%}
.hp .duo .cap{position:absolute;font-size:12.5px}
.hp .duo .cap b{display:block;font-stretch:120%;font-weight:650;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.hp .duo .cap i{font-family:var(--f-serif);font-size:16px}
.hp .about .names{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
.hp .about .names b{font-stretch:var(--fs);font-weight:650;font-size:24px}
.hp .princ{list-style:none;margin:8px 0 6px;padding:0}
.hp .princ li{font-size:19px;line-height:1.4;padding:16px 0 16px 30px;border-top:1px solid var(--line);position:relative}
.hp .princ li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:12px;background:var(--spark);-webkit-mask:var(--spark-svg) center/contain no-repeat;mask:var(--spark-svg) center/contain no-repeat}

/* testimonials */
.hp .quotes{padding-block:120px}
.hp .quotes-top{display:flex;flex-direction:column;gap:18px;margin-bottom:52px}
.hp .qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hp .q{background:var(--qcard,#fff);padding:40px 36px 34px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--card-sh)}
.hp .q .mark{font-family:var(--f-serif);font-weight:500;font-size:84px;line-height:.6;color:var(--acc);height:36px}
.hp.c0 .q .mark{color:var(--ink2)}
.hp .q blockquote{margin:0;font-family:var(--f-serif);font-size:21px;line-height:1.45;font-weight:400}
.hp .q .who{margin-top:auto;display:flex;gap:14px;align-items:center;padding-top:18px;border-top:1px solid var(--line)}
.hp .q .ini,.hp .pullq .ini{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--g2);color:var(--ink);font-stretch:110%;font-weight:700;font-size:13px;letter-spacing:.06em;flex:none}
.hp .sg-alt .q .ini{background:var(--g)}
.hp .q .who b{display:block;font-weight:650;font-size:15.5px}
.hp .q .who span:not(.ini){display:block;font-size:13.5px;color:var(--ink2);line-height:1.35}

/* closer */
.hp .closer{padding-block:150px 140px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;overflow:hidden}
.hp .closer .fig{position:relative;height:460px}
.hp .closer .fig>svg{position:absolute;right:-180px;top:50%;transform:translateY(-50%);width:760px;height:auto;overflow:visible}
.hp .closer .h1{font-size:92px}
.hp.t-wide .closer .h1{font-size:68px}
.hp .closer .lead{margin-top:28px}
.hp .closer .btn{margin-top:40px}

/* footer */
.hp .ftr{padding-block:80px 40px}
.hp .ftr .row1{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1.2fr);gap:48px;padding-bottom:56px;border-bottom:1px solid var(--lineD)}
.hp .ftr .logo{width:210px}
.hp .ftr .links{columns:2;column-gap:36px}
.hp .ftr .links a{display:block;break-inside:avoid;padding:6px 0;font-size:15px}
.hp .ftr .links a small{display:block;font-stretch:120%;font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-top:2px}
.hp .ftr .news :is(h2,h4){margin:10px 0 6px;font-stretch:var(--fs);font-weight:650;font-size:26px}
.hp .ftr .field{display:flex;margin-top:18px;box-shadow:inset 0 0 0 1px var(--lineD)}
.hp .ftr .field span{flex:1;padding:15px 16px;font-size:14px;opacity:.55}
.hp .ftr .field .btn{padding:14px 18px;font-size:14px}
.hp .ftr .row2{display:flex;gap:28px;align-items:center;padding-top:26px;flex-wrap:wrap}
.hp .ftr .row2 .wc{font-size:10.5px;opacity:.65}
.hp .ftr .row2 .top{margin-left:auto}

/* plate (specimen) */
.hp .plate{background:var(--plate,#fff);box-shadow:var(--plate-sh);padding:26px 26px 20px;width:360px}
.hp .plate .pi{height:360px;display:flex;align-items:center;justify-content:center}
.hp .plate .pi img{max-height:100%;max-width:100%;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}
.hp .plate .pf{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}
.hp .plate .pf .typed{display:block;font-size:12.5px}
.hp .plate .pf .aside{font-size:17px;margin-top:4px;display:block}

/* texture */
.hp .grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:var(--grain-op,.06);background-image:url(/assets/if4/img/e2ec0dc861.jpg);background-size:320px auto;mix-blend-mode:soft-light}
.hp .sg-dark>*:not(.grain):not(.pattern){position:relative;z-index:2}
.hp .gridlines{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(90deg,var(--gridc) 0 1px,transparent 1px calc((100% - 2 * var(--mx)) / 12));background-position:var(--mx) 0;background-size:calc(100% - 2 * var(--mx)) 100%;background-repeat:no-repeat;opacity:.6}
.hp .vellum{background:rgba(255,255,255,.62);backdrop-filter:blur(2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}

/* social mode details (volume 10 and 11) */
.hp.social .eb{font-stretch:100%;font-weight:800;letter-spacing:.18em}
.hp.social .eb.ln::before{display:none}
.hp .torn{display:inline-block;background-size:100% 100%;padding:9px 18px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));transform:rotate(-2deg);font-weight:850;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#1d4a6e;align-self:flex-start}


/* fixes */
.hp .card.feat:not(.light) .btn,.hp .col.new:not(.light) .btn{background:var(--btnD);color:var(--btnDInk)}
.hp .card.feat:not(.light) .tl{color:var(--inkD)}
.hp.c0 .cmp .col.new.light{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.hp .sg-dark .stats,.hp .sg-dark .stats>div+div{border-color:var(--lineD)}
.hp .sg-dark .stats .wc{color:var(--ink2D)}
.hp .q .ini,.hp .pullq .ini{background:var(--tint)!important;color:var(--ink)}
.hp.c0 .q .ini{background:var(--g2)!important}
.hp footer.sg-dark{background:var(--dkF,#0b1f30)}
.hp.social footer.sg-dark{background:#173d5c}
.hp .hd .nb{white-space:nowrap}

/* phone */
@container (max-width:700px){
  .hp,.hp>*{--mx:22px}
  .hp .ann{flex-wrap:wrap;gap:8px 12px;font-size:13px;padding-block:10px;text-align:center}
  .hp .ann .sep,.hp .ann .dt{display:none}
  .hp .hdr{padding-block:16px}
  .hp .hdr .logo{width:132px}
  .hp .nav{display:none}
  .hp .hdr .menu{display:block}
  .hp .hero{grid-template-columns:minmax(0,1fr);padding-block:44px 36px;gap:28px}
  .hp .hero .fig{min-height:0;order:2}
  .hp .hero.has-panel .fig{margin-right:0}
  .hp .hero .panel{inset:0 calc(var(--mx) * -1)}
  .hp .h1{font-size:42px}.hp.t-stack .h1{font-size:52px}.hp.t-wide .h1{font-size:30px}
  .hp .h2{font-size:31px}.hp.t-stack .h2{font-size:40px}.hp.t-wide .h2{font-size:23px}
  .hp .lead{font-size:18px}
  .hp .hero .ctas{flex-wrap:wrap;gap:16px}
  .hp .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp .stats>div{padding:18px 0}
  .hp .stats>div+div{padding-left:12px}
  .hp .stats .num{font-size:34px}
  .hp .stats .wc{font-size:9.5px;letter-spacing:.14em}
  .hp .stats .tagline{grid-column:1 / -1;border-left:0!important;padding-left:0!important;border-top:1px solid var(--line)}
  .hp .prob,.hp .ways,.hp .quotes,.hp .about,.hp .meth{padding-block:64px}
  .hp .prob-top,.hp .cmp,.hp .cards,.hp .qs,.hp .meth,.hp .about,.hp .closer{grid-template-columns:minmax(0,1fr);gap:22px}
  .hp .cmp .col,.hp .card,.hp .q{padding:28px 22px}
  .hp .card.feat{transform:none}
  .hp .seal{width:84px;height:84px;top:-26px;right:16px}
  .hp .meth .lines li{font-size:25px}.hp.t-wide .meth .lines li{font-size:19px}
  .hp .duo{height:420px}
  .hp .closer{padding-block:80px}
  .hp .closer .h1{font-size:46px}.hp.t-wide .closer .h1{font-size:32px}
  .hp .closer .fig{height:260px}
  .hp .closer .fig>svg{width:420px;right:-120px}
  .hp .ftr .row1{grid-template-columns:minmax(0,1fr);gap:32px}
  .hp .plate{width:100%}
}
.hp .menu{display:none;width:26px;height:16px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.hp .menu::after{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:currentColor}

/* the loudness ladder: one row per loudness, the social colors turned down */
.hp .lad{display:flex;flex-direction:column;gap:8px;font-family:var(--f-sans)}
.hp .lad-row{display:grid;grid-template-columns:118px repeat(7,42px) 92px minmax(0,1fr);gap:8px;align-items:center}
.hp .lad-head{font-family:var(--f-mono);font-size:10.5px;color:var(--ink2)}
.hp .lad-head>div{text-align:center}
.hp .lad-lab{display:flex;flex-direction:column;gap:2px}
.hp .lad-lab b{font-stretch:82%;font-weight:720;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.hp .lad-lab span{font-family:var(--f-mono);font-size:10.5px;color:var(--ink2)}
.hp .lad-sw,.hp .lad-g{height:42px;box-shadow:inset 0 0 0 1px rgba(29,74,110,.12)}
.hp .lad-st{display:flex;align-items:flex-end;height:54px}
.hp .lad-st i{flex:1;display:block}
.hp .lad-hd{height:42px;display:flex;align-items:center;padding:0 12px;font-stretch:78%;font-weight:720;font-size:16px;line-height:1;text-transform:uppercase;letter-spacing:.004em;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(29,74,110,.12);white-space:nowrap;overflow:hidden}
.hp .lad-hd em{font-style:normal}


/* round two: grain you can see, patterns, soft corners, the footer step, quotes with one phrase that jumps */
.hp section,.hp footer{isolation:isolate}
.hp .grain.l{background-image:url(/assets/if4/img/3f4eeafade.png);mix-blend-mode:normal;opacity:var(--grain-op-l,.6);z-index:-1}
.hp .pattern{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hp .sg-dark .pattern{--patc:var(--patcD)}
.hp.pt-grid .pattern{background-image:repeating-linear-gradient(90deg,var(--patc) 0 1px,transparent 1px 120px);background-position:96px 0}
.hp.pt-dots .pattern{background-image:radial-gradient(var(--patc) 1.4px,transparent 1.6px);background-size:22px 22px}
.hp.pt-pin .pattern{background-image:repeating-linear-gradient(90deg,var(--patc) 0 1px,transparent 1px 9px)}
.hp.pt-hatch .pattern{background-image:repeating-linear-gradient(45deg,var(--patc) 0 1px,transparent 1px 14px)}
/* Scott: the hatch and the dots fade in, nothing at the bottom left, full strength at the top right */
.hp.pt-hatch .pattern,.hp.pt-dots .pattern{--patc:rgba(29,74,110,.36);-webkit-mask-image:linear-gradient(to top right,transparent 14%,rgba(0,0,0,.35) 45%,#000 96%);mask-image:linear-gradient(to top right,transparent 14%,rgba(0,0,0,.35) 45%,#000 96%)}
.hp.pt-hatch .sg-dark .pattern,.hp.pt-dots .sg-dark .pattern{--patc:rgba(255,255,255,.3)}
.hp.pt-rings .pattern{background-image:repeating-radial-gradient(circle at 88% 30%,transparent 0 22px,var(--patc) 22px 23px)}
.hp.pt-contour .pattern{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'%3E%3Cg fill='none' stroke='%231d4a6e' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M0 40 C60 10 120 70 180 40 S300 10 360 40'/%3E%3Cpath d='M0 80 C60 50 120 110 180 80 S300 50 360 80'/%3E%3Cpath d='M0 120 C60 90 120 150 180 120 S300 90 360 120'/%3E%3Cpath d='M0 160 C60 130 120 190 180 160 S300 130 360 160'/%3E%3Cpath d='M0 200 C60 170 120 230 180 200 S300 170 360 200'/%3E%3C/g%3E%3C/svg%3E")}
.hp.pt-contour .sg-dark .pattern{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='1'%3E%3Cpath d='M0 40 C60 10 120 70 180 40 S300 10 360 40'/%3E%3Cpath d='M0 80 C60 50 120 110 180 80 S300 50 360 80'/%3E%3Cpath d='M0 120 C60 90 120 150 180 120 S300 90 360 120'/%3E%3Cpath d='M0 160 C60 130 120 190 180 160 S300 130 360 160'/%3E%3Cpath d='M0 200 C60 170 120 230 180 200 S300 170 360 200'/%3E%3C/g%3E%3C/svg%3E")}
.hp.pt-half .pattern{background-image:radial-gradient(var(--patc) 2.1px,transparent 2.3px);background-size:12px 12px;-webkit-mask-image:linear-gradient(115deg,transparent 35%,#000 100%);mask-image:linear-gradient(115deg,transparent 35%,#000 100%)}
.hp .card,.hp .q,.hp .cmp .col,.hp .pullq{border-radius:var(--rad-card,0)}
.hp .card.feat{overflow:visible}
.hp footer.sg-dark{background:var(--dkF,var(--dk))}
.hp .qhl{font-family:var(--f-sans);font-style:normal;font-stretch:72%;font-weight:850;text-transform:uppercase;letter-spacing:-.004em;font-size:1.04em;line-height:1.05;color:var(--ink);background:linear-gradient(transparent 52%,var(--band) 52%,var(--band) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
.hp.c0 .qhl{background:linear-gradient(transparent 52%,#e3e0d5 52%,#e3e0d5 94%,transparent 94%)}
.hp .q .mark,.hp .pullq .mark{font-family:var(--f-serif);font-weight:500;font-size:120px;line-height:.62;height:52px;color:var(--spark)}
.hp .pullq{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 30px;align-items:start;background:var(--qcard,#fff);box-shadow:var(--card-sh);padding:48px 56px 44px;margin-bottom:22px}
.hp .pullq blockquote{margin:0;font-family:var(--f-serif);font-style:italic;font-size:34px;line-height:1.32;font-weight:400}
.hp .pullq .who{grid-column:2;display:flex;gap:14px;align-items:center;margin-top:10px}
.hp .pullq .who b{display:block;font-weight:650;font-size:16px}
.hp .pullq .who span:not(.ini){display:block;font-size:14px;color:var(--ink2)}
.hp .q blockquote{font-style:italic}
.hp .qs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (max-width:700px){
  .hp .pullq{grid-template-columns:minmax(0,1fr);padding:30px 24px 28px}
  .hp .pullq .who{grid-column:1}
  .hp .pullq blockquote{font-size:24px}
  .hp .pullq .mark{font-size:90px;height:40px}
  .hp .qs.two{grid-template-columns:minmax(0,1fr)}
}

/* the second action: Scott said no to the outline button and the underlined link, so it gets a new look */
.hp.sb-tint .tl{border-bottom:0;padding:15px 22px;background:var(--sbt,var(--tint));color:var(--ink);border-radius:var(--rad,0);gap:10px}
.hp.sb-tint .sg-dark .tl,.hp.sb-tint .card.feat:not(.light) .tl,.hp.sb-tint .col.new:not(.light) .tl{background:rgba(255,255,255,.13);color:var(--inkD)}
.hp.sb-tint .hdr .tl{padding:11px 16px}
.hp.sb-arrow .tl{border-bottom:0;padding:0;gap:12px}
.hp.sb-arrow .tl .arr{width:34px;height:34px;border-radius:999px;background:var(--btn);color:var(--btnInk);flex:none}
.hp.sb-arrow .tl .arr::before{left:9px;right:10px;top:16.25px}
.hp.sb-arrow .tl .arr::after{right:10px;top:13.25px}
.hp.sb-arrow .sg-dark .tl .arr,.hp.sb-arrow .card.feat:not(.light) .tl .arr{background:var(--btnD);color:var(--btnDInk)}
.hp.sb-arrow .sg-dark .tl,.hp.sb-arrow .card.feat:not(.light) .tl{color:var(--inkD)}
.hp .card.feat .seal ~ .wc{padding-right:86px}

/* ===== quotes, round three: one collection, many formats, more separation, less air ===== */
.hp .q{padding:30px 28px 24px;gap:16px}
.hp .q blockquote{font-size:19.5px;line-height:1.42}
.hp .q .mark,.hp .pullq .mark{color:var(--qi,var(--spark))}
.hp .q .mark{font-size:86px;height:34px}
.hp .ini.sp::before,.hp .qav.sp::before{content:"";display:block;width:15px;height:15px;background:var(--qi,var(--ink));-webkit-mask:var(--spark-svg) center/contain no-repeat;mask:var(--spark-svg) center/contain no-repeat}
.hp .qw{--qgap:16px}
.hp .qw-card{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;align-items:stretch}
.hp .qc{display:flex;flex-direction:column;gap:3px;margin-top:14px}
.hp .qc b{font-stretch:120%;font-weight:650;font-size:11px;letter-spacing:.17em;text-transform:uppercase}
.hp .qc span{font-family:var(--f-mono);font-size:12px;line-height:1.35;color:var(--ink2)}
.hp .qest{display:inline-block;align-self:flex-start;margin-top:10px;font-family:var(--f-mono);font-size:10.5px;color:#7a5c00;background:#fdf1a8;border-radius:4px;padding:2px 7px}
.hp .qmore{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.hp .qmore .btn{border:0;cursor:pointer;font-family:inherit}
.hp .qcount{font-family:var(--f-mono);font-size:12px;color:var(--ink2)}

/* palette notes: tinted notes in a masonry, quotes in the sans, the phrase on its own color band */
.hp .qw-notes{display:flex;gap:var(--qgap);align-items:flex-start}
.hp .qw-notes .qcol{flex:1;min-width:0;display:flex;flex-direction:column}
/* Scott, final round: the color stays on the outline, the inside goes three quarters of the way to white, so the words pop instead of the section */
.hp .qn{break-inside:avoid;margin:0 0 var(--qgap);background:var(--qs,var(--qt));box-shadow:inset 0 0 0 2px var(--qo,var(--qt));border-radius:var(--rad-card,0);padding:18px 20px 16px;display:flex;flex-direction:column}
.hp .qn .qm{font-family:var(--f-serif);font-weight:600;font-size:60px;line-height:.62;height:24px;color:var(--qi)}
.hp .qn blockquote{margin:0;font-size:16px;line-height:1.46;font-weight:450}
.hp .qn .qhl{font-size:1.08em}

/* hairline index: no boxes at all, a ledger of hairlines, the phrase in colored capitals */
.hp .qw-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.hp .qx{margin:0;padding:20px 22px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.hp .qx .qno{font-family:var(--f-mono);font-size:12px;color:var(--qi);margin-bottom:8px;letter-spacing:.04em}
.hp .qx blockquote{margin:0;font-family:var(--f-serif);font-style:italic;font-size:18.5px;line-height:1.36}
.hp .qx .qhl{background:none;color:var(--qi);padding:0;font-size:1.02em}
.hp .qx .qc{margin-top:auto;padding-top:14px}
.hp .sg-dark .qw-index,.hp .sg-dark .qx{border-color:var(--lineD)}

/* big phrase tiles: the lifted phrase is the headline, the whole quote sits small under it */
.hp .qw-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-flow:dense;gap:12px}
.hp .qt{margin:0;padding:22px 22px 18px;border-radius:var(--rad-card,0);display:flex;flex-direction:column;gap:12px}
.hp .qt.w2{grid-column:span 2}
.hp .qt .qbig{font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:31px;line-height:.92;letter-spacing:-.005em;text-wrap:balance}
.hp .qt.w2 .qbig{font-size:44px}
.hp .qt blockquote{margin:auto 0 0;font-size:13.5px;line-height:1.45;opacity:.92}
.hp .qt .qc{margin-top:0}
.hp .qt.k0{background:var(--dk);color:#fff}.hp .qt.k0 .qbig{color:var(--qd)}.hp .qt.k0 .qc span{color:rgba(255,255,255,.72)}
.hp .qt.k1{background:var(--qy);color:var(--ink)}
.hp .qt.k2{background:#fff;color:var(--ink);box-shadow:var(--card-sh)}.hp .qt.k2 .qbig{color:var(--qi)}
.hp .qt.k3{background:var(--ql);color:var(--ink)}.hp .qt.k3 .qc span,.hp .qt.k1 .qc span{color:var(--ink)}

/* chat: what people said, the way they said it */
.hp .qw-chat{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px 20px;align-items:start}
.hp .qch{display:flex;gap:12px;align-items:flex-end}
.hp .qch.r{flex-direction:row-reverse}
.hp .qav{flex:none;width:40px;height:40px;border-radius:999px;background:var(--qt2);color:var(--qi);display:grid;place-items:center;font-stretch:110%;font-weight:750;font-size:13px;letter-spacing:.04em}
.hp .qch .qb{margin:0;background:#fff;border-radius:18px 18px 18px 5px;padding:14px 16px 12px;box-shadow:var(--card-sh);flex:1;min-width:0}
.hp .qch.r .qb{border-radius:18px 18px 5px 18px;background:var(--qt)}
.hp .qch .qb blockquote{margin:0;font-size:15.5px;line-height:1.46}
.hp .qch .qc{margin-top:10px}

/* torn paper: the social paper Scott likes, laid out a notch calmer */
.hp .qw-paper{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:40px 22px;align-items:start;padding-top:18px}
.hp .qp{margin:0;position:relative;border:22px solid transparent;border-image:url(/assets/if4/img/7314771f96.webp) 34 fill stretch;padding:14px 8px 4px;transform:rotate(var(--rot,0deg));filter:drop-shadow(0 8px 12px rgba(16,34,52,.16))}
.hp .qp.y{border-image-source:url(/assets/if4/img/2adfc60273.webp)}
.hp .qp .qtab{position:absolute;left:-8px;top:-40px;height:32px;padding:0 18px;display:flex;align-items:center;background:url(/assets/if4/img/1edf910c71.png) center/100% 100% no-repeat;font-stretch:120%;font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.hp .qp .qtab.n{background-image:url(/assets/if4/img/cf8b63641d.png);color:#fff}
.hp .qp .qtab.v{background-image:url(/assets/if4/img/04487dcb57.png);color:#fff}
.hp .qp blockquote{margin:0;font-family:var(--f-serif);font-size:19px;line-height:1.36}
.hp .qp .qc span{color:var(--ink)}

/* ticker: two strips of lifted phrases drifting in opposite directions */
.hp .qw-ticker{display:flex;flex-direction:column;gap:18px;background:var(--dk);color:#fff;padding:30px 0;border-radius:var(--rad-card,0);overflow:hidden}
.hp .qtk-row{overflow:hidden;white-space:nowrap}
.hp .qtk-track{display:inline-flex;gap:38px;padding-left:38px;animation:qtk 110s linear infinite}
.hp .qtk-row.r .qtk-track{animation-direction:reverse;animation-duration:130s}
.hp .qtk-i{display:inline-flex;align-items:baseline;gap:12px}
.hp .qtk-i b{font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:36px;line-height:1;color:var(--qd)}
.hp .qtk-i span{font-family:var(--f-mono);font-size:12px;color:rgba(255,255,255,.72)}
.hp .qtk-i::after{content:"";align-self:center;width:14px;height:14px;margin-left:26px;background:rgba(255,255,255,.45);-webkit-mask:var(--spark-svg) center/contain no-repeat;mask:var(--spark-svg) center/contain no-repeat}
@keyframes qtk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hp .qtk-track{animation:none}}
@container (max-width:700px){
  .hp .qt.w2{grid-column:span 1}.hp .qt.w2 .qbig{font-size:34px}
  .hp .qw-notes{flex-direction:column;gap:0;align-items:stretch}
  .hp .qw-notes .qcol{display:contents}
}

/* ===== final round ===== */
/* the menus: Work With Us opens a wide panel with the cohort featured, Resources a short list */
.hp .hdr{position:relative;z-index:30}
.hp .ddw{position:relative;display:flex;align-items:center}
.hp .ddw>.dd{cursor:pointer;padding:8px 0}
.hp .ddp{position:absolute;top:calc(100% + 16px);left:-26px;z-index:40;background:#fff;color:var(--ink);border-radius:var(--rad-card,0);box-shadow:0 0 0 1px rgba(29,74,110,.07),0 26px 64px rgba(16,34,52,.2);padding:10px;display:none;text-align:left;font-weight:400}
.hp .ddp::before{content:"";position:absolute;left:46px;top:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg);box-shadow:-1px -1px 0 rgba(29,74,110,.07)}
.hp .ddp::after{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.hp .ddw:hover .ddp,.hp .ddw.open .ddp,.hp .ddw:focus-within .ddp{display:flex}
.hp .ddw:hover>.dd::after,.hp .ddw.open>.dd::after{transform:rotate(225deg) translate(-3px,-1px)}
.hp .ddp a{color:inherit;text-decoration:none;cursor:pointer}
.hp .ddp-work{width:740px;gap:10px}
.hp .ddf{flex:1.08;display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:var(--tint);border-radius:calc(var(--rad-card,0px) * .8);padding:24px 24px 22px}
.hp .ddk{font-stretch:118%;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.hp .ddt{font-stretch:var(--fs);font-weight:var(--fw2,800);text-transform:uppercase;font-size:27px;line-height:.98;letter-spacing:.004em}
.hp .dds{font-family:var(--f-mono);font-size:12.5px;color:var(--ink2)}
.hp .ddc{display:flex;align-items:center;gap:8px;font-weight:650;font-size:14px;color:var(--ink)}
.hp .ddc i,.hp .spot-cd i{width:8px;height:8px;border-radius:50%;background:var(--live,#e84eb4);box-shadow:0 0 0 0 rgba(232,78,180,.55);animation:livepulse 2.2s ease-out infinite;flex:none}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(232,78,180,.55)}70%{box-shadow:0 0 0 9px rgba(232,78,180,0)}100%{box-shadow:0 0 0 0 rgba(232,78,180,0)}}
.hp .ddacts{display:flex;gap:16px;align-items:center;margin-top:8px}
.hp .ddacts .btn{padding:12px 18px;font-size:14px}
.hp .ddl{flex:1;display:flex;flex-direction:column}
.hp .ddi{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:18px 18px 16px;border-radius:calc(var(--rad-card,0px) * .8)}
.hp .ddi+.ddi{border-top:1px solid var(--line)}
.hp .ddi:hover{background:var(--g)}
.hp .ddi b{font-stretch:var(--fs);font-weight:var(--fw2,800);text-transform:uppercase;font-size:19px;line-height:1.02}
.hp .ddi span{font-family:var(--f-mono);font-size:12px;color:var(--ink2);align-self:center;text-align:right}
.hp .ddi i{grid-column:1/-1;font-style:normal;font-size:14px;line-height:1.45;color:var(--ink2)}
.hp .ddp-res{width:360px;flex-direction:column}
.hp .ddp-res .ddi span{text-align:right}
.hp .hdr.sg-dark .ddw>.dd{color:var(--inkD)}
.hp .mnav{display:none}
@media (prefers-reduced-motion:reduce){.hp .ddc i,.hp .spot-cd i{animation:none}}

/* the spotlight rule: one urgent thing per section, and everything else in that section steps back */
.hp .spot .ways-top .torn.quiet{color:var(--ink);filter:drop-shadow(0 4px 8px rgba(16,34,52,.14))}
.hp .spot .ways-top .eb.quiet{color:var(--ink2)}
.hp .spot .card:not(.feat){box-shadow:none;background:transparent;outline:1px solid var(--line);outline-offset:-1px}
.hp .spot .card:not(.feat) .btn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.hp .spot .card.feat{transform:translateY(-30px) scale(1.045);z-index:3;box-shadow:0 0 0 3px var(--spotRing,#f39bd3),0 0 0 9px rgba(243,155,211,.18),0 40px 90px rgba(9,25,40,.42)}
.hp .spot .card.feat .btn{padding:17px 30px;font-size:17px}
.hp .spot-seal{position:absolute;right:-34px;top:-46px;width:140px;height:140px;filter:drop-shadow(0 12px 20px rgba(9,25,40,.32));z-index:4}
.hp .spot-seal .ring{transform-origin:100px 100px;animation:spotspin 26s linear infinite}
@keyframes spotspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hp .spot-seal .ring{animation:none}}
.hp .spot .card.feat .seal ~ .wc,.hp .spot .card.feat .spot-seal ~ .wc{padding-right:92px}
.hp .spot-cd{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#fff;background:rgba(255,255,255,.1);border-radius:999px;padding:9px 14px;align-self:flex-start}
.hp .card.feat.light .spot-cd{color:var(--ink);background:rgba(29,74,110,.07)}

/* other ways to lift the payoff word */
.hp .sg-light{--secg:var(--g)} .hp .sg-alt{--secg:var(--g2)} .hp .sg-dark{--secg:var(--dk)}
.hp.em-band.hl-tonal .sg-dark .pay{color:#fff;background:rgba(255,255,255,.17)}
.hp.em-band.hl-knockout .pay{color:#fff;background:var(--ink);padding:.04em .14em 0}
.hp.em-band.hl-knockout .sg-dark .pay{color:var(--dk);background:#fff}
/* the glow: the same pool of light as before, now finished on every side. The extra .3em below the word gives the light room to fade out
   before the edge of its box, so the bottom softens like the top and the sides. Negative margins keep the words exactly where they were. */
.hp.em-band.hl-glow .pay{background:radial-gradient(60% 62.7% at 50% 48.6%,rgba(246,226,112,.95) 0,rgba(246,226,112,.82) 22%,rgba(246,226,112,.62) 42%,rgba(246,226,112,.4) 58%,rgba(246,226,112,.18) 70%,rgba(246,226,112,.06) 77%,rgba(246,226,112,0) 82%);padding:0 .18em .3em;margin:0 -.18em}
.hp.em-band.hl-glow .sg-dark .pay{color:#fff;background:none;text-shadow:0 0 .2em rgba(246,226,112,.95),0 0 .65em rgba(246,226,112,.6);padding:0 .04em;margin:0}
.hp.em-band.hl-halftone .pay{background:linear-gradient(var(--secg,var(--g)) 48%,transparent 48%,transparent 96%,var(--secg,var(--g)) 96%),linear-gradient(90deg,var(--secg,var(--g)) 0,rgba(0,0,0,0) 34%),radial-gradient(circle closest-side,var(--hd,rgba(29,74,110,.62)) 0 74%,transparent 82%) 0 0/.15em .15em;padding:0 .06em}
.hp.em-band.hl-halftone .sg-dark .pay{color:#fff;--hd:rgba(246,226,112,.95)}
.hp.em-band.hl-circle .pay{background:var(--hl-circle) center/100% 100% no-repeat;padding:.15em .32em .12em;margin:-.08em -.16em}
.hp.em-band.hl-circle .sg-dark .pay{color:#fff;background:var(--hl-circleD) center/100% 100% no-repeat}
.hp.em-band.hl-swash .pay{background:var(--hl-swash) left 0 bottom .03em/100% .44em no-repeat;padding:0 .05em .07em}
.hp.em-band.hl-swash .sg-dark .pay{color:#fff;background:var(--hl-swashD) left 0 bottom .03em/100% .44em no-repeat}
@container (max-width:700px){
  .hp .hdr.mopen .mnav{display:flex}
  .hp .mnav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:16px;background:#fff;color:var(--ink);padding:18px var(--mx) 24px;box-shadow:0 24px 50px rgba(16,34,52,.2);z-index:40}
  .hp .mnav .mg{display:flex;flex-direction:column}
  .hp .mnav .mg .wc{margin-bottom:6px;color:var(--acc)}
  .hp .mnav .mg a{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-top:1px solid var(--line);color:inherit}
  .hp .mnav b{font-stretch:var(--fs);font-weight:var(--fw2,800);text-transform:uppercase;font-size:18px;line-height:1.05}
  .hp .mnav span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink2)}
  .hp .mnav .mf span{color:var(--ink);font-family:inherit;font-weight:650;font-size:13px}
  .hp .mnav>.btn{align-self:flex-start}
  .hp .spot .card.feat{transform:none}
  .hp .spot-seal{width:100px;height:100px;right:-6px;top:-34px}
  .hp .spot .card.feat .spot-seal ~ .wc{padding-right:84px}
}

/* ===== the five directions ===== */
/* margin notes (Field notes) */
.hp .anno{position:absolute;z-index:6;display:flex;align-items:center;gap:2px;font-family:var(--f-mono);font-size:14px;line-height:1.2;color:#456a88;pointer-events:none;white-space:nowrap}
.hp .sg-dark .anno{color:rgba(255,255,255,.75)}
.hp .anno svg{width:60px;height:40px;flex:none}
.hp .anno.a-r,.hp .anno.a-dr,.hp .anno.a-ur{flex-direction:row-reverse}
.hp .anno.a-d{flex-direction:column-reverse;align-items:flex-start}
.hp .anno.a-u{flex-direction:column;align-items:flex-start}
.hp .anno.a-dl,.hp .anno.a-dr{align-items:flex-start}
.hp .anno.a-dl svg,.hp .anno.a-dr svg{margin-top:12px}
.hp .anno.a-ul,.hp .anno.a-ur{align-items:flex-end}
.hp .anno.a-ul svg,.hp .anno.a-ur svg{margin-bottom:12px}
.hp.dir-notes{counter-reset:sec}
.hp.dir-notes .eb.ln{counter-increment:sec}
.hp.dir-notes .eb.ln::before{content:counter(sec,decimal-leading-zero);width:auto;height:auto;background:none;font-family:var(--f-mono);font-weight:400;letter-spacing:0;font-size:12px;opacity:.85;padding:3px 7px;border:1px solid currentColor;border-radius:999px}
.hp.dir-notes .meth .venn::after{content:"Fig. 2, the If Methodology.";display:block;margin-top:10px;font-family:var(--f-mono);font-size:13px;color:#456a88}

/* the launch sticker and countdown */
.hp .sticker{position:absolute;left:4%;top:3%;z-index:5;width:150px;height:150px;border-radius:50%;background:var(--stk,#e84eb4);color:#143651;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;transform:rotate(-9deg);box-shadow:0 14px 28px rgba(16,34,52,.28),inset 0 0 0 5px rgba(255,255,255,.35)}
.hp .sticker b{font-stretch:72%;font-weight:850;text-transform:uppercase;font-size:27px;line-height:.9;max-width:110px}
.hp .sticker span{font-family:var(--f-mono);font-size:11px;max-width:112px;line-height:1.25}
.hp .ann.launch{background:var(--dk);color:#fff;padding-block:15px}
.hp .ann.launch .wc{color:#f39bd3}
.hp .ann.launch .dt{font-weight:700}
.hp .ann .dot.live{background:#f39bd3;animation:livepulse 2.2s ease-out infinite}
.hp .tickband{padding-block:0}
.hp .tickband .qw-ticker{border-radius:0}
.hp .closer .closer-card{position:relative;max-width:470px;margin-left:auto;transform:none;box-shadow:0 0 0 3px #f39bd3,0 0 0 9px rgba(243,155,211,.18),0 40px 90px rgba(0,0,0,.4)}
.hp .closer .fig .closer-card{position:relative}
.hp .closer .closer-card .btn{margin-top:4px}
.hp.dir-launch .closer .fig{height:auto}

/* Let the light in */
.hp.dir-light{--spotRing:#f6e270}
.hp.dir-light .spot .card.feat{box-shadow:0 0 0 3px #f6e270,0 0 40px 10px rgba(246,226,112,.32),0 40px 90px rgba(9,25,40,.42)}
.hp.dir-light .eb.ln::before{width:8px;height:8px;border-radius:50%;background:#f2cf3c;opacity:1;box-shadow:0 0 0 4px rgba(246,226,112,.28),0 0 14px 2px rgba(246,226,112,.7)}
.hp.dir-light [data-sec="closer"]::after,.hp.dir-light [data-sec="problem"] .col.new::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(246,226,112,0) 38%,rgba(246,226,112,.09) 47%,rgba(246,226,112,0) 56%),linear-gradient(104deg,rgba(246,226,112,0) 56%,rgba(246,226,112,.06) 64%,rgba(246,226,112,0) 72%);z-index:1}
.hp.dir-light .hero .fig::before{content:"";position:absolute;inset:-6% -10%;background:radial-gradient(closest-side,rgba(246,226,112,.22),rgba(246,226,112,0));pointer-events:none}
/* the shafts of light sit behind the words, so white type stays pure white */
.hp.dir-light [data-sec="problem"] .col.new>*,.hp.dir-light [data-sec="closer"] .closer{position:relative;z-index:2}
/* the announcement bar: white words, and the dot is lit like the eyebrows */
.hp.dir-light .ann .dot{background:#f2cf3c;box-shadow:0 0 0 3px rgba(246,226,112,.26),0 0 12px 2px rgba(246,226,112,.7)}
.hp.dir-light .ann.launch .dot.live{background:#f2cf3c}

/* Halftone */
.hp .duo.ht .fr{background:none;padding:0;box-shadow:none}
.hp .duo.ht .fr img{object-fit:contain;object-position:50% 50%}
.hp.dir-halftone .sg-dark:not(footer)::before{content:"";position:absolute;left:0;right:0;top:-56px;height:56px;background:radial-gradient(circle,var(--dk) 0 46%,transparent 50%) 0 0/12px 12px;-webkit-mask:linear-gradient(rgba(0,0,0,0),#000);mask:linear-gradient(rgba(0,0,0,0),#000);pointer-events:none;z-index:2}
.hp.dir-halftone footer.sg-dark::before{display:none}
.hp.dir-halftone .card.feat::after{content:"";position:absolute;right:0;bottom:0;width:62%;height:56%;background:radial-gradient(circle,rgba(255,255,255,.16) 0 40%,transparent 46%) 0 0/9px 9px;-webkit-mask:linear-gradient(to top left,#000,rgba(0,0,0,0) 75%);mask:linear-gradient(to top left,#000,rgba(0,0,0,0) 75%);border-radius:inherit;pointer-events:none}

/* Gallery */
.hp.dir-gallery .ways,.hp.dir-gallery .about,.hp.dir-gallery .meth,.hp.dir-gallery .quotes{padding-block:150px}
.hp.dir-gallery .prob{padding-block:150px}
.hp.dir-gallery .duo .fr{padding:22px;box-shadow:0 0 0 1px rgba(29,74,110,.12),0 18px 40px rgba(16,34,52,.12)}
.hp.dir-gallery .duo .cap{background:#fff;padding:10px 14px 9px;box-shadow:0 0 0 1px rgba(29,74,110,.14);min-width:180px}
.hp.dir-gallery .duo .cap i{font-size:14.5px}
.hp.dir-gallery .hero{padding-block:110px 100px}

@container (max-width:700px){
  .hp .anno{display:none}
  .hp .sticker{width:112px;height:112px;left:0;top:0}
  .hp .sticker b{font-size:20px;max-width:90px}
  .hp .sticker span{font-size:9.5px;max-width:90px}
  .hp .closer .closer-card{margin:10px 0 0}
  .hp.dir-gallery .ways,.hp.dir-gallery .about,.hp.dir-gallery .meth,.hp.dir-gallery .quotes,.hp.dir-gallery .prob{padding-block:72px}
}
/* spotlight variants */
.hp .spv-banner .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:34px}
.hp .spv-banner .card.feat{grid-column:1/-1;order:-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:48px;row-gap:12px;grid-auto-flow:row dense;transform:none;align-items:start}
.hp .spv-banner .card.feat>*{grid-column:1}
.hp .spv-banner .card.feat>.spot-cd,.hp .spv-banner .card.feat>ul,.hp .spv-banner .card.feat>.acts{grid-column:2}
.hp .spv-banner .card.feat>.spot-cd{align-self:start}
.hp .spv-banner .card.feat .ttl{font-size:44px}
.hp .spv-banner .card.feat .spot-seal{right:24px;top:-50px}
.hp .ribbon{position:absolute;right:0;top:0;width:150px;height:150px;overflow:hidden;border-radius:0 var(--rad-card,0) 0 0;pointer-events:none;z-index:4}
.hp .ribbon span{position:absolute;right:-48px;top:30px;width:210px;transform:rotate(45deg);background:#f39bd3;color:#143651;text-align:center;font-stretch:80%;font-weight:850;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:9px 0;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.hp .spv-ribbon .card.feat .ribbon ~ .wc{padding-right:80px}
.hp .spv-violet .card.feat{background:#43289a}
.hp .spv-violet .card.feat .btn{background:#fff;color:#2e1a73}
.hp .spv-violet .card.feat .wc{color:#f39bd3}
.hp .spv-violet .card.feat li{border-top-color:rgba(255,255,255,.2)}
@container (max-width:700px){.hp .spv-banner .cards{grid-template-columns:minmax(0,1fr)}.hp .spv-banner .card.feat{grid-template-columns:minmax(0,1fr)}.hp .spv-banner .card.feat>*{grid-column:1!important}}
.hp .ratio{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-size:18px;color:var(--ink2)}
.hp .ratio b{font-stretch:80%;font-weight:800;font-size:30px;color:var(--ink)}
.hp .ddp-work{left:-226px}
.hp .ddp-work::before{left:262px}
.hp .spot .ways-top{margin-bottom:100px}
.hp .spv-banner .card.feat .spot-seal{left:calc(55% - 170px);right:auto;top:-64px}

/* ===== the button, in the light: three ways a call to action can belong to Let the light in =====
   door: navy by day with warm light around its edges, like a door about to open; warm white with a glow at night.
   lamp: the light itself, warm yellow with navy type, day and night.
   sunrise: first light, a wash from warm yellow into soft pink, navy type, day and night.
   Every label is navy on light or white on navy at 9 to 1 or better. The glow grows a little on hover, the door opening. */
.hp.btn-door .btn,.hp.btn-lamp .btn,.hp.btn-sunrise .btn{transition:box-shadow .25s ease,transform .25s ease}
.hp.btn-door .btn{box-shadow:0 0 0 1px #f6e270,0 0 12px 2px rgba(246,226,112,.8),0 0 32px 8px rgba(246,226,112,.36)}
.hp.btn-door .btn:hover{box-shadow:0 0 0 1px #f6e270,0 0 16px 4px rgba(246,226,112,.9),0 0 44px 14px rgba(246,226,112,.46)}
.hp.btn-door .sg-dark .btn,.hp.btn-door .card.feat:not(.light) .btn,.hp.btn-door .col.new:not(.light) .btn{box-shadow:0 0 0 1px rgba(255,248,225,.9),0 0 16px 3px rgba(246,226,112,.62),0 0 42px 12px rgba(246,226,112,.26)}
.hp.btn-lamp .btn{box-shadow:0 0 0 1px rgba(176,146,24,.28),0 0 20px 4px rgba(246,226,112,.55)}
.hp.btn-lamp .btn:hover{box-shadow:0 0 0 1px rgba(176,146,24,.32),0 0 28px 8px rgba(246,226,112,.7)}
.hp.btn-lamp .sg-dark .btn,.hp.btn-lamp .card.feat:not(.light) .btn,.hp.btn-lamp .col.new:not(.light) .btn{box-shadow:0 0 22px 5px rgba(246,226,112,.5),0 0 54px 14px rgba(246,226,112,.2)}
.hp.btn-sunrise .btn{box-shadow:0 0 0 1px rgba(196,120,120,.18),0 10px 26px rgba(242,170,160,.38)}
.hp.btn-sunrise .btn:hover{box-shadow:0 0 0 1px rgba(196,120,120,.22),0 12px 34px rgba(242,170,160,.5)}
.hp.btn-sunrise .sg-dark .btn,.hp.btn-sunrise .card.feat:not(.light) .btn,.hp.btn-sunrise .col.new:not(.light) .btn{box-shadow:0 0 26px 6px rgba(249,205,190,.38)}

/* v4 samples: the countdown seal placed by its wrapper */
.hp .v4seal .spot-seal{position:static!important;display:block;width:100%!important;height:auto!important;transform:none!important}
.hp .v4seal .seal,.v4seal .seal{position:static!important;display:block;width:100%!important;height:auto!important;top:auto!important;right:auto!important}