/* getanandy.com: the one stylesheet for every page. plain CSS, edited by hand. */
@font-face{font-family:"Work Sans";src:url(/fonts/worksans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url(/fonts/worksans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url(/fonts/worksans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* getanandy.com, v2.
   one black stage, one thing to a screen, and each scroll is the next screen.
   the page is one person's week: every screen is one of their deadlines, counted down.
   Archivo declares, Work Sans explains. the hairline is the fold: it returns wherever two things meet.
   the polish pass (Oct 3): light is the only new material. it falls from above onto the things on the stage (the
   device, the app's own surfaces), never as colour. supporting type is bigger and brighter; hairlines stay only where
   they mean something (the fold). */
:root{
  color-scheme:dark;
  --black:#000;--white:#fff;
  --g-0a:#0a0a0a;--g-13:#131313;--g-1c:#1c1c1c;--g-2e:#2e2e2e;--g-3a:#3a3a3a;--g-5c:#5c5c5c;
  --g-7c:#7c7c7c;--g-8a:#8a8a8a;--g-a8:#a8a8a8;--g-d6:#d6d6d6;--g-e6:#e6e6e6;
  --g-86:#86868b;--g-a1:#a1a1a6;--g-f5:#f5f5f7;
  --bg:var(--black);--fg:var(--white);--text:var(--g-f5);--text-2:var(--g-a1);--label:var(--g-a1);--dim:var(--g-86);
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.16);--raised:var(--g-13);
  /* the app's own surfaces (a deadline, the week): black, lit from above */
  --surface:linear-gradient(180deg,#161618 0%,#0d0d0e 46%,#080808 100%);
  --surface-edge:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.055);
  --r-surface:clamp(26px,2.4vw,36px);
  /* a world's colour: only inside a picture of the app (the rail, a world's mark). never type, never a button */
  --w-maroon:#CF284B;--w-apricot:#FEA155;--w-mint:#16EAA6;--w-periwinkle:#8578FD;
  --font-text:"Work Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-num:"Archivo","Work Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --track:.22em;
  --r-mark:2.5px;--r-chip:4px;--r-control:14px;--r-pill:980px;--r-block:8px;--r-tile:18px;--r-sheet:16px;
  --gutter:clamp(20px,5.2vw,72px);
  --page:1560px;
  --bar:52px;
  --u:1vh;
}
@supports (height:1svh){:root{--u:1svh}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:calc(var(--bar) + 20px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.55 var(--font-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:2px}
::selection{background:var(--white);color:var(--black)}
[hidden]{display:none !important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--page);margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:var(--gutter);top:-120px;z-index:40;background:var(--white);color:var(--black);
  padding:12px 16px;border-radius:var(--r-control);font:600 15px/1 var(--font-text);text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}

/* ---------- the switches (attributes on <html>; the build chat moves them) */
html:not([data-store="soon"]) [data-when~="soon"],
html:not([data-store="preorder"]) [data-when~="preorder"],
html:not([data-store="live"]) [data-when~="live"],
html[data-store="soon"] [data-when~="store"],
html[data-duo="off"] [data-if~="duo"],html:not([data-duo="off"]) [data-ifnot~="duo"],
html[data-obsidian="off"] [data-if~="obsidian"],html:not([data-obsidian="off"]) [data-ifnot~="obsidian"],
html[data-founding="off"] [data-if~="founding"],html:not([data-founding="off"]) [data-ifnot~="founding"],
html[data-clean="off"] [data-if~="clean"],
html[data-hand="off"] [data-if~="hand"],html:not([data-hand="off"]) [data-ifnot~="hand"],
html[data-list="off"] [data-if~="list"],html:not([data-list="off"]) [data-ifnot~="list"],
html[data-rail="off"] [data-if~="rail"],
html[data-seam="off"] [data-if~="seam"],html:not([data-seam="off"]) [data-ifnot~="seam"],
html:not([data-moves~="unfold"]) [data-move~="unfold"],
html:not([data-moves~="light"]) [data-move~="light"],
html:not([data-moves~="ribbon"]) [data-move~="ribbon"],
html:not([data-moves~="evening"]) [data-move~="evening"]{display:none !important}

/* ---------- type */
/* a label names what follows, in her lowercase: set like a line of text, not a tracked-out tag */
.label{margin:0;font:600 clamp(15px,1.1vw,17px)/1.3 var(--font-text);letter-spacing:-.005em;color:var(--label)}
.statement{margin:0;font:800 clamp(36px,min(6.5vw,calc(var(--u)*11)),96px)/.98 var(--font-num);letter-spacing:-.036em;color:var(--white);text-wrap:balance}
.statement .dim{color:var(--dim)}
.statement .s{display:block}
.lede{font:500 clamp(18px,1.5vw,21px)/1.42 var(--font-text);letter-spacing:-.006em;color:var(--text-2);max-width:29em;text-wrap:pretty}
.small{font-size:15px;line-height:1.5;color:var(--text-2)}
.sq{display:inline-block;flex:none;width:10px;height:10px;border-radius:var(--r-mark);background:var(--white)}
/* the worlds on this page: school, work, art, personal (Andrew, Oct 3, 3:36 pm: work in purple, art in mint, personal in
   apricot, school stays maroon). each has its colour, and the colour always sits beside the world's name */
.w-school{--w:var(--w-maroon)}
.w-work{--w:var(--w-periwinkle)}
.w-art{--w:var(--w-mint)}
.w-personal{--w:var(--w-apricot)}
.sq[class*=" w-"]{background:var(--w)}

/* ---------- buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;
  border:0;border-radius:var(--r-pill);background:var(--white);color:var(--black);
  font:600 15px/1 var(--font-text);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--g-d6)}
.btn.big{min-height:52px;padding:0 24px;font-size:16px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;
  border-radius:var(--r-pill);background:rgba(255,255,255,.12);font:500 14px/1 var(--font-text);color:var(--white);white-space:nowrap}
.field{width:100%;min-height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-control);
  background:#0d0d0e;color:var(--white);font:400 17px/1.2 var(--font-text)}
.field::placeholder{color:var(--g-86);opacity:1}
.field:hover{border-color:rgba(255,255,255,.6)}
.field:focus-visible{outline-offset:1px;border-color:var(--white)}

/* ---------- header */
/* the bar is glass: what scrolls under it is seen, softly, through it */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(0,0,0,.78);border-bottom:1px solid transparent}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top{background:rgba(0,0,0,.62);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
}
.top.is-stuck{border-bottom-color:rgba(255,255,255,.08)}
/* while the fold is on screen the bar is plain black: what lies under it there is black anyway, and the blur would be
   worked out again on every frame of the hinge */
html.is-folding .top{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.top-in{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px);height:var(--bar)}
.brand{display:block;margin-right:auto;color:var(--white);border-radius:2px}
.brand svg{width:76px;height:24px}
.top nav{display:flex;gap:clamp(18px,2.6vw,36px)}
.top nav a{font:400 14px/1 var(--font-text);color:rgba(245,245,247,.82);text-decoration:none;padding-block:15px}
.top nav a:hover{color:var(--white)}
.top .btn,.top .chip{min-height:32px;padding:0 14px;font-size:13.5px}
.top .btn{position:relative}
.top .btn::after{content:"";position:absolute;inset:-6px -4px}
@media (max-width:719px){.top nav{display:none}}

/* ---------- the home page: one screen to a scroll */
.home .top{position:fixed;left:0;right:0;top:0;padding-top:env(safe-area-inset-top,0px)}
html.home{scroll-padding-top:0;scroll-snap-type:y proximity}
@media (min-height:640px){html.home{scroll-snap-type:y mandatory}}
/* while the fold is live (540px tall and up) and within a screen of the window, one scroll is always one view, so a flick
   can never carry past the fold (the script sets is-folding) */
html.home.is-folding{scroll-snap-type:y mandatory}
.screen{display:grid;align-content:center;min-height:100vh;min-height:100svh;
  padding-block:calc(var(--bar) + env(safe-area-inset-top,0px) + clamp(12px,calc(var(--u)*3),40px)) clamp(16px,calc(var(--u)*4),64px)}
.screen>.wrap{min-width:0}
.home .screen,.home .duo{scroll-snap-align:start;scroll-snap-stop:always}
.home .foot,.home .pv{scroll-snap-align:end}

/* ---------- a deadline, as the app shows it: the line, the countdown, the rail, when it needs you */
.dl{min-width:0;container-type:inline-size}
.dl-world{display:flex;align-items:center;gap:10px}
.dl-world .sq{background:var(--w,var(--white))}
.dl-world .wd{color:var(--white)}
.dl-world .ex{margin-left:10px;font-weight:500;color:var(--g-86)}
.feat .dl-world .ex{margin-left:auto}
.dl-line{margin-top:12px;font:400 clamp(18px,min(2.1vw,calc(var(--u)*3.4)),30px)/1.25 var(--font-text);color:var(--g-d6);text-wrap:balance}
.dl-clock{margin:clamp(6px,1vw,14px) 0 0 -.035em;font:800 clamp(40px,14.6vw,96px)/.88 var(--font-num);letter-spacing:-.03em;
  color:var(--white);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.dl-clock .left{display:block;margin:10px 0 0 .05em;font:500 17px/1 var(--font-text);letter-spacing:0;color:var(--text-2)}
.rail{margin-top:clamp(14px,1.6vw,22px);height:3px;border-radius:1.5px;background:rgba(255,255,255,.14);overflow:hidden}
.rail i{display:block;height:100%;background:var(--w,var(--w-maroon))}
.dl-needs{margin-top:clamp(14px,1.5vw,22px);font:600 clamp(18px,min(1.9vw,calc(var(--u)*3.1)),27px)/1.25 var(--font-text);color:var(--white)}
.dl-work{margin-top:6px;font:400 clamp(16px,1.25vw,18px)/1.4 var(--font-text);color:var(--text-2)}
/* a deadline beside a statement sits on the app's own surface, lit from above, as a widget does */
.feat .dl{position:relative;padding:clamp(22px,2.8vw,44px) clamp(22px,3vw,48px) clamp(24px,3vw,48px);border-radius:var(--r-surface);
  background:var(--surface);box-shadow:var(--surface-edge)}
@supports (width:1cqi){
  .dl{--cf:min(17.2cqi,calc(var(--u)*17),150px)}
  .dl-xl{--cf:min(17.2cqi,calc(var(--u)*25),236px)}
  .dl-clock{font-size:var(--cf)}
  .rail{width:min(100%,calc(var(--cf)*5.74))}
  @container (min-width:520px){
    .dl{--cf:min(14.8cqi,calc(var(--u)*17),150px)}
    .dl-xl{--cf:min(14.8cqi,calc(var(--u)*20.4),236px)}
    .dl-clock .left{display:inline;margin:0 0 0 .05em;font-size:clamp(15px,.115em,24px)}
    .rail{width:min(100%,calc(var(--cf)*6.3))}
  }
}

/* ---------- 1. the hero */
/* light from above, falling on the countdown: the first screen is a stage, not a slide */
.hero,.close{position:relative;isolation:isolate}
.hero::before,.close::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(75% 60% at 38% 0%,rgba(255,255,255,.075),rgba(255,255,255,.025) 45%,rgba(255,255,255,0) 72%)}
.close::before{background:radial-gradient(60% 55% at 30% 46%,rgba(255,255,255,.06),rgba(255,255,255,.02) 50%,rgba(255,255,255,0) 76%)}
.hero>.wrap{display:grid;gap:clamp(18px,calc(var(--u)*3.1),60px)}
.h1{margin:0;font:800 clamp(42px,min(8.6vw,calc(var(--u)*11.6)),128px)/.92 var(--font-num);letter-spacing:-.042em;color:var(--white)}
.promise{margin-top:clamp(10px,1.3vw,20px);font:500 clamp(19px,min(2.2vw,calc(var(--u)*3.5)),32px)/1.22 var(--font-text);letter-spacing:-.012em;color:var(--white)}
.promise span{display:block}
.promise .what{color:var(--text-2)}
@media (min-width:900px){.promise span{display:inline}}
.get{display:grid;gap:14px;justify-items:start;min-width:0}
.avail{font:500 clamp(18px,1.6vw,22px)/1.3 var(--font-text);color:var(--white)}
.avail span{color:var(--text-2)}
.week{font-size:17px;color:var(--text-2)}
.store{display:grid;gap:12px;justify-items:start}
.badge{display:inline-block;margin:13px 13px 13px 0;border-radius:9px}
.badge img{height:52px;width:auto}
@media (min-width:900px){
  .hero .get{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:clamp(28px,4vw,72px)}
  .hero .get .avail{padding-top:13px}
  .hero .store{grid-auto-flow:column;align-items:center;column-gap:24px}
  .hero .badge{margin-block:0}
}

/* ---------- 1b. the Lock Screen: the same deadline on its last afternoon, as the app's Live Activity shows it (run0's
   DeadlineActivityWidget: a white square, "closes", the title, the timer; it starts when something closes inside six
   hours, nothing private). a generic phone, as the iPhone Duo is: no camera, no buttons, no maker's details */
.lock-in{container-type:inline-size;display:grid;justify-items:center;align-content:center;gap:clamp(18px,calc(var(--u)*3.2),34px)}
.lock-fig{position:relative;display:grid;place-items:center}
.stage-light{--sl:min(calc(var(--pw)*2.6),100vw,100cqi);position:absolute;left:50%;top:50%;width:var(--sl);height:var(--sl);margin:calc(var(--sl)*-.5) 0 0 calc(var(--sl)*-.5);
  pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.07),rgba(255,255,255,.025) 55%,rgba(255,255,255,0))}
.stage-floor{position:absolute;left:50%;bottom:calc(var(--pw)*-.07);width:calc(var(--pw)*1.25);height:calc(var(--pw)*.2);margin-left:calc(var(--pw)*-.625);
  pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.08),rgba(255,255,255,.025) 58%,rgba(255,255,255,0))}
