/* The testers' download page. On top of home.css (the site's tokens, type, kicker and buttons): the sculpted header,
   the hero card, the window a tester sees once the file is open, and the set-up notes. The window is drawn in the Mac's
   own system font, so it reads as their Mac rather than as this page. */

:root{--top-h:82px;--hx:clamp(1.25rem,6vw,5.4rem);
  --hw:clamp(8rem,min(19vw,31vh),20rem);}

.top{background:var(--bg-a,var(--ground));}
.bt-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);}
.hero-word{position:absolute;z-index:-1;pointer-events:none;font-family:var(--display);font-weight:700;line-height:.9;
  letter-spacing:-.07em;color:var(--word);white-space:nowrap;user-select:none;}
.bt-words{position:relative;z-index:1;min-width:0;}
.bt-hero .kicker{margin:0 0 clamp(1rem,2.4vh,1.5rem);padding:.5rem .9rem;border-radius:30px;background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--ink);}
.bt-hero .kicker::before{width:7px;height:7px;background:var(--accent);}
.bt-hero .title{font-size:clamp(2.75rem,calc(.9rem + 3.6vw),4.25rem);line-height:1.03;max-width:12ch;}
.bt-hero .title span{color:var(--two-tone);}
.bt-say{margin-top:clamp(.8rem,2vh,1.2rem);max-width:31ch;font-size:var(--step-1);line-height:1.5;color:var(--ink);text-wrap:pretty;}

/* the download: one dark button and its size; the checksum folded away under a small line, for whoever wants it */
.dl{margin-top:clamp(1.4rem,3.2vh,2rem);}
.dl-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;}
.dl-go{gap:.65rem;}
.dl-go svg{flex:none;width:18px;height:18px;}
.dl-size{font-weight:700;font-size:var(--step-0);color:var(--ink);}
.dl-soon{display:inline-flex;align-items:center;min-height:54px;padding:0 1.3rem;border:1.5px dashed var(--line-strong);border-radius:16px;
  background:rgba(255,255,255,.45);font-weight:600;color:var(--ink);}
.dl-sum{margin-top:.5rem;max-width:36rem;font-size:15px;line-height:1.5;color:var(--muted);}
/* its line and arrow: home.css's small fold, shared with the homepage's work items */
.dl-sum p{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem;padding-bottom:.25rem;}
.dl-sum-k{font-weight:700;}
.dl-sum code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere;
  word-break:break-all;}
.dl-for{margin-top:1.1rem;max-width:40ch;font-size:var(--step-0);font-weight:700;line-height:1.45;color:var(--ink);}
.dl-wrong{margin-top:.35rem;max-width:46ch;font-size:15.5px;line-height:1.5;color:var(--muted);}
/* on a phone or a tablet, where zippr cannot run: where to open the link instead */
.dl-phone{display:none;margin-top:.6rem;max-width:46ch;font-size:var(--step-0);font-weight:700;line-height:1.45;color:var(--ink);}
@media (hover:none) and (pointer:coarse){.dl-phone{display:block;}}

/* the window that opens: the download's own Finder window, named zippr, as the disk image lays it out: its background
   picture with the arrow, at its shape (640 by 400 points), zippr's own icon on the left and Applications on the right,
   each centred where the disk image centres it, at its icon size (128 of 640 points). Applications' icon is the
   system's folder in Finder, so the page draws its own */
.bt-pic{position:relative;z-index:1;min-width:0;}
.win{width:100%;max-width:34rem;overflow:hidden;border-radius:16px;background:var(--sheet);
  box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.09),0 34px 70px -34px rgba(var(--shadow-rgb),.5);}
