@font-face{font-family:SE Display;src:url('assets/fonts/display.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:SE Serif;src:url('assets/fonts/serif.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:SE Wordmark;src:url('assets/fonts/wordmark.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap}
:root{--ink:#171817;--paper:#fafaf5;--aqua:#65e3d4;--ease:cubic-bezier(.16,1,.3,1);--header-height:96px;color-scheme:light;scroll-behavior:smooth;scroll-padding-top:112px;background:var(--paper);overscroll-behavior-y:none}
*{box-sizing:border-box}
body{margin:0;padding-top:var(--header-height);background:var(--paper);color:var(--ink);font:16px/1.85 "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--aqua);color:var(--ink)}
a{color:inherit;text-decoration:none;text-underline-offset:.3em}
a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
h1,p{margin:0}
.skip{position:fixed;top:-100px;left:20px;background:var(--paper);padding:12px;z-index:50}
.skip:focus{top:8px}
.container{width:min(1440px,88%);margin-inline:auto}
.header{position:fixed;inset:0 0 auto;height:var(--header-height);background:var(--paper);z-index:20}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #17181733}
.brand{display:flex;align-items:baseline;gap:12px;flex-shrink:0}
.wordmark{font:italic 900 30px/1 "SE Wordmark",sans-serif;letter-spacing:-.04em;white-space:nowrap}
.edition{font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.01em;white-space:nowrap}
.cta{display:inline-flex;align-items:center;justify-content:space-between;position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-weight:700;line-height:1.5}
.header-cta{padding:13px 20px;gap:24px;font-size:13px;min-height:46px}
.arrow{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;flex:none}
.fv{min-height:calc(100svh - var(--header-height));display:flex;flex-direction:column}
.fv-body{flex:1;padding-block:clamp(72px,10.5vh,128px) 62px}
h1{font-weight:900;letter-spacing:-.035em;line-height:1.3}
.opening{display:block;font:900 clamp(78px,10.5vw,162px)/1.22 "SE Display",sans-serif;letter-spacing:-.035em;white-space:nowrap}
.opening-group{display:inline-block}
.letter-clip{display:inline-block;overflow:clip;vertical-align:top;padding-block:.08em;margin-block:-.08em}
.letter{display:inline-block}
.promise{display:flex;align-items:baseline;gap:.08em;font:900 clamp(48px,6.9vw,106px)/1.45 "SE Serif",serif;letter-spacing:-.04em;margin-top:18px;white-space:nowrap}
.highlight{position:relative;isolation:isolate;display:inline-block;padding:0 .07em .035em;margin-left:-.07em}
.highlight-bg{position:absolute;inset:.09em 0 .05em;background:var(--aqua);z-index:-1;transform-origin:left}
.highlight-text{display:inline-block}
.highlight::after{content:"";position:absolute;inset:.13em .01em .09em auto;width:max(3px,.05em);background:var(--ink);pointer-events:none;animation:caret-blink 1.3s step-end 1.35s infinite;opacity:0}
.reward{display:inline-block}
.description{font-size:clamp(15px,1.35vw,20px);font-weight:600;line-height:1.95;letter-spacing:.015em;margin-top:30px}
.description>span{display:block}
.phrase{display:inline-block}
.actions{margin-top:42px}
.main-cta{gap:44px;padding:23px 26px;font-size:16px}
.cta-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cta-outline rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:var(--aqua);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .55s var(--ease)}
.cta:is(:hover,:focus-visible) .cta-outline rect{stroke-dashoffset:0}
.cta:is(:hover,:focus-visible) .arrow{color:var(--aqua)}
.fv-edge{display:flex;align-items:center;justify-content:space-between;position:relative;border-top:1px solid var(--ink);padding-block:17px 19px;flex-shrink:0}
.fv-edge-line{position:absolute;top:-2px;left:0;right:0;height:3px;background:var(--ink);transform:scaleX(var(--fv-progress,0));transform-origin:left;pointer-events:none}
.fv-scroll{display:inline-flex;align-items:center;gap:18px;font-size:11px;font-weight:700;letter-spacing:.02em;min-height:28px}
.fv-scroll svg{width:14px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .3s var(--ease)}
.fv-scroll:is(:hover,:focus-visible) svg{transform:translateY(4px)}
html.is-hidden .highlight::after,html.is-hidden .cta-outline rect{animation-play-state:paused}
@keyframes caret-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes cta-enter{from{stroke-dashoffset:100;opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes cta-cue{0%,32%{stroke-dashoffset:100;opacity:1;animation-timing-function:var(--ease)}44%{stroke-dashoffset:0;opacity:1}50%,100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:no-preference){
 .cta:is(:hover,:focus-visible) .cta-outline rect{animation:cta-enter .65s linear both}
 .is-cue:not(:hover,:focus-visible) .cta-outline rect{animation:cta-cue 4.8s infinite}
}
@media(min-width:901px) and (max-height:850px){
 .fv-body{padding-block:5.5vh 36px}
 .opening{font-size:min(10.5vw,16vh)}
 .promise{font-size:min(6.9vw,10.3vh)}
 .description{margin-top:24px}
 .actions{margin-top:30px}
}
@media(max-width:900px){
 :root{--header-height:80px}
 .container{width:calc(100% - 48px)}
 .wordmark{font-size:26px}
 .edition{font-size:12px}
 .opening{font-size:11vw}
 .promise{font-size:7.3vw}
 .fv-body{padding-top:70px}
 .description{font-size:15px}
}
@media(max-width:600px){
 :root{--header-height:76px;scroll-padding-top:92px}
 .container{width:calc(100% - 40px)}
 .header-inner{gap:12px}
 .brand{display:block}
 .wordmark{display:block;font-size:23px}
 .edition{display:block;margin-top:5px;font-size:11px;line-height:1}
 .header-cta{font-size:11px;padding:11px 12px;gap:16px;min-height:44px}
 .header-cta .arrow{width:16px;height:16px}
 .fv{min-height:0}
 .fv-body{flex:none;padding-block:48px 56px}
 .opening{font-size:clamp(52px,14.6vw,85px);line-height:1.22;letter-spacing:-.04em;white-space:normal}
 .opening-group{display:block;white-space:nowrap}
 .promise{display:block;margin-top:22px;font-size:clamp(40px,11.1vw,64px);line-height:1.55;letter-spacing:-.035em;white-space:normal}
 .highlight,.reward{white-space:nowrap}
 .reward{display:block;margin-top:3px}
 .description{font-size:13px;line-height:2;margin-top:24px;letter-spacing:0;font-weight:500}
 .description>span+span{margin-top:5px}
 .actions{margin-top:28px}
 .main-cta{width:100%;padding:19px 20px;font-size:14px;gap:16px}
 .fv-edge{padding-block:12px}.fv-scroll{font-size:10px}
}
@media(max-width:360px){.container{width:calc(100% - 32px)}.wordmark{font-size:21px}.header-cta{gap:12px}.main-cta{font-size:13px;padding-inline:17px}}
@media(prefers-reduced-motion:reduce){.fv-edge-line{display:none}.fv-scroll svg{transition:none}:root{scroll-behavior:auto}.highlight::after{animation:none;opacity:1}.cta-outline rect{transition:none}}