.stage-floor::after{content:"";position:absolute;inset:36% 14% 40%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,0))}
.lock{--pw:min(300px,64vw,calc(var(--u)*32))}
.phone{position:relative;z-index:1;width:var(--pw);aspect-ratio:9/19.5;border-radius:calc(var(--pw)*.16);border:2px solid transparent;
  background:linear-gradient(126deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 24%,rgba(255,255,255,0) 46%) padding-box,linear-gradient(#000,#000) padding-box,
  linear-gradient(180deg,#9a9aa0 0,#55555a 2.5%,#38383c 18%,#2a2a2d 62%,#232326 94%,#4a4a4f 100%) border-box}
/* the glass: a lock screen with a plain dark wallpaper, lit from above */
.phone-glass{position:absolute;inset:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.128);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--pw)*.2);
  background:radial-gradient(130% 70% at 50% -12%,#3a3a40 0%,#18181b 46%,#060607 100%)}
.ls-date{font:500 calc(var(--pw)*.056)/1.2 var(--font-text);color:rgba(255,255,255,.86)}
.ls-time{margin-top:calc(var(--pw)*.01);font:600 calc(var(--pw)*.235)/1 var(--font-text);letter-spacing:-.03em;color:rgba(255,255,255,.94);
  font-variant-numeric:tabular-nums}
.la{position:absolute;left:calc(var(--pw)*.034);right:calc(var(--pw)*.034);bottom:calc(var(--pw)*.2);display:flex;align-items:center;
  gap:calc(var(--pw)*.034);padding:calc(var(--pw)*.052) calc(var(--pw)*.05);border-radius:calc(var(--pw)*.08);background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 calc(var(--pw)*.04) calc(var(--pw)*.1) rgba(0,0,0,.5)}
.la-sq{flex:none;width:calc(var(--pw)*.027);height:calc(var(--pw)*.027);background:var(--white)}
.la-words{display:grid;gap:calc(var(--pw)*.006);min-width:0;flex:1}
.la-cap{font:500 calc(var(--pw)*.027)/1.2 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:rgba(235,235,245,.6)}
.la-title{font:400 calc(var(--pw)*.046)/1.2 var(--font-text);color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-clock{flex:none;font:800 calc(var(--pw)*.078)/1 var(--font-num);letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lock-cap{max-width:21em;text-align:center;font:500 clamp(17px,1.4vw,20px)/1.4 var(--font-text);color:var(--text-2);text-wrap:balance}
/* a wide window: the hero and the Lock Screen share one screen, side by side */
@media (min-width:960px){
  .home .lead{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:clamp(32px,4vw,80px);align-items:center;
    max-width:var(--page);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px));
    min-height:100vh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
    padding-block:calc(var(--bar) + env(safe-area-inset-top,0px) + clamp(12px,calc(var(--u)*3),40px)) clamp(16px,calc(var(--u)*4),64px)}
  .home .lead>.screen{min-height:0;padding:0;scroll-snap-align:none}
  .home .lead .wrap{padding-inline:0;max-width:none}
  .lock{--pw:min(300px,calc(var(--u)*33),24vw)}
  .home .lead{position:relative;isolation:isolate}
  /* the light spans the window, so it has no edge where the page stops widening (the body clips the overhang) */
  .home .lead::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;
    background:radial-gradient(60% 60% at 38% 0%,rgba(255,255,255,.075),rgba(255,255,255,.025) 45%,rgba(255,255,255,0) 72%)}
  .home .lead .hero::before{content:none}
  /* beside the Lock Screen the hero is a column: what's on sale, the badge and the list stack */
  .home .lead .hero .get{grid-template-columns:minmax(0,1fr)}
  .home .lead .hero .get .avail{padding-top:0}
  .home .lead .hero .store{grid-auto-flow:row;align-items:start}
  .home .lead .hero .badge{margin-block:2px}
  .home .lead .hero .list{width:min(100%,520px)}
  .home .lead .dl-xl{--cf:min(14.8cqi,calc(var(--u)*15),236px)}
  .home .lead .hero>.wrap{gap:clamp(14px,calc(var(--u)*2.6),48px)}
}
/* a wide but short window (a laptop's browser with its bars): the pair still fits one screen */
@media (min-width:960px) and (max-height:720px){
  .home .lead{padding-block:calc(var(--bar) + env(safe-area-inset-top,0px) + 10px) 12px}
  .home .lead .h1{font-size:clamp(42px,calc(var(--u)*9.4),96px)}
  .home .lead .promise{margin-top:6px}
  .home .lead .dl-xl{--cf:min(14.8cqi,calc(var(--u)*12.5),236px)}
  .home .lead .hero .dl-line{margin-top:6px}
  .home .lead .hero .rail{margin-top:10px}
  .home .lead .hero .dl-needs{margin-top:10px}
  .home .lead .hero .get{gap:8px}
  .home .lead .hero .badge{margin-block:5px 1px}   /* with the gaps, 13 px clear above and below: a quarter of its height */
  .lock{--pw:min(300px,calc(var(--u)*31),24vw)}
}

/* the list */
.list{display:grid;gap:10px;width:min(100%,520px)}
@media (min-width:900px){.hero .list{width:min(100%,660px)}.hero .list .row{max-width:520px}.hero .list .note{font-size:12.5px}}
.list .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.list .note{font-size:13px;line-height:1.45;color:var(--text-2)}
.list .note a{text-underline-offset:3px}
.list .status{font:500 16px/1.4 var(--font-text);color:var(--white);min-height:0}
.list .status:empty{display:none}
.list.is-done .row,.list.is-done .note{display:none}
@media (max-width:339px){.list .row{grid-template-columns:minmax(0,1fr)}}

/* ---------- 2. Andy for iPhone Duo */
.duo{display:grid;align-content:center;min-height:100vh;min-height:100svh;
  padding-block:calc(var(--bar) + env(safe-area-inset-top,0px) + clamp(12px,calc(var(--u)*3),40px)) clamp(20px,calc(var(--u)*5),64px)}
.duo-stage{display:grid;gap:clamp(24px,calc(var(--u)*4),48px)}
.duo-head{display:grid;gap:clamp(10px,1.2vw,18px)}
.duo-head .statement{font-size:clamp(33px,min(8.5vw,calc(var(--u)*8.6)),86px)}
.duo-any{font:500 clamp(17px,1.35vw,20px)/1.4 var(--font-text);color:var(--text-2)}
.duo-figure{position:relative;container-type:inline-size;display:grid;place-items:center;width:100%;min-width:0}
/* the stage light: one soft pool from above, where the device stands. the device reads against it, as an object does */
.duo-light{position:absolute;inset:-8% 0;pointer-events:none;
  background:radial-gradient(56% 48% at 50% 46%,rgba(255,255,255,.065),rgba(255,255,255,.024) 52%,rgba(255,255,255,0) 78%)}
/* where the device meets the floor: a little light, and its shadow in it. the script sets it under the device in every pose */
.duo-floor{display:none}
.duo.is-live .duo-floor{display:block;position:absolute;left:50%;top:50%;width:400px;height:72px;margin:-36px 0 0 -200px;pointer-events:none;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.085),rgba(255,255,255,.03) 58%,rgba(255,255,255,0));
  transform-origin:50% 50%;transform:scale(.5);will-change:transform}