.win-bar{position:relative;display:flex;align-items:center;height:40px;padding:0 14px;background:#F6F6F7;border-bottom:1px solid #E3E4E8;}
.win-lights{display:flex;gap:8px;}
.win-lights i{display:block;width:12px;height:12px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14);}
.win-lights i:nth-child(2){background:#FEBC2E;}
.win-lights i:nth-child(3){background:#28C840;}
.win-name{position:absolute;left:50%;transform:translateX(-50%);font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",var(--body);
  color:#4A4F59;}
.win-body{position:relative;aspect-ratio:640/400;background:#F5F5F7;}
.win-bg{position:absolute;inset:0;display:block;width:100%;height:100%;}
.win-icon{position:absolute;top:47.5%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);}
.win-at-zippr{left:26.5625%;}
.win-at-apps{left:73.4375%;}
.win-icon img,.win-icon svg{display:block;width:100%;height:100%;}
.win-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:500 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",var(--body);color:#1F2329;}
/* a copy of zippr's icon that glides from zippr into Applications once, along the DMG's arrow, where motion is welcome
   (the drag of step 2); never drawn otherwise */
.win-ghost{display:none;position:absolute;top:47.5%;left:26.5625%;width:20%;height:auto;transform:translate(-50%,-50%);
  pointer-events:none;}
@media (prefers-reduced-motion:no-preference){
  .win-ghost{display:block;opacity:0;animation:bt-glide 1.6s .9s var(--ease) both;}
  @keyframes bt-glide{
    0%{opacity:0;left:26.5625%;transform:translate(-50%,-50%) scale(1);}
    14%{opacity:.9;left:26.5625%;transform:translate(-50%,-50%) scale(1.04);}
    78%{opacity:.9;left:73.4375%;transform:translate(-50%,-50%) scale(1);}
    100%{opacity:0;left:73.4375%;transform:translate(-50%,-50%) scale(.86);}
  }
}

/* the three install steps, under the window they describe */
.win-steps{padding:20px 26px 24px;border-top:1px solid var(--line);}
.bt-h{display:flex;align-items:center;gap:.65rem;font-size:var(--step-2);letter-spacing:-.02em;line-height:1.2;}
.steps{counter-reset:bt-step;display:grid;gap:12px;margin-top:14px;}
.steps li{counter-increment:bt-step;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:start;
  font-size:var(--step-0);line-height:1.5;color:var(--ink);}
.steps li::before{content:counter(bt-step);display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:-1px;
  border-radius:50%;background:var(--accent-own);color:var(--on-accent);font:700 15px/1 var(--display);}

/* set it up: the words on the page, the details on a sheet */
.bt-setup{display:grid;gap:clamp(1.1rem,3vw,2rem);}
.bt-h2{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;font-size:clamp(2.2rem,calc(1.2rem + 2.6vw),3.4rem);
  letter-spacing:-.035em;line-height:1.05;}
.bt-sheet{min-width:0;padding:clamp(1.3rem,3vw,2rem);border-radius:25px;background:var(--sheet);box-shadow:var(--shadow);
  --muted:var(--muted-own);}
.ticks{display:grid;gap:14px;}
.ticks li{position:relative;padding-left:38px;font-size:var(--step-0);line-height:1.5;color:var(--ink);}
.ticks li::before{content:"";position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--known-bg);}
.ticks li::after{content:"";position:absolute;left:9px;top:7px;width:6px;height:11px;border-right:2.5px solid var(--accent-own);
  border-bottom:2.5px solid var(--accent-own);transform:rotate(45deg);}
.bt-need{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--muted);}
.bt-more{border-top:1px solid var(--line);}
.bt-more:first-of-type{margin-top:1.1rem;}
.bt-more summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.bt-more summary::-webkit-details-marker{display:none;}
.bt-more summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease);}
.bt-more[open] summary::after{transform:rotate(-135deg) translateY(-3px);}
.dots{display:grid;gap:10px;padding-bottom:1.1rem;}
.dots li{position:relative;padding-left:20px;font-size:16px;line-height:1.55;color:var(--ink);}
.dots li::before{content:"";position:absolute;left:3px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--line-strong);}
.dots code{padding:.05em .35em;border-radius:6px;background:#F1F3F6;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;overflow-wrap:anywhere;}

/* ================================== wider screens ================================== */
@media (min-width:769px){
  .top{position:sticky;top:0;z-index:40;height:var(--top-h);margin:0 24px;padding:0;}
  .top .shell{display:flex;justify-content:center;align-items:flex-start;height:100%;max-width:none;padding:0;}
  .top .wordmark{height:calc(var(--top-h) + 4px);padding:0 42px 6px;border-radius:0 0 40px 40px;background:var(--bg-a,var(--ground));
    font-size:40px;line-height:1;font-weight:700;letter-spacing:-.05em;}

  .bt-hero{display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);align-items:end;column-gap:clamp(2rem,4vw,4rem);
    min-height:max(calc(100svh - var(--top-h) - 24px),40rem);margin:0 24px;
    padding:calc(var(--hw) + 2rem) clamp(1.5rem,4vw,4rem) clamp(2.2rem,5.5vh,3.1rem) clamp(1.5rem,5vw,4.45rem);border-radius:36px;}
  .hero-word{left:clamp(1.5rem,5vw,4.45rem);top:clamp(.25rem,1.5vh,1rem);font-size:var(--hw);}
  .bt-pic{display:flex;justify-content:center;align-self:center;padding-top:clamp(0rem,4vh,3rem);}

  .bt-setup{grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:start;column-gap:clamp(2rem,5vw,5rem);max-width:90rem;
    margin-inline:auto;padding:clamp(3.5rem,9vh,5.5rem) var(--hx) clamp(3.5rem,9vh,5.5rem);}
  .bt-setup-words{position:sticky;top:calc(var(--top-h) + 2rem);}
}

/* ================================== phones ================================== */
@media (max-width:768px){
  :root{--hdr:70px;}
  .top{position:sticky;top:0;z-index:40;height:var(--hdr);padding:0;}
  .top .shell{display:flex;align-items:center;height:100%;padding-inline:22px;}
  .top .wordmark{font-size:34px;font-weight:700;letter-spacing:-.045em;line-height:1;}

  .bt-hero{display:flex;flex-direction:column;align-items:stretch;margin:4px 12px 0;padding:118px 20px 24px;border-radius:30px;}
  .hero-word{top:12px;left:0;right:0;text-align:center;font-size:109px;line-height:1;}
  .bt-hero .kicker{align-self:flex-start;margin-bottom:16px;padding:.45rem .8rem;font-size:14px;}
  .bt-hero .title{font-size:40px;line-height:1.05;letter-spacing:-.045em;}
  .bt-say{margin-top:14px;font-size:18px;line-height:1.55;}
  .dl-go{width:100%;}
  .dl-row{gap:.5rem;}
  .bt-pic{margin-top:28px;}
  .win{max-width:none;}
  .win-steps{padding:18px 18px 20px;}

  .bt-setup{padding:44px 24px 56px;}
}