/* Two independent art directions. The published landing page does not load this file. */
html[data-concept]{--ink:#35251b;--dim:#5a3c29;--paper:#f5dfbf}
html[data-concept] body{position:relative;min-height:100svh;overflow-x:clip}
html[data-concept] header{position:absolute;inset:0 0 auto;z-index:12}
html[data-concept] header .in{height:96px;max-width:1440px;padding:0 6.3vw;justify-content:space-between}
html[data-concept] .lockup{gap:10px}
html[data-concept] .lockup img{width:37px;height:37px}
html[data-concept] .lockup canvas{height:36px;filter:brightness(.18) sepia(.4)}
.concept-switch{display:flex;gap:4px;border:1px solid #fff8;background:#fff6;padding:5px;border-radius:999px;backdrop-filter:blur(15px);box-shadow:0 4px 20px #57361b06}
.concept-switch a{font-size:12px;line-height:1.2;font-weight:600;padding:10px 16px;color:#503a2d;text-decoration:none;border-radius:999px;white-space:nowrap}
.concept-switch a[aria-current=page]{background:#fff8ed;box-shadow:0 2px 7px #593b2810}
html[data-concept] #hero{height:100svh;min-height:660px;--scene-room:0px;--phone-x:71%;--phone-w:calc(min(77svh,650px)/2.1045);--ground:11vh;--bw:260px;isolation:isolate;overflow:hidden}
html[data-concept] .stage{inset:0;z-index:auto}
.concept-backdrop,.concept-foreground{position:absolute;inset:0;background-image:var(--concept-art);background-size:cover;background-position:center center;pointer-events:none}
.concept-backdrop{z-index:0}
.concept-foreground{z-index:3;clip-path:polygon(0 77%,20% 76%,35% 77.5%,51% 76%,72% 77%,100% 76%,100% 100%,0 100%)}
.concept-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fff1d330,transparent 62%);z-index:0}
html[data-concept] .grid{max-width:1440px;padding:clamp(142px,19vh,180px) 6.3vw 0;margin:auto;z-index:4;pointer-events:none}
html[data-concept] .copy{width:48%;max-width:590px;text-align:left;margin:0}
html[data-concept] h1{font-size:clamp(48px,4.95vw,76px);line-height:1.025;letter-spacing:-.045em;font-weight:700;max-width:570px;text-wrap:balance;color:var(--ink);animation:copy-arrive 1.6s ease .2s both;margin:0}
html[data-concept] .sub{font-size:clamp(16px,1.35vw,19px);line-height:1.65;letter-spacing:-.014em;color:var(--dim);margin:24px 0 0;max-width:43ch;text-wrap:pretty;font-weight:450}
html[data-concept] .badges{margin:30px 0 0;gap:14px;justify-content:flex-start}
html[data-concept] .appbadge img{height:48px;width:auto}
.line-partner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;color:var(--dim);font-size:11px;letter-spacing:.005em}
.line-partner img{width:106px;height:auto;opacity:.8;mix-blend-mode:multiply}
html[data-concept] .phone-reveal{position:absolute;inset:0;z-index:2;overflow:hidden;height:auto;margin:0}
html[data-concept] .phonewrap{bottom:12vh;left:var(--phone-x);mask-image:none;-webkit-mask-image:none;filter:drop-shadow(0 22px 22px #3f201823)}
html[data-concept] #hero.is-revealing .phonewrap{animation:concept-phone-arrive 3.2s cubic-bezier(.25,.1,.2,1) .35s both}
@keyframes concept-phone-arrive{from{opacity:1;transform:translate(-50%,6vh)}to{opacity:1;transform:translate(-50%,0)}}
html[data-concept] .phone{box-shadow:inset 0 0 0 1px #858480,inset 0 0 0 3px #3c3c38,0 3px 8px #0002}
html[data-concept] #brown{z-index:6;filter:drop-shadow(0 3px 1px #45271516)}
html[data-concept] #bsh{z-index:5;opacity:.45}
html[data-concept] .brown-speech{z-index:8;background:#fff9ee;border-color:#b79a7670;font-size:13px;box-shadow:0 5px 24px #5030180b}
html[data-concept] footer{position:absolute;inset:auto 0 0;z-index:10;height:auto;padding:15px 6.3vw 18px;background:transparent}
html[data-concept] footer .in{max-width:1260px;border:0;padding:0;flex-wrap:nowrap;gap:20px}
html[data-concept] footer .fine,html[data-concept] footer a{color:#493d2e;font-size:10px;text-shadow:0 1px 4px #fff6}
html[data-concept] footer nav{gap:20px}
html[data-concept=sunset-desk]{--concept-art:url('sunset-desk.png');--ink:#3e2418;--dim:#62432d}
html[data-concept=sunset-desk] .concept-foreground{clip-path:polygon(0 78%,18% 75%,50% 74%,80% 72.5%,100% 73.5%,100% 100%,0 100%)}
html[data-concept=sunset-desk] #hero{--ground:12vh}
html[data-concept=sunset-desk] .phonewrap{filter:drop-shadow(9px 15px 20px #67351648)}
html[data-concept=line-world]{--concept-art:url('line-world.png');--ink:#392922;--dim:#4e4d3f}
html[data-concept=line-world] .concept-light{background:linear-gradient(90deg,#fffce625,transparent 65%)}
html[data-concept=line-world] .concept-switch{border-color:#fff9;background:#ffffff70}
html[data-concept=line-world] .concept-switch a[aria-current=page]{background:#fffef0}
html[data-concept=line-world] .brown-speech{border:2px solid #514133;box-shadow:2px 3px 0 #51413319}
@media(min-width:761px) and (max-height:750px){
 html[data-concept] #hero{min-height:600px;--bw:220px;--phone-w:calc(76svh/2.1045)}
 html[data-concept] .grid{padding-top:122px}
 html[data-concept] h1{font-size:clamp(46px,4.5vw,62px)}
 html[data-concept] .sub{font-size:16px;line-height:1.55;margin-top:20px}
 html[data-concept] .badges{margin-top:24px}
 html[data-concept] .appbadge img{height:44px}
 .line-partner{margin-top:18px}
}
@media(min-width:761px) and (max-width:1100px){
 html[data-concept] header .in{padding-left:5vw;padding-right:5vw}
 html[data-concept] .grid{padding-left:5vw;padding-right:5vw}
 html[data-concept] .copy{width:48%}
 html[data-concept] h1{font-size:clamp(42px,5.3vw,58px)}
 html[data-concept] .sub{font-size:15px}
 html[data-concept] #hero{--phone-x:74%;--phone-w:calc(min(72svh,590px)/2.1045)}
}
@media(max-width:760px){
 html[data-concept] header .in{height:80px;padding:0 22px;gap:12px}
 html[data-concept] .lockup{gap:7px}.lockup img{width:30px;height:30px}
 html[data-concept] .lockup canvas{height:25px}
 .concept-switch{padding:3px;gap:0}
 .concept-switch a{font-size:10px;padding:8px 10px}
 html[data-concept] #hero{height:auto;min-height:1040px;--phone-x:57%;--phone-w:224px;--ground:90px;--bw:180px}
 html[data-concept] .grid{padding:113px 26px 0;text-align:center}
 html[data-concept] .copy{width:100%;max-width:500px;margin:auto;text-align:center}
 html[data-concept] h1{font-size:47px;line-height:1.02;max-width:380px;margin:auto}
 html[data-concept] .sub{font-size:15px;line-height:1.6;margin:18px auto 0;max-width:34ch}
 html[data-concept] .badges{justify-content:center;margin:25px auto 0;gap:10px}
 html[data-concept] .appbadge img{height:42px}
 .line-partner{justify-content:center;margin-top:18px;font-size:10px;gap:10px}
 .line-partner img{width:94px}
 html[data-concept] .phonewrap{bottom:90px}
 html[data-concept] .concept-backdrop,html[data-concept] .concept-foreground{background-size:auto 100%;background-position:59% center}
 html[data-concept] .concept-foreground{clip-path:polygon(0 85%,30% 84%,60% 85%,100% 83.5%,100% 100%,0 100%)}
 html[data-concept] .concept-light{background:linear-gradient(#fff5e344 0%,transparent 65%)}
 html[data-concept=sunset-desk] #hero{--ground:75px}
 html[data-concept=sunset-desk] .concept-backdrop,html[data-concept=sunset-desk] .concept-foreground{background-position:48% center}
 html[data-concept=sunset-desk] .concept-foreground{clip-path:polygon(0 88%,40% 86%,100% 86%,100% 100%,0 100%)}
 html[data-concept] footer{padding:12px 20px}
 html[data-concept] footer .in{justify-content:center;flex-wrap:wrap;gap:5px;text-align:center}
 html[data-concept] footer .fine,html[data-concept] footer a{font-size:9px}
 html[data-concept] footer .fine{max-width:none}
 html[data-concept] .brown-speech{font-size:12px;max-width:160px}
}
@media(max-width:380px){
 html[data-concept] .lockup canvas{height:21px}
 html[data-concept] header .in{padding:0 16px}
 .concept-switch a{font-size:9px;padding:8px}
 html[data-concept] .grid{padding-left:20px;padding-right:20px}
 html[data-concept] h1{font-size:43px}
}
/* A complete phone with only a whisper of tilt above the illustrated meadow. */
.friend-word{white-space:nowrap}
html[data-concept=line-world] #hero{--phone-x:61%;--phone-w:calc(min(68svh,610px)/2.1045)}
html[data-concept=line-world] .phone-reveal{z-index:3}
html[data-concept=line-world] .phonewrap{bottom:calc(50% - var(--phone-w)*1.05225);filter:none}
.handheld-device{position:relative;transform:rotate(1deg);transform-origin:50% 50%;isolation:isolate}
.handheld-device .phone{z-index:1;transform:none;box-shadow:inset 0 0 0 2px #392922,inset 0 0 0 5px #766553,0 9px 0 #57493615!important;background:#392922}
@media(min-width:761px) and (max-width:1100px){
 html[data-concept=line-world] #hero{--phone-x:70%;--phone-w:calc(min(66svh,550px)/2.1045)}
}
@media(max-width:760px){
 html[data-concept=line-world] #hero{--phone-x:48%;--phone-w:190px;--ground:60px}
 html[data-concept=line-world] .phonewrap{top:465px;bottom:auto}
 .handheld-device{transform:rotate(1deg)}
}
@media(prefers-reduced-motion:reduce){
 html[data-concept] #hero .phonewrap{animation:none!important;transform:translateX(-50%);opacity:1}
 html[data-concept] h1,html[data-concept] .sub,html[data-concept] .rise{animation:none}
}