.duo.is-live .duo-floor::after{content:"";position:absolute;inset:36% 12% 40%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.5) 55%,rgba(0,0,0,0))}
.book-pos{display:grid;width:min(100%,880px,calc(var(--u)*72))}
.book{--ub:calc(min(100cqi,880px,calc(var(--u)*72))/200);--ud:calc(min(100cqi,880px,calc(var(--u)*72))/140);
  --m8:9px;--m9:9.5px;--m11:12px;--m19:21px;--md9:9.5px;--md12:13px;--md15:16px;
  position:relative;width:100%;aspect-ratio:10/7;transform-style:preserve-3d;margin-bottom:calc(var(--ub)*9)}
.page,.leaf{position:absolute;top:0;left:50%;width:50%;height:100%}
.leaf{transform-origin:0 50%;transform:rotateY(-180deg);transform-style:preserve-3d}
/* the device (Oct 3): a folding phone, drawn as an object: an edge that catches the light, black glass with a faint
   reflection from above, true corners, and the floor it stands on. it is a generic device: nothing on it is unique to any
   maker's phone (no camera, no buttons, no logo), as Apple's marketing guidelines ask of a drawn device.
   --bw is the edge, in whole pixels (browsers round a border's width to the screen's pixels, and the seam is placed by it) */
