@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-var.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-var-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --ink:#1D2925; --copper:#A96242; --copper-hi:#C27A58;
  --white:#FFFFFF; --cool:#ECEEEE; --rule:#D3D8D7; --mute:#56615E;
  --eink:#E6E6E4; --etext:#1C1C1C;
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:10}
.skip:focus{left:12px;top:12px}
.get{font-weight:500;font-size:16px;text-decoration:none;letter-spacing:.005em;padding:10px 4px;border-bottom:1px solid transparent}
.get:hover{border-bottom-color:currentColor}

/* D · sleep screen */
.sleep{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto;justify-items:center;
  padding:clamp(72px,10vh,120px) 24px clamp(48px,9vh,96px);cursor:pointer;background:var(--white)}
.sleep::before{content:"";position:absolute;inset:clamp(10px,2vw,28px);border:1px solid var(--rule);pointer-events:none}
.sleep .get{position:absolute;top:clamp(22px,3.4vw,46px);right:clamp(26px,4vw,58px)}
.sleep__face{align-self:center;text-align:center}
.clock{margin:0;font-weight:110;font-size:clamp(116px,23vw,340px);line-height:.9;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;min-height:.9em}
.clock__c{font-weight:260;margin:0 .02em;position:relative;top:-.06em}
.wake{margin-top:clamp(18px,3vh,34px);font:400 clamp(18px,1.6vw,22px)/1.2 var(--sans);color:var(--ink);background:none;border:0;padding:10px 14px;cursor:pointer}
.sleep__logo{width:min(560px,78vw);align-self:end}

