/* Rook web: the small pages around the site (/login, /i/:code, /status, 404, /connect/:app) in the marketing identity.
   Layered after app.css + v7.css and scoped to those pages' body classes, so the signed-in app (/account) is untouched.
   Monochrome: bone, ink and greys; the only colour is iMessage blue on outgoing bubbles and real app logos.
   Motion is CSS + /app/pages.js and respects prefers-reduced-motion. */
@font-face{font-family:"Newsreader";src:url(/f/newsreader-v7-latin.f00ab72f.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Runde";src:url(/f/open-runde-400-latin.62dce0fd.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Open Runde";src:url(/f/open-runde-500-latin.2f0c4754.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Open Runde";src:url(/f/open-runde-600-latin.ed98c5c6.woff2) format("woff2");font-weight:600;font-display:swap}

:root:not([data-theme=dark]) :is(body.page,body.page-connect,body.page-status){
  --bg:#F0EFEC;--page:#F0EFEC;--surface:#FFFFFF;--surface-2:#F7F6F4;--surface-3:#EAE9E5;
  --ink:#111111;--ink-2:rgba(0,0,0,.66);--ink-3:rgba(0,0,0,.48);--ink-4:rgba(0,0,0,.3);
  --hair:#E2E0DC;--hair-2:#D3D1CC;--sep:#E7E5E1;
  --accent:#111111;--accent-soft:rgba(0,0,0,.07);--accent-text:#111111;
  --ok:#111111;--ok-text:#111111;
}
:is(body.page,body.page-connect,body.page-status){--ok:var(--ink);--ok-text:var(--ink);--f-text:"Open Runde",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--f-display:"Newsreader",ui-serif,Georgia,serif;font-family:var(--f-text)}
:root:not([data-theme=dark]) :is(body.page,body.page-connect,body.page-status){background:var(--bg)}
:is(body.page,body.page-connect,body.page-status) .title{font-family:var(--f-display);font-weight:500;letter-spacing:-.022em;line-height:1.04;font-variation-settings:"opsz" 60}
:is(body.page,body.page-connect,body.page-status) .title i{font-style:normal;color:var(--ink-3)}
:is(body.page,body.page-connect,body.page-status) .wordmark{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.02em}
:is(body.page,body.page-connect,body.page-status) .btn{border-radius:999px;transition:transform .15s cubic-bezier(0,0,.2,1),opacity .2s,background .2s}
:is(body.page,body.page-connect,body.page-status) .btn:active{transform:scale(.97)}
:is(body.page,body.page-connect,body.page-status) .btn.primary{background:var(--ink);color:var(--on-ink)}
:root:not([data-theme=dark]) :is(body.page,body.page-connect,body.page-status) .btn.primary{background:#16181D;color:#fff;box-shadow:0 1px 2px rgba(22,24,29,.18),0 6px 18px -8px rgba(22,24,29,.45)}

/* grain, like the site */
:root:not([data-theme=dark]) :is(body.page,body.page-connect,body.page-status)::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.04;mix-blend-mode:multiply;background:url(/img/v7/grain.webp);background-image:image-set(url(/img/v7/grain.avif) type("image/avif"),url(/img/v7/grain.webp) type("image/webp"));background-size:200px}

/* entrance: everything in the card rises in order */
.rk-in>*{animation:rk-rise .8s cubic-bezier(.16,1,.3,1) both}
.rk-in>*:nth-child(1){animation-delay:.04s}.rk-in>*:nth-child(2){animation-delay:.1s}.rk-in>*:nth-child(3){animation-delay:.16s}
.rk-in>*:nth-child(4){animation-delay:.22s}.rk-in>*:nth-child(5){animation-delay:.28s}.rk-in>*:nth-child(6){animation-delay:.34s}
.rk-in>*:nth-child(7){animation-delay:.4s}.rk-in>*:nth-child(8){animation-delay:.46s}
@keyframes rk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* headline words rise out of a mask (pages.js splits them) */
.rk-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.rk-w>span{display:inline-block;animation:rk-word .9s cubic-bezier(.16,1,.3,1) both}
@keyframes rk-word{from{transform:translateY(105%)}to{transform:none}}

/* iMessage bubbles: typing dots, then the bubble springs in (pages.js sequences them) */
.convo .b{transform-origin:0 100%}
.convo .b.me{transform-origin:100% 100%}
.convo.rk-seq .b{opacity:0}
.convo.rk-seq .b.on{animation:rk-pop .5s cubic-bezier(.2,.9,.25,1.12) both}
@keyframes rk-pop{0%{opacity:0;transform:scale(.8) translateY(8px)}60%{opacity:1}100%{opacity:1;transform:none}}
.convo .rk-typing{display:flex;gap:3px;width:max-content;padding:10px 12px;border-radius:18px;background:var(--rk-bubble);transform-origin:0 100%;animation:rk-pop .35s cubic-bezier(.2,.9,.25,1.12) both}
.convo .rk-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:rk-dot 1.2s infinite}
.convo .rk-typing i:nth-child(2){animation-delay:.15s}.convo .rk-typing i:nth-child(3){animation-delay:.3s}
@keyframes rk-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}

/* login: code cells pop as you type */
.otp .cell{transition:box-shadow .2s,transform .2s cubic-bezier(.2,.9,.25,1.2)}
.otp .cell.on{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--accent-soft)!important}
.otp .cell.rk-filled{animation:rk-cell .28s cubic-bezier(.2,.9,.25,1.3)}
@keyframes rk-cell{0%{transform:scale(.9)}100%{transform:none}}
.otp.bad{animation:rk-shake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes rk-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* connect: the dots between the two tiles travel, the check draws */
.connect-pair .tile{animation:rk-rise .8s cubic-bezier(.16,1,.3,1) both}
.connect-pair .tile.rk{animation-delay:.12s}
:root:not([data-theme=dark]) .connect-pair .tile.rk{background:#16181D}
.connect-pair .dots i{animation:rk-travel 1.6s cubic-bezier(.4,0,.2,1) infinite}
.connect-pair .dots i:nth-child(2){animation-delay:.18s}.connect-pair .dots i:nth-child(3){animation-delay:.36s}
.connect-pair.linked .dots i{animation:none;background:var(--ink);opacity:1}
@keyframes rk-travel{0%,100%{opacity:.25;transform:none}40%{opacity:1;transform:scale(1.25)}}
.done-ic{animation:rk-pop .6s cubic-bezier(.2,.9,.25,1.2) .1s both}
.done-ic svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:rk-draw .5s cubic-bezier(.16,1,.3,1) .45s forwards}
@keyframes rk-draw{to{stroke-dashoffset:0}}
:root:not([data-theme=dark]) .done-ic{background:#16181D!important;color:#fff!important}
.checks li svg{color:var(--ink)}

/* status: monochrome dots, rows draw in */
body.page-status .status-row{animation:rk-rise .7s cubic-bezier(.16,1,.3,1) both}
body.page-status .status-row:nth-child(2){animation-delay:.06s}body.page-status .status-row:nth-child(3){animation-delay:.12s}
body.page-status .status-row:nth-child(4){animation-delay:.18s}body.page-status .status-row:nth-child(5){animation-delay:.24s}
body.page-status .pill-ok,body.page-status .pill-bad{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
body.page-status .pill-ok .dot{background:var(--ink)!important;box-shadow:0 0 0 3px var(--accent-soft)}
body.page-status .pill-bad{color:var(--ink)}
body.page-status .pill-bad .dot{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--ink)}
body.page-status .pill-ok .dot{animation:rk-breathe 2.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rk-breathe{0%,100%{box-shadow:0 0 0 3px var(--accent-soft)}50%{box-shadow:0 0 0 6px rgba(0,0,0,0)}}





/* 404: a quiet, large numeral that settles */
.nf-num{font-family:var(--f-display);font-weight:500;font-size:120px;line-height:.9;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 60}
.nf-num span{display:inline-block;animation:rk-word 1s cubic-bezier(.16,1,.3,1) both}
.nf-num span:nth-child(2){animation-delay:.08s}.nf-num span:nth-child(3){animation-delay:.16s}
.nf-rule{display:block;width:64px;height:1px;margin:22px auto 18px;background:var(--ink-4);transform-origin:50% 50%;animation:rk-line 1s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes rk-line{from{transform:scaleX(0)}to{transform:none}}

/* page transitions between site pages */
@view-transition{navigation:auto}
::view-transition-old(root){animation:rk-vt-out .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:rk-vt-in .4s cubic-bezier(.16,1,.3,1) both}
@keyframes rk-vt-out{to{opacity:0}}
@keyframes rk-vt-in{from{opacity:0;transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  .rk-in>*,.rk-w>span,.convo .b.on,.convo .rk-typing,.otp .cell,.connect-pair .tile,.connect-pair .dots i,.done-ic,.done-ic svg path,body.page-status .status-row,body.page-status .uptime i,.nf-num span,.nf-rule,body.page-status .pill-ok .dot{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .convo.rk-seq .b{opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}