.page,.face{--r:max(10px,calc(var(--ub)*9.2));--rs:max(2px,calc(var(--ub)*1.3));--bw:2px;
  /* the edge is a band of metal, brightest where the light from above meets it; the glass is black, with its reflection */
  --edge:linear-gradient(180deg,#9a9aa0 0,#55555a 3.5%,#38383c 22%,#2a2a2d 62%,#232326 92%,#4a4a4f 100%);
  --glass:linear-gradient(transparent,transparent);
  border:var(--bw) solid transparent;background:var(--glass) padding-box,linear-gradient(#000,#000) padding-box,var(--edge) border-box}
/* at the crease the two pages are one screen, so neither draws an edge there (the band of metal stops short of it).
   the glass's reflection falls from the top left of the spread, mostly on the left page */
.page{border-radius:var(--rs) var(--r) var(--r) var(--rs);
  --glass:linear-gradient(118deg,rgba(255,255,255,.03),rgba(255,255,255,0) 36%);
  background-size:auto,auto,calc(100% - var(--bw)) 100%;background-position:0 0,0 0,100% 0;background-repeat:no-repeat}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face-front{border-radius:var(--rs) var(--r) var(--r) var(--rs);
  --glass:linear-gradient(126deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 24%,rgba(255,255,255,0) 46%)}
.face-back{transform:rotateY(180deg);border-radius:var(--r) var(--rs) var(--rs) var(--r);
  --glass:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 26%,rgba(255,255,255,0) 54%);
  background-size:auto,auto,calc(100% - var(--bw)) 100%;background-position:0 0,0 0,0 0;background-repeat:no-repeat}
.lay{position:absolute;inset:0;padding:calc(var(--ub)*9) calc(var(--ub)*8.5);display:flex;flex-direction:column}
.lay-cover,.lay-eve{justify-content:center}
.lay-desk,.lay-eve,.cross{display:none}
.pg-label{font:500 max(var(--m9),calc(var(--ub)*3.1))/1.3 var(--font-text);letter-spacing:var(--track);color:var(--label);white-space:nowrap}
.pg-clock{margin-top:calc(var(--ub)*5);font:800 max(var(--m19),calc(var(--ub)*13))/.95 var(--font-num);letter-spacing:-.03em;
  color:var(--white);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;align-self:flex-start}
.lay-cover .pg-clock{margin-top:0}
.pg-clock .left,.cross .left{font:400 max(var(--m8),calc(var(--ub)*3))/1 var(--font-text);letter-spacing:0;color:var(--text-2)}
.pg-line{margin-top:calc(var(--ub)*4.2);font:500 max(var(--m11),calc(var(--ub)*5.3))/1.25 var(--font-text);color:var(--g-d6)}
/* "needs you by" in words (C29): under the title, the first thing right of the fold */
.pg-needs{display:block;margin-top:calc(var(--ub)*2.2);font:600 max(var(--m11),calc(var(--ub)*5.3))/1.25 var(--font-text);color:var(--white)}
.pg-rows{list-style:none;margin:calc(var(--ub)*5.4) 0 0;padding:0;display:grid;gap:calc(var(--ub)*3.6);
  font:400 max(var(--m11),calc(var(--ub)*5.3))/1.2 var(--font-text)}
.pg-rows li{display:grid;grid-template-columns:3.2em minmax(0,1fr);color:var(--g-d6)}
.pg-rows .t{color:var(--label);font-variant-numeric:tabular-nums}
.fold{position:absolute;left:50%;top:0;bottom:0;width:var(--px,1px);margin-left:calc(var(--px,1px)*-.5);background:var(--g-8a);transform:translateZ(1px)}
.now{position:absolute;left:50%;top:100%;margin-top:calc(var(--ub)*3.4);transform:translateX(-50%);padding-left:var(--track);
  font:600 max(var(--m9),calc(var(--ub)*3))/1 var(--font-text);letter-spacing:var(--track);color:var(--white)}

/* the countdown on the seam (data-seam on <html>; anything but "off" is on). one line of digits, half on each page, so it bends with
   the fold. the left page's copy is the left half, the right page's is the right half, and the hairline stops behind them.
   data-seam="off" puts the countdown back on the right page, beside the hairline */
html:not([data-seam="off"]) .book{--s0:calc(var(--ub)*9 + max(var(--m9),calc(var(--ub)*3.1))*1.3 + var(--ub)*3);
  --s1:calc(max(var(--m19),calc(var(--ub)*13))*.95 + var(--ub)*4)}
html:not([data-seam="off"]) .fold{background:linear-gradient(to bottom,var(--g-8a) var(--s0),transparent var(--s0),
  transparent calc(var(--s0) + var(--s1)*var(--sg,1)),var(--g-8a) calc(var(--s0) + var(--s1)*var(--sg,1)))}
html:not([data-seam="off"]) .lay-book .pg-clock{display:block;visibility:visible;position:relative;z-index:1;--ink:-.015em}
/* the fold passes through the countdown's first colon, so it never cuts a digit: the days and hours end at the fold,
   and the minutes and seconds start after it. the script keeps the countdown in those two parts */
html:not([data-seam="off"]) .lay-book .pg-clock .is-split{display:inline-grid;grid-template-columns:1fr auto 1fr}
html:not([data-seam="off"]) .lay-book .pg-clock .ca{justify-self:end}
html:not([data-seam="off"]) .lay-book .pg-clock .cb{justify-self:start}
html:not([data-seam="off"]) .page .lay-book .pg-clock{align-self:flex-start;margin-left:calc(var(--ub)*-8.5 - var(--bw));
  transform:translate(-50%,0) translateX(var(--ink));clip-path:inset(-60% -60% -220% calc(50% - var(--ink) - var(--px,1px)*.5))}
html:not([data-seam="off"]) .face-back .lay-book .pg-clock{align-self:flex-end;margin-right:calc(var(--ub)*-8.5 - var(--bw));
  transform:translate(50%,0) translateX(var(--ink));clip-path:inset(-60% calc(50% + var(--ink) - var(--px,1px)*.5) -220% -60%)}
/* "left" hangs after the digits and takes no part in the centring.
   --ink is a small optical correction: the colon's slot ends tighter on the right than it starts on the left, so its ink would read a touch right */
html:not([data-seam="off"]) .lay-book .pg-clock .left{position:absolute;left:100%;bottom:.45em;margin-left:.55em}
html:not([data-seam="off"]) .face-back .pg-rows{margin-top:calc(var(--ub)*4.2)}
html:not([data-seam="off"]) .cross{display:none !important}
html:not([data-seam="off"]) .lay-book .rib{visibility:hidden}
.rib-fold{display:none}
html[data-moves~="ribbon"]:not([data-seam="off"]) .rib-fold{display:block;position:absolute;top:calc(var(--bw)*-1);bottom:calc(var(--bw)*-1);width:var(--px,1px);pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--rk,.75));
  --g1:calc(var(--s0) + var(--s1)*var(--gp,1));
  --thr:linear-gradient(to bottom,var(--w,var(--w-maroon)) var(--s0),transparent var(--s0),transparent var(--g1),var(--w,var(--w-maroon)) var(--g1));
  background:var(--thr);
  clip-path:inset(max(calc(var(--s0)*(1 - var(--rb,1))),calc((1 - var(--rc,1))*100%)) -4px calc((100% - var(--g1))*(1 - var(--rb,1))) -4px)}
