/* Generated by tools/sync-footer.py from index1.html. Do not edit:
   change the footer in index1.html and run the script again. */
.brandmark{text-decoration:none;display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--ink)}
.brandmark img{width:26px;height:26px;display:block;flex:0 0 auto}
.nav .btn{text-decoration:none}
/* ── buttons ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;font-weight:600;text-decoration:none;border-radius:var(--r-pill);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn-dark{background:var(--ink);color:#fff;padding:13px 24px;font-size:15px;
  box-shadow:0 2px 12px rgba(0,0,0,.16)}
.btn-dark:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,0,0,.22)}
/* The mark sits a hair above the baseline, the way Apple sets it on their own
   download buttons; optically centred rather than box centred. */
.btn .apple{width:1em;height:1em;margin-right:.12em;position:relative;top:-.06em;flex:0 0 auto}
.btn-sm .apple{width:.95em;height:.95em}
.btn-sm{padding:9px 17px;font-size:13.5px}
/* ── cta + footer ──────────────────────────────────────────────────── */
.cta{text-align:center;background:var(--ink);color:#fff;border-radius:30px;
  padding:88px 30px;margin:0 24px}
.cta .btn-dark{background:#fff;color:var(--ink)}
footer{border-top:1px solid var(--hairline);padding:34px 0;margin-top:110px}
footer .in{display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px}
footer a{text-decoration:none}
/* Not the buttons: they are links too, and ink on ink is invisible text. */
footer a:not(.btn):hover{color:var(--ink)}
body.zen .nav .link,body.zen .nav .btn,body.zen .nav .brand{display:none}
body.zen>section:not(#try),body.zen .band,body.zen footer{display:none}
.sheet-acts .btn{padding:11px 20px;font-size:14px}
.btn-x{background:#000;color:#fff;display:inline-flex;align-items:center;gap:8px}
.btn-x:hover{opacity:.85}
.btn-x .chev{opacity:.65}
@media(max-width:420px) {
  .cols{grid-template-columns:1fr}
  .btn{padding:12px 20px}
}
/* The author photo. Drop a square crop at assets/brand/author.jpg and it
   appears in the story byline and the footer credit. Until then both show a
   quiet circle rather than a broken image. */
.av{display:inline-block;border-radius:50%;background:rgba(20,40,10,.1) center/cover no-repeat;
  background-image:url("brand/author.jpg");flex:0 0 auto}
/* ── footer ────────────────────────────────────────────────────────── */
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
@media(max-width:760px) {
  footer .cols{grid-template-columns:1fr;gap:30px}
}
footer h5{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:13px;white-space:nowrap}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer li a{font-size:13.5px;color:var(--text-2);text-decoration:none}
footer li a:hover{color:var(--ink)}
footer .ft-credit .av{width:22px;height:22px;vertical-align:-6px;margin-right:7px}
.byline .av{width:38px;height:38px}
footer .blurb{font-size:13.5px;color:var(--text-2);line-height:1.6;max-width:280px;
  font-weight:400;margin-top:11px}
/* ── video bleed: hero and footer ──────────────────────────────────── */
/* One pattern used twice. A media plate at the back, then scrims that are
   doing all the design work, then content above them. The scrims are what
   make photography usable behind text: without them this is a hero with a
   legibility problem and a wordmark nobody can read. */
.bleed{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bleed-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Hero art sits 10px higher than the box. Done by moving the box and growing it
   back, not object-position: the source and the box are near enough the same
   ratio that cover leaves no vertical slack to pan into. The extra 10px of
   height keeps the bottom edge covered so no ground shows through. */
.hero .bleed-media{top:-10px;height:calc(100% + 10px)}
.scrim{position:absolute;inset:0}
/* Ends the section without a seam: the photo dissolves into the page colour
   rather than stopping at an edge. */
.hero .scrim-page{top:auto;height:34%;background:linear-gradient(180deg,rgba(247,247,244,0) 0%,var(--ground) 100%)}
/* ── footer: video bleed ───────────────────────────────────────────── */
footer{position:relative;overflow:hidden;border-top:0;margin-top:110px;
  padding:56px 0 0;min-height:780px}
footer .ft-v{background:linear-gradient(180deg,rgba(247,247,244,.92) 0%,rgba(247,247,244,.42) 46%,rgba(247,247,244,.06) 100%)}
footer .ft-h{background:linear-gradient(90deg,rgba(247,247,244,.84) 0%,rgba(247,247,244,.18) 50%,rgba(247,247,244,.56) 100%)}
.ft-in{position:relative;z-index:2;display:flex;gap:56px;align-items:flex-start}
.ft-intro{width:380px;flex:0 0 auto}
.ft-head{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.06;
  margin:26px 0 14px;max-width:360px}
footer .blurb{max-width:360px;margin:0}
.ft-cta{margin-top:26px}
.ft-credit{margin-top:34px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted)}
.ft-credit a{color:var(--text-2)}
footer .cols{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:0}
footer .cols li{font-size:13.5px;color:var(--text-2)}
/* Oversized, crushed line-height, cropped by the footer. The bleed off three
   edges is the effect; a wordmark that fits inside the box is just a word. */
/* Aligned to the content column, not the viewport, so it reads as the footer's
   own signature rather than a stray graphic. */
.ft-wordmark{position:absolute;left:50%;transform:translateX(-50%);
  width:1080px;max-width:100%;padding:0 24px;box-sizing:border-box;bottom:-7%;z-index:1;
  font-size:clamp(140px,29vw,420px);font-weight:900;letter-spacing:-.05em;line-height:.76;
  color:rgba(10,10,10,.92);user-select:none;pointer-events:none}
@media(max-width:900px) {
  .ft-in{flex-direction:column;gap:44px}
  .ft-intro{width:100%}
  footer{min-height:0;padding-bottom:120px}
  /* No scrim override here on purpose: the footer wash is the desktop one at
     every width. The old override held .88 to 62% depth, which stacked with
     .ft-h left the top of the footer 99% washed and the meadow showing only in
     the last fifth. Dropping .ft-h as well went too far the other way: with no
     horizontal wash the video ran unwashed at the left edge, where desktop
     takes it to .84, and read as a darker footer than the desktop one.

     Both scrims are therefore inherited: .ft-v .92/.42/.06 down, .ft-h
     .84/.18/.56 across. Only the type colours below are phone-specific, and
     those cost the artwork nothing. */
  footer li a,footer .ft-credit{color:var(--ink)}
  footer h5{color:var(--text-2)}
  .ft-wordmark{bottom:-4%}
}
@media(max-width:760px) {
  /* One column, not two. Two columns of three or four links each put four
     headings in a 2x2 block that reads as a table of contents; stacked, each
     group is a heading with its links under it, which is the shape the
     reference footers use and the shape a thumb scrolls past. */
  footer .cols{grid-template-columns:1fr;gap:30px;width:100%}
  /* 10px clear of where the 900px rule puts it. */
  .ft-wordmark{bottom:calc(-4% + 10px)}
  /* One line under the button, not three. The macOS version and the architecture
     are both in the footer's Requirements column; on a phone they were two rows
     of small grey type sitting in the flowers. */
  .micro{margin-top:14px;font-weight:500}
  /* The seam under the hero. --ground is rgb(247,247,244) and #what is
     rgb(244,244,240), and the spec band that used to sit between them is
     display:none at this width, so the fade landed on a 3-value step against
     the next section and read as a line. Ends on #what's own colour instead.

     The fade is sized to the overlap and lands exactly on #what's top edge, so
     the two backgrounds meet at identical colour with nothing flat in between.
     Bottom-anchored at the pull distance and the same height as it: fully
     transparent where #what's edge is still 150px away, solid #F4F4F0 the
     pixel it arrives. That is a 150px ramp where the old version had 77px and
     then a flat sliver, which is what read as an edge.

     Stops approximate ease-in-out rather than a straight line. A linear alpha
     ramp over this distance bands visibly on a phone: the eye picks up the
     constant rate of change as a boundary of its own. */
  .hero .scrim-page{top:auto;bottom:var(--hero-pull);height:var(--hero-pull);
    background:linear-gradient(180deg,rgba(244,244,240,0) 0%,
      rgba(244,244,240,.06) 18%,rgba(244,244,240,.22) 36%,
      rgba(244,244,240,.5) 54%,rgba(244,244,240,.78) 72%,
      rgba(244,244,240,.94) 88%,#F4F4F0 100%)}
  .nav .brand,.nav a.link,.nav .btn{display:none}
  /* Hero and footer keep their backdrops, video included. */
  .sig-wave{height:120px}
}
/* Used by the share sheet's Close button too, which had no rule at all. */
.btn-ghost{background:rgba(255,255,255,.72);color:var(--ink);padding:13px 22px;
  font-size:15px;border:1px solid var(--hairline);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}
.btn-ghost:hover{background:#fff;transform:translateY(-1px)}
.btn-ghost .pl{width:.8em;height:.8em;flex:0 0 auto}
/* No checkout provider yet, so BUY_URL is empty and these lose their href.
   Better to look unavailable than to look live and do nothing. */
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.ctarow .btn{justify-content:center;width:auto}
footer .wrap{max-width:1080px}