/* C · the e-ink page */
.page{background:var(--cool);padding:0 clamp(20px,4vw,58px) clamp(64px,8vw,110px);min-height:100svh}
.bar{display:flex;align-items:center;justify-content:space-between;padding:clamp(20px,2.6vw,34px) 0}
.bar__logo{width:clamp(180px,19vw,270px)}
.headline{margin:clamp(20px,2.4vw,40px) auto 0;text-align:center;font-weight:480;font-size:clamp(38px,min(4.9vw,7.4vh),76px);line-height:1.04;letter-spacing:-.028em;text-wrap:balance}
.headline span{display:block}
.support{margin:clamp(14px,1.6vw,22px) 0 0;text-align:center;font-size:clamp(17px,1.5vw,21px);color:var(--mute)}
.device{margin:clamp(30px,3.4vw,52px) auto 0;width:clamp(260px,min(29vw,calc((100svh - 330px) * .6)),400px)}
.device__body{background:#161918;border-radius:clamp(16px,1.9vw,26px);padding:7.4% 7.4% 15%;box-shadow:0 1px 0 #2b302e inset,0 30px 60px -30px rgba(29,41,37,.45)}
.screen{position:relative;aspect-ratio:1072/1448;background:var(--eink);container-type:inline-size;overflow:hidden;cursor:pointer;border-radius:2px}
.screen:focus-visible{outline-offset:6px}
.screen__text,.screen__ghost,.screen__measure{position:absolute;inset:7.5% 8.5% 11%;font:400 6.15cqw/1.42 var(--serif);color:var(--etext);hyphens:auto;-webkit-hyphens:auto;text-align:left}
.screen__text p,.screen__ghost p,.screen__measure p{margin:0 0 .55em}
.screen__text p.cont,.screen__ghost p.cont,.screen__measure p.cont{text-indent:0}
.screen__ghost{opacity:0;pointer-events:none}
.screen__ghost.on{animation:ghost 380ms steps(3,end) forwards}
@keyframes ghost{0%{opacity:.34}100%{opacity:0}}
.screen__measure{visibility:hidden;overflow:hidden}
.screen__foot{position:absolute;left:8.5%;right:8.5%;bottom:4.2%;display:flex;justify-content:space-between;font:400 4.1cqw/1 var(--sans);color:#4a4a4a}
.screen__refresh{position:absolute;inset:0;background:#1c1c1c;opacity:0;pointer-events:none}
.screen__refresh.on{animation:full 240ms steps(1,end)}
@keyframes full{0%{opacity:1;background:#1c1c1c}40%{opacity:1;background:#f2f2f2}100%{opacity:0}}
.timer{margin:clamp(26px,3vw,40px) auto 0;width:min(560px,100%);display:grid;gap:6px;transform:translateX(0)}
.timer__rule{position:relative;height:13px;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.timer__rule::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px solid var(--ink)}
.timer__run{position:absolute;left:0;top:4px;width:6px;height:5px;background:var(--copper);opacity:0}
.timer__run.on{animation:run 380ms linear forwards}
@keyframes run{0%{left:0;opacity:1}99%{opacity:1}100%{left:calc(100% - 6px);opacity:0}}
.timer__note{font-size:14px;color:var(--mute)}

/* B · the pen proof */
.pen{background:var(--white);padding:clamp(80px,10vw,150px) 24px clamp(80px,9vw,130px)}
.proof{max-width:560px;margin:0 auto;font-size:clamp(17px,1.7vw,21px)}
.proof ul{list-style:none;margin:0;padding:0}
.proof__clock{margin:0 0 18px;text-align:center;font-size:1.05em;font-variant-numeric:tabular-nums}
.proof__tabs{display:flex;justify-content:space-between;border-top:1px solid #bdbdbd;border-bottom:1px solid #bdbdbd;padding:16px 2px}
.x{position:relative;display:inline-block;width:max-content}
.ink{position:absolute;left:-4%;top:0;width:108%;height:100%;overflow:visible;pointer-events:none}
.ink path{fill:none;stroke:var(--copper);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ring{left:-9%;top:-55%;width:118%;height:210%}
.ring path{stroke-width:2.3px}
.proof__rec{position:relative;padding:34px 2px 26px;font-size:1.1em}
.proof__rec p{margin:0}
.ink.null{position:absolute;left:calc(100% + 22px);top:-70%;width:30px;height:30px}
.null path{stroke-width:2.4px}
.proof__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,3vw,22px);padding-bottom:22px;border-bottom:1px solid #bdbdbd}
.proof__tiles span{aspect-ratio:1/1;background:#b9b9b9}
.proof__rows li{padding:14px 2px;border-bottom:1px solid #bdbdbd}
.proof__lines{padding-top:20px;display:grid;gap:16px}
.proof__lines span{display:block;height:2px;background:#8f8f8f;opacity:.7}
.pen.drawn .ink path.dash{animation:draw 520ms cubic-bezier(.4,.1,.3,1) forwards}
.pen.drawn .s0 path.dash{animation-delay:.12s}.pen.drawn .s1 path.dash{animation-delay:.55s}.pen.drawn .s2 path.dash{animation-delay:.98s}
.pen.drawn .s4 path.dash{animation-delay:1.45s;animation-duration:.8s}.pen.drawn .s3 path.dash{animation-delay:2.25s}
.pen.drawn .s5 path.dash{animation-delay:2.7s;animation-duration:.45s}
.pen.drawn .s6 path.dash{animation-delay:3.15s}.pen.drawn .s7 path.dash{animation-delay:3.6s}
@keyframes draw{to{stroke-dashoffset:0}}
.pen__line{margin:clamp(56px,7vw,96px) 0 0;text-align:center;font-weight:450;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.02em}

/* beta + foot */
.beta{background:var(--ink);color:#fff;padding:clamp(80px,10vw,140px) 24px 40px}
.beta__in{max-width:560px;margin:0 auto}
.beta h2{margin:0;font-weight:480;font-size:clamp(32px,3.8vw,52px);line-height:1.08;letter-spacing:-.025em}
.beta__facts{margin:18px 0 0;font-size:clamp(17px,1.5vw,20px);color:#c9d0cd;max-width:34ch}
.beta__form{margin-top:clamp(34px,4vw,48px)}
.beta__label{display:block;font-size:15px;color:#c9d0cd;margin-bottom:8px}
.beta__row{display:flex;gap:0;border-bottom:1.5px solid #fff}
.beta__row input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:400 20px/1.3 var(--sans);padding:12px 0}
.beta__row input::placeholder{color:#7f8c88}
.beta__row input:focus{outline:none}
.beta__row:focus-within{border-bottom-color:var(--copper-hi)}
.beta__row button{background:var(--copper);color:#fff;border:0;font:500 17px/1 var(--sans);padding:0 20px;margin:6px 0;cursor:pointer;border-radius:2px;white-space:nowrap}
.beta__row button:hover{background:var(--copper-hi)}
.beta__row button[disabled]{opacity:.6;cursor:progress}
.beta__status{min-height:1.5em;margin:14px 0 0;font-size:16px}
.beta__status.ok{color:#fff}
.beta__status.err{color:#f0b9a0}
.beta__privacy{margin:6px 0 0;font-size:14px;color:#9fadaa}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.foot{max-width:560px;margin:clamp(90px,11vw,150px) auto 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:#9fadaa}
.foot p{margin:0}
.foot__mark{width:96px;height:auto;margin-left:-6px}

@media (max-width:600px){
  .headline{font-size:clamp(28px,8.4vw,40px)}
  .device{width:min(78vw,320px)}
  .beta__row{flex-direction:column;border-bottom:0}
  .beta__row input{border-bottom:1.5px solid #fff}
  .beta__row button{margin:16px 0 0;padding:16px 20px;align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .pen .ink path{stroke-dashoffset:0;animation:none!important}
  .screen__ghost.on,.screen__refresh.on,.timer__run.on{animation:none}
}

/* Download — after the pen proof, 560px measure, quiet rows not marketing cards */
.try{background:var(--cool);padding:clamp(56px,7vw,96px) 16px 0;text-align:center}
.try__h{margin:0 0 8px;font-weight:450;font-size:clamp(20px,1.8vw,24px);color:var(--mute)}
.try__frame{display:block;width:min(100%,560px);aspect-ratio:560/800;margin:0 auto;border:0;background:var(--cool)}
.dl{background:var(--cool);padding:clamp(80px,10vw,150px) 24px clamp(80px,9vw,130px)}
.dl__in{max-width:560px;margin:0 auto}
.dl h2{margin:0;font-weight:480;font-size:clamp(32px,3.8vw,52px);line-height:1.08;letter-spacing:-.025em}
.dl__lead{margin:18px 0 0;font-size:clamp(17px,1.5vw,20px);color:var(--mute)}
.dl__list{list-style:none;margin:clamp(34px,4vw,52px) 0 0;padding:0;border-top:1px solid #bdbdbd}
.dl__card{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 2px;border-bottom:1px solid #bdbdbd}
.dl__meta h3{margin:0;font-weight:500;font-size:18px;letter-spacing:-.01em}
.dl__fmt{margin:4px 0 0;font-size:15px;color:var(--mute)}
.dl__soon{margin:0;font-size:16px;color:var(--mute);white-space:nowrap}
.dl__file{margin:0;font-size:15px;text-align:right}
.dl__file a{text-decoration:none;border-bottom:1px solid transparent}
.dl__file a:hover{border-bottom-color:currentColor}
.dl__sha{margin:6px 0 0;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;word-break:break-all}
.dl__key,.dl__source{margin:22px 0 0;font-size:15px;color:var(--mute)}
.dl__source{margin-top:12px}
.dl__key a,.dl__source a{color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor}
.fpr{display:inline;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink)}

/* Ink-dark notice + footer (replaces the retired beta invite) */
.notice{background:var(--ink);color:#fff;padding:clamp(80px,10vw,140px) 24px 40px}
.notice__in{max-width:560px;margin:0 auto}
.notice h2{margin:0;font-weight:480;font-size:clamp(32px,3.8vw,52px);line-height:1.08;letter-spacing:-.025em}
.notice__line{margin:18px 0 0;font-size:clamp(17px,1.5vw,20px);color:#c9d0cd;max-width:34ch}
.foot__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 14px;margin:0}
.foot__links a{text-decoration:none;border-bottom:1px solid transparent}
.foot__links a:hover{border-bottom-color:currentColor}
.foot__links span a{border-bottom:none}

/* Subpages: /pgp and /bug */
.sub{min-height:100svh;display:flex;flex-direction:column;background:var(--white)}
.sub__bar{display:flex;align-items:center;justify-content:space-between;padding:clamp(20px,2.6vw,34px) clamp(20px,4vw,58px);max-width:calc(560px + 2 * clamp(20px,4vw,58px));margin:0 auto;width:100%}
.sub__main{flex:1;max-width:560px;width:100%;margin:0 auto;padding:clamp(24px,4vw,48px) 24px clamp(80px,8vw,120px)}
.sub__main h1{margin:0;font-weight:480;font-size:clamp(32px,3.8vw,52px);line-height:1.08;letter-spacing:-.025em}
.sub__main .lead{margin:18px 0 0;font-size:clamp(17px,1.5vw,20px);color:var(--mute)}
.sub__main p,.sub__main ol{margin:18px 0 0;color:var(--ink)}
.sub__main ol{padding-left:1.2em}
.sub__main a{color:var(--ink)}
.sub__main pre,.sub__main .fpr-block{margin:18px 0 0;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:400 15px/1.6 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.04em;overflow-wrap:anywhere}
.sub__foot{max-width:560px;width:100%;margin:0 auto;padding:0 24px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:var(--mute)}
.sub__foot a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.sub__foot a:hover{border-bottom-color:currentColor}
.sub__foot .foot__mark{width:72px;height:auto;margin-left:-4px}

/* Web bug form — same underline + copper button language, on white */
.bug{margin-top:clamp(34px,4vw,48px)}
.bug label{display:block;font-size:15px;color:var(--mute);margin:18px 0 6px}
.bug input[type=text],.bug input[type=email],.bug select,.bug textarea{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--ink);color:var(--ink);
  font:400 18px/1.4 var(--sans);padding:10px 0;border-radius:0;appearance:none}
.bug textarea{min-height:7.5em;resize:vertical;border-bottom-width:1.5px;line-height:1.45}
.bug textarea.log{min-height:8em;font-size:14px}
.bug input:focus,.bug select:focus,.bug textarea:focus{outline:none;border-bottom-color:var(--copper-hi)}
.bug select{background:var(--white)}
.bug button[type=submit]{margin-top:28px;background:var(--copper);color:#fff;border:0;font:500 17px/1 var(--sans);padding:14px 22px;cursor:pointer;border-radius:2px}
.bug button[type=submit]:hover{background:var(--copper-hi)}
.bug button[disabled]{opacity:.6;cursor:progress}
.bug__status{min-height:1.5em;margin:14px 0 0;font-size:16px}
.bug__status.ok{color:var(--ink)}
.bug__status.err{color:var(--copper)}
.bug__hint{margin:8px 0 0;font-size:14px;color:var(--mute)}