html[data-moves~="ribbon"]:not([data-seam="off"]) .rib-fold::before{content:"";position:absolute;top:0;height:var(--room,66.667%);width:calc(var(--px,1px)*2);background:var(--thr)}
html[data-moves~="ribbon"]:not([data-seam="off"]) .page>.rib-fold{left:calc(var(--bw)*-1)}
html[data-moves~="ribbon"]:not([data-seam="off"]) .page>.rib-fold::before{left:0}
html[data-moves~="ribbon"]:not([data-seam="off"]) .face-back>.rib-fold{right:calc(var(--bw)*-1);transform-origin:100% 50%}
html[data-moves~="ribbon"]:not([data-seam="off"]) .face-back>.rib-fold::before{right:0}
html[data-moves~="ribbon"]:not([data-seam="off"]) .fold{--c0:max(calc(var(--s0)*(1 - var(--rb,1))),calc((1 - var(--rc,1))*100%));
  --c1:calc(var(--s0) + var(--s1)*var(--sg,1) + (100% - var(--s0) - var(--s1)*var(--sg,1))*var(--rb,1));
  background:linear-gradient(to bottom,var(--g-8a) var(--c0),transparent var(--c0),transparent var(--c1),var(--g-8a) var(--c1))}
html[data-moves~="ribbon"]:not([data-seam="off"]) .rib-desk{display:none}
html[data-moves~="ribbon"]:not([data-seam="off"]) .page .lay-desk{padding-bottom:calc(var(--ud)*6.5)}
html:not([data-seam="off"]) .rib-tail{left:0;width:calc(var(--px,1px)*2);margin-left:calc(var(--bw)*-.5 - var(--px,1px));transform:scaleX(var(--rk,.75))}

.glow{position:absolute;inset:0;pointer-events:none;opacity:var(--o-light,0);border-radius:inherit;
  background:linear-gradient(to right,rgba(255,255,255,.26),rgba(255,255,255,.09) 20%,rgba(255,255,255,0) 54%)}
.face-back .glow{background:linear-gradient(to left,rgba(255,255,255,.26),rgba(255,255,255,.09) 20%,rgba(255,255,255,0) 54%)}
.page>.glow{left:calc(var(--bw)*-1)}
.face-back>.glow{right:calc(var(--bw)*-1)}
.rib{position:relative;flex:none;height:calc(var(--ub)*3.4);--t1:max(calc(var(--px,1px)*2),calc(var(--ub)*.95));--t2:max(calc(var(--px,1px)*1.5),calc(var(--ub)*.5))}
.rib i,.rib b,.rib u{position:absolute;display:block;border-radius:1px;background:var(--w,var(--w-maroon))}
.rib i{top:0;height:var(--t1);left:0;right:0}
.rib-r{margin:calc(var(--ub)*3.6) 0 0 calc(var(--ub)*-8.5)}
.rib-r i{background:linear-gradient(to right,var(--w,var(--w-maroon)) 0 70%,var(--line-2) 70% 100%)}
.rib-r u{left:calc(var(--ub)*4.1);top:0;width:var(--t2);height:calc(var(--ub)*15.5)}
.rib-l{margin:calc(var(--ub)*3.6) calc(var(--ub)*-8.5) 0 auto;width:30%}
.rib-desk{position:absolute;left:calc(var(--ud)*7);right:calc(var(--ud)*7);bottom:0;height:calc(var(--ud)*2.4);--t1:max(calc(var(--px,1px)*2),calc(var(--ud)*.7));--t2:max(calc(var(--px,1px)*1.5),calc(var(--ud)*.36))}
.rib-desk i{top:auto;bottom:calc(var(--t1)*-.5);background:linear-gradient(to right,var(--w,var(--w-maroon)) 0 66.667%,var(--line-2) 66.667% 100%)}
.rib-desk b{left:0;bottom:calc(var(--ud)*1.3);height:var(--t2);width:36%}
.rib-tail{position:absolute;left:15%;bottom:calc(var(--bw)*-1);width:max(calc(var(--px,1px)*2),calc(var(--ub)*1));height:9.5%;border-radius:1px 1px 0 0;background:var(--w,var(--w-maroon))}
.ghost{display:none;visibility:hidden}
html[data-moves~="ribbon"] .ghost,html[data-moves~="unfold"] .ghost{display:block}
html[data-moves~="ribbon"] .face-back .pg-rows,html[data-moves~="unfold"] .face-back .pg-rows{margin-top:calc(var(--ub)*4.2)}

.duo-states{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.6vw,40px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.duo-states p{margin-top:8px;font-size:17px;line-height:1.45;color:var(--text-2);max-width:28em}
.duo-states p b,.duo-cap b{display:block;font-weight:600;color:var(--white)}
.desk-type{margin-top:12px !important;font:800 clamp(30px,3.4vw,46px)/.95 var(--font-num) !important;letter-spacing:-.03em;color:var(--white) !important;font-variant-numeric:tabular-nums;white-space:nowrap}
.desk-type .left{font:500 16px/1 var(--font-text);letter-spacing:0;color:var(--text-2)}
.duo-ui{display:none}

/* live: the scroll is the hinge, and each view is one scroll */
.duo.is-live{display:block;min-height:0;padding:0;scroll-snap-align:none}
.duo.is-live .duo-track{position:relative;height:calc(var(--n,3)*100vh);height:calc(var(--n,3)*100svh)}
.duo.is-live .duo-stage{position:sticky;top:0;z-index:1;height:100vh;height:100svh;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,calc(var(--u)*1.6),20px);
  padding-top:calc(var(--bar) + env(safe-area-inset-top,0px) + clamp(10px,calc(var(--u)*2.6),32px));padding-bottom:clamp(14px,calc(var(--u)*3),36px)}
.duo-snap{position:absolute;left:0;width:1px;height:100vh;height:100svh;top:calc(var(--i,0)*100vh);top:calc(var(--i,0)*100svh);
  pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
.duo.is-live .duo-figure{height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the pages never take a click of their own: the figure does, so nothing beside it is covered by the pages' empty half */
.duo.is-live .book-pos{width:auto;pointer-events:none}
.duo.is-live .book{width:auto;aspect-ratio:auto;margin:0;
  --m8:calc(var(--ub)*var(--k8));--m9:calc(var(--ub)*var(--k9));--m11:calc(var(--ub)*var(--k11));--m19:calc(var(--ub)*var(--k19));
  --md9:calc(var(--ud)*var(--kd9));--md12:calc(var(--ud)*var(--kd12));--md15:calc(var(--ud)*var(--kd15))}
.duo.is-live .lay-desk{display:flex;inset:auto;left:50%;top:50%;width:var(--Hpx);height:var(--Wpx);transform:translate(-50%,-50%) rotate(90deg);
  padding:calc(var(--ud)*6.5) calc(var(--ud)*7)}
.duo.is-live .lay-eve{display:flex}
.duo.is-live .cross{display:block}
.duo.is-live .duo-states{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.duo.is-live .duo-ui{display:grid;gap:clamp(12px,calc(var(--u)*1.8),18px);justify-items:start}
@media (min-width:960px){
  .duo.is-live .duo-stage{grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(24px,3.4vw,56px)}
  .duo.is-live .duo-head{grid-area:1/1/2/2;align-self:start;padding-top:clamp(4px,calc(var(--u)*6),64px)}
  .duo.is-live .duo-head .statement{font-size:clamp(40px,min(5.3vw,calc(var(--u)*9.6)),84px)}
  .duo.is-live .duo-figure{grid-area:1/2/3/3}
  .duo.is-live .duo-ui{grid-area:2/1/3/2;align-self:end;padding-bottom:clamp(4px,calc(var(--u)*6),64px)}
}
/* the views: a small glass capsule, the one you are on drawn long */
.duo-legend{display:inline-flex;padding:0 7px;border-radius:var(--r-pill);background:rgba(255,255,255,.1)}
.duo-legend button{display:grid;place-items:center;width:32px;height:44px;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-pill)}
.duo-legend button::before{content:"";width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.38)}
.duo-legend button:hover::before{background:rgba(255,255,255,.72)}
.duo-legend button[aria-current="true"]::before{width:19px;background:var(--white)}
.duo-cap{min-height:6.2em;font:400 clamp(17px,1.4vw,20px)/1.45 var(--font-text);color:var(--text-2);max-width:29em;text-wrap:pretty}
.duo-cap .label{display:block;margin-bottom:6px;color:var(--white)}
.book[data-face="front"] .face-back,.book[data-face="back"] .face-front{visibility:hidden}
/* the desk: a big countdown faces you; the day lies flat */
.dk-label{font:500 max(var(--md9),calc(var(--ud)*2.3))/1.3 var(--font-text);letter-spacing:var(--track);color:var(--label);white-space:nowrap}
.dk-clock{margin-top:auto;font:800 calc(var(--ud)*15)/.9 var(--font-num);letter-spacing:-.03em;color:var(--white);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.dk-line{margin-top:calc(var(--ud)*3);font:500 max(var(--md12),calc(var(--ud)*4.3))/1.25 var(--font-text);color:var(--white)}
/* on the desk, "needs you by" is the flat page's first line, just below the fold, heading the day laid out */
.dk-needs{font:600 max(var(--md15),calc(var(--ud)*6.6))/1.15 var(--font-text);letter-spacing:-.005em;color:var(--white)}
.dk-rows{list-style:none;margin:calc(var(--ud)*3.4) 0 0;padding:0;display:grid;gap:calc(var(--ud)*2.8);
  font:500 max(var(--md15),calc(var(--ud)*7.4))/1.15 var(--font-text)}
.dk-rows li{display:grid;grid-template-columns:3.3em minmax(0,1fr);color:var(--g-d6)}
.dk-rows .t{color:var(--label);font-variant-numeric:tabular-nums}
html[data-moves~="ribbon"] .page .lay-desk{padding-bottom:calc(var(--ud)*8.6)}
.ev-line{font:500 calc(var(--ub)*8.6)/1.18 var(--font-text);letter-spacing:-.01em;color:var(--white)}
.ev-next{margin-top:calc(var(--ub)*4.6);font:500 calc(var(--ub)*5.3)/1.3 var(--font-text);color:var(--g-d6);text-wrap:balance}
.cross{position:absolute;left:50%;margin:0;font:800 max(var(--m19),calc(var(--ub)*13))/.95 var(--font-num);letter-spacing:-.03em;color:var(--white);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;pointer-events:none}
html[data-moves~="unfold"] .duo.is-live .page .lay-book>:not(.pg-clock){clip-path:inset(-10% calc((1 - var(--rv,1))*100%) -900% -10%);
  transform:translateX(calc((1 - var(--rv,1))*var(--ub)*-7))}
html[data-moves~="unfold"] .duo.is-live .face-back .lay-book>:not(.pg-clock){clip-path:inset(-10% -10% -900% calc((1 - var(--rv,1))*100%));
  transform:translateX(calc((1 - var(--rv,1))*var(--ub)*7))}
html[data-moves~="unfold"] .duo.is-live .page .lay-book>.pg-line,html[data-moves~="unfold"] .duo.is-live .page .lay-book>.rib{--rv:var(--rv1,1)}

/* ---------- 3 and 4. a statement, and the deadline that shows it */
.feat-in{display:grid;gap:clamp(28px,calc(var(--u)*5.4),64px)}
.feat-say{display:grid;gap:clamp(12px,1.5vw,22px);align-content:start;justify-items:start}
.feat .statement{font-size:clamp(34px,min(8.4vw,calc(var(--u)*7.2)),72px)}
@media (min-width:960px){
  .feat-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:clamp(40px,6vw,120px)}
  .feat .statement{font-size:clamp(34px,min(4.6vw,calc(var(--u)*8.6)),72px)}
}

/* the math: the notification she sends when the hours don't fit, arriving over the deadline it is about */
.stack{position:relative;display:grid;min-width:0;--nb-over:clamp(30px,3.4vw,44px)}
.nb{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;
  width:calc(100% - clamp(20px,4vw,52px));justify-self:center;margin-bottom:calc(var(--nb-over)*-1);
  padding:13px 16px 14px 14px;border-radius:clamp(20px,1.8vw,26px);
  background:linear-gradient(180deg,#3a3a3e,#2a2a2e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.06),0 22px 44px -14px #000}
.nb-icon{grid-row:1/3;align-self:start;width:clamp(32px,2.6vw,38px);height:auto;border-radius:22.5%;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.nb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:600 15px/1.25 var(--font-text);color:var(--white)}
.nb-head span{font-weight:400;font-size:13.5px;color:rgba(235,235,245,.62)}
.nb-text{grid-column:2;font:400 clamp(15px,1.15vw,17px)/1.36 var(--font-text);color:rgba(245,245,247,.94);text-wrap:pretty}
.stack .dl{padding-top:calc(var(--nb-over) + clamp(16px,2vw,28px))}

/* ---------- 5. the week */
.who{font:800 clamp(20px,2.2vw,32px)/1.05 var(--font-num);letter-spacing:-.03em;color:var(--g-a1);text-wrap:balance}
/* the week is the app's list, on its own surface: each row names its world beside its colour, so no key is needed */
.wk{position:relative;padding:clamp(6px,.8vw,12px) clamp(20px,2.4vw,36px) clamp(14px,1.6vw,22px);border-radius:var(--r-surface);
  background:var(--surface);box-shadow:var(--surface-edge)}
.wk-list{list-style:none;margin:0;padding:0}
.wk-list li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:clamp(14px,1.4vw,20px);row-gap:3px;
  padding-block:clamp(11px,calc(var(--u)*1.9),20px)}
/* the rows' rules start where the words do, as in the app's lists */
.wk-list li+li::before{content:"";position:absolute;top:0;right:0;left:calc(10px + clamp(14px,1.4vw,20px));height:1px;background:rgba(255,255,255,.09)}
.wk-list .sq{grid-row:1;width:10px;height:10px;align-self:center}
.wk-what{font:500 clamp(17px,1.55vw,23px)/1.25 var(--font-text);color:var(--white);min-width:0}
.wk-when{grid-column:2/4;font:400 clamp(14px,1.1vw,16px)/1.3 var(--font-text);color:var(--text-2)}
.wk-clock{grid-column:3;grid-row:1;align-self:baseline;font:800 clamp(20px,2.3vw,34px)/1 var(--font-num);letter-spacing:-.03em;color:var(--white);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.wk-clock.soft{color:var(--g-a1)}
.week .lede{font-size:clamp(17px,1.5vw,21px)}
.wk-note{margin-top:2px;text-align:right;font:500 clamp(13px,1vw,15px)/1.3 var(--font-text);color:var(--g-86)}

/* ---------- 6. plans: free on one page, Andy Plus on the other */
.plan{display:grid;gap:clamp(9px,calc(var(--u)*1.9),22px);align-content:center;justify-items:start;min-width:0}
.plan-name{margin:0;font:800 clamp(22px,2.2vw,30px)/1 var(--font-num);letter-spacing:-.02em;color:var(--white)}
.price{font:800 clamp(40px,min(14vw,calc(var(--u)*11.5)),104px)/.9 var(--font-num);letter-spacing:-.04em;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap}
.price small{font:500 clamp(16px,1.3vw,19px)/1 var(--font-text);letter-spacing:0;color:var(--text-2);margin-left:.6em;white-space:nowrap}
.plan p{max-width:27em}
.plan .year{font-size:clamp(17px,1.3vw,19px);line-height:1.42;color:var(--text-2)}
.gets{list-style:none;margin:0;padding:0;display:grid;gap:clamp(6px,calc(var(--u)*1.1),12px);font-size:clamp(18px,1.45vw,21px);line-height:1.38;color:var(--text)}
.gets li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;text-wrap:balance}
.gets .sq{transform:translateY(-1px)}
.plan .trial{font-size:clamp(17px,1.3vw,19px);line-height:1.42;font-weight:600;color:var(--white)}
.plan .keep{font:800 clamp(18px,1.65vw,24px)/1.1 var(--font-num);letter-spacing:-.025em;color:var(--g-a1);max-width:none}
.plan .keep .s{display:block}
.fine{display:grid;gap:6px;font-size:clamp(13.5px,1.02vw,15px);line-height:1.46;color:var(--g-86)}
.fine p{max-width:38em}
.plans-rule{display:none}
@media (min-width:900px) and (max-height:760px){
  .fine{font-size:13px;gap:4px}
  .gets{gap:4px;font-size:17.5px}
  .plan .year,.plan .trial{font-size:16.5px}
  .plan{gap:9px}
}
@media (max-width:899px){
  .plan{gap:clamp(8px,calc(var(--u)*1.4),22px)}
  .plan .year,.plan .trial{font-size:16.5px;line-height:1.42}
  .gets{font-size:17.5px;gap:clamp(4px,calc(var(--u)*.8),11px);line-height:1.36}
  .plan .keep{font-size:17px}
  .fine{gap:4px;line-height:1.4}
  .plan-s:last-child{padding-top:calc(var(--bar) + env(safe-area-inset-top,0px) + 14px);padding-bottom:16px}
  .week.screen{padding-bottom:14px}
  .week .feat-in{gap:clamp(16px,calc(var(--u)*3),28px)}
  .week .feat-say{gap:9px}
  .wk-list li{padding-block:clamp(8px,calc(var(--u)*1.35),14px)}
}
/* a short window, narrower than the side-by-side layouts (under 800px tall): each screen still fits the window */
@media (max-width:959px) and (max-height:800px){
  .plan .year,.plan .trial{font-size:15.5px;line-height:1.38}
  .gets{font-size:16.5px;line-height:1.32}
  .plan .keep{font-size:16px}
  .fine{font-size:12.5px;line-height:1.36}
  .feat-in{gap:clamp(14px,calc(var(--u)*2.6),28px)}
  .feat-say{gap:10px}
  .lede,.week .lede{font-size:16.5px;line-height:1.38}
  .feat .dl{padding:16px 18px 18px}
  .stack .dl{padding-top:calc(var(--nb-over) + 14px)}
  .hero>.wrap{gap:clamp(12px,calc(var(--u)*2.2),40px)}
  .hero .dl-line{margin-top:8px}
  .hero .rail{margin-top:10px}
  .hero .dl-needs{margin-top:10px;font-size:16.5px}
  .hero .dl-work{margin-top:3px;font-size:14.5px}
  .hero .dl-clock .left{margin-top:6px;font-size:15px}
  .get{gap:10px}
  .badge{margin-block:6px}
  .feat .dl-line{margin-top:8px}
  .wk{padding:0 16px 8px}
  .wk-list li{padding-block:7px}
  .wk-what{font-size:16.5px}
  .wk-when{font-size:13.5px}
  .wk-note{font-size:13px}
  .stack{--nb-over:26px}
  .nb{padding:10px 12px 11px 11px;column-gap:10px}
  .nb-icon{width:28px}
  .nb-head{font-size:14px}
  .nb-text{font-size:14.5px;line-height:1.32}
}
/* the notification says it in her words, so the math's own sentence steps aside where the window is short or narrow */
@media (max-width:959px) and (max-height:720px),(max-width:365px) and (max-height:800px){
  .feat-say:has(+.stack) .lede{display:none}
}
@media (max-width:899px) and (max-height:660px){
  .plan{gap:7px}
  .gets{gap:3px}
  .fine{font-size:12px;gap:3px}
  /* on the days the notification's weekday ("sun", "mon", "wed") wraps it to a fourth line, the math still fits */
  .stack .dl{padding-top:calc(var(--nb-over) + 9px)}
}
@media (min-width:900px){
  .price{font-size:clamp(54px,min(7vw,calc(var(--u)*10.6)),104px)}
  .home .plans{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.12fr);column-gap:clamp(36px,5vw,96px);align-content:center;
    min-height:100vh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
    padding-block:calc(var(--bar) + env(safe-area-inset-top,0px) + clamp(10px,calc(var(--u)*2.6),40px)) clamp(12px,calc(var(--u)*3.4),64px)}
  .home .plans .screen{display:block;min-height:0;padding:0;scroll-snap-align:none;align-self:start}
  .plans-rule{display:block;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.16) 18%,rgba(255,255,255,.16) 82%,rgba(255,255,255,0))}
}

/* ---------- 7. privacy */
.priv>.wrap{display:grid;gap:clamp(14px,1.8vw,26px);justify-items:start}
.priv .statement{font-size:clamp(44px,min(8.4vw,calc(var(--u)*12.5)),124px)}
.priv .also{font:500 clamp(19px,1.9vw,26px)/1.35 var(--font-text);color:var(--white)}
.priv .more{font-size:17px;color:var(--text-2)}
.priv .more a,.fq a{text-underline-offset:4px;text-decoration-thickness:1px}
.priv .more a:hover{color:var(--white)}

/* ---------- questions (the support page) */
.fq-list{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line);max-width:920px}
.fq details{border-bottom:1px solid var(--line)}
.fq summary{display:flex;align-items:center;gap:16px;padding-block:22px;cursor:pointer;list-style:none;
  font:500 clamp(18px,1.7vw,22px)/1.3 var(--font-text);color:var(--white)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::before{content:"";flex:none;width:10px;height:10px;border-radius:var(--r-mark);background:var(--g-5c)}
.fq summary:hover::before,.fq details[open] summary::before{background:var(--white)}
.fq details p{padding:0 0 26px 25px;color:var(--text);max-width:36em}

/* ---------- 8. the close */
.close-in{display:grid;gap:clamp(20px,calc(var(--u)*3.4),40px);justify-items:start}
.mast{width:min(74vw,620px,calc(var(--u)*86));height:auto;color:var(--white)}
.close .what{font:400 clamp(20px,2.2vw,30px)/1.25 var(--font-text);color:var(--text-2)}

/* ---------- footer */
.foot{border-top:1px solid var(--line);padding-block:clamp(32px,4vw,52px) clamp(44px,5vw,64px);font-size:14px;color:var(--text-2)}
.foot-in{display:grid;gap:26px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px}
.foot .brand{margin:0}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.foot nav a{text-decoration:none;padding-block:10px}
.foot nav a:hover{color:var(--white)}
.foot .sel{user-select:all;-webkit-user-select:all}
.legal{display:grid;gap:6px;font-size:13px;line-height:1.5;color:var(--g-86);max-width:64em}

/* ---------- preview only (not part of the site) */
.pv{border-top:1px dashed var(--g-3a);padding-block:28px 40px;font-size:13px;color:var(--text-2)}
.pv-in{display:grid;gap:14px}
.pv-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.pv-row>span{min-width:9.5em}
.pv button{min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-control);background:none;color:var(--text-2);font:500 13px/1 var(--font-text);cursor:pointer}
.pv button[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--black)}

/* ---------- the pages around the home page: support, press, privacy, terms */
.inner{padding-block:clamp(48px,9vh,112px) clamp(96px,13vw,184px)}
.inner .statement{margin-top:16px;max-width:15em}
.read{margin-top:clamp(52px,7vw,104px);display:grid;gap:clamp(48px,6vw,84px);max-width:920px}
.read section{display:grid;gap:16px;justify-items:start}
.read h2{margin:0;font:600 clamp(15px,1.1vw,17px)/1.3 var(--font-text);letter-spacing:-.005em;color:var(--label)}
.read p{max-width:36em}
.read .big{font:500 clamp(20px,2.2vw,28px)/1.32 var(--font-text);color:var(--white);max-width:26em}
.read a{text-underline-offset:4px;text-decoration-thickness:1px}
.read .sel{user-select:all;-webkit-user-select:all}
.read .fq-list{margin-top:0;width:100%}
.read .gets{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.read .gets li{display:flex;align-items:center;gap:12px}
.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;width:100%}
.mark{display:grid;place-items:center;aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--r-tile);padding:28px}
.mark.on-white{background:var(--white);border-color:var(--white)}
.mark img{max-height:64px;width:auto}
.legal-read{margin-top:clamp(40px,6vw,80px);max-width:36em}
.legal-read h2{margin:2.4em 0 .6em;font:800 clamp(22px,2.4vw,30px)/1.1 var(--font-num);letter-spacing:-.02em;color:var(--white)}
.legal-read h3{margin:2em 0 .5em;font:600 18px/1.3 var(--font-text);color:var(--white)}
.legal-read p,.legal-read ul,.legal-read ol{margin:0 0 1.1em}
.legal-read ul,.legal-read ol{padding-left:1.2em}
.legal-read li{margin-bottom:.4em}
.legal-read a{text-underline-offset:4px;text-decoration-thickness:1px}
.legal-read .small{display:block;margin-bottom:2em}

/* ---------- 404 and the thanks page */
.solo{min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar));display:grid;align-content:center;gap:clamp(20px,3vw,36px);padding-block:64px 120px}
.solo .statement{max-width:14em}

/* buttery (Oct 2): while the hinge moves, the figure is one layer the GPU scales and turns; at rest the type is drawn again, sharp */
.duo.is-live.is-moving .book-pos{will-change:transform}
/* what fades or unfolds while the hinge moves (the light in the gutter, the faces, the day's rows, the crease, "now") is
   drawn once and blended on the GPU, so no page is painted again mid-move (Safari paints the whole page for a child's
   opacity or clip; Chrome does not, which is why Chromium tests never showed it) */
.duo.is-live .glow,.duo.is-live .lay,.duo.is-live .now,.duo.is-live .cross,.duo.is-live .fold,.duo.is-live .rib-fold,.duo.is-live .rib-tail{will-change:opacity}
.duo.is-live .lay-book>:not(.pg-clock){will-change:transform}