/* ---------------------------------------------------------------------------
   The footer (template-parts/footer-hp.php, inc/social.php). Deep green, full width:
   the logo and Get started, three columns of links, the socials, and a base line.
   Older footer rules in home.css and pages.css set a white band and dark links on
   .lp__foot; these win over them on purpose.
   ------------------------------------------------------------------------- */
html body footer.lp__foot.hf{position:relative;overflow:hidden;margin:0!important;padding:clamp(40px,5vw,64px) 0 0!important;border:0!important;border-radius:0!important;color:#d5e6de!important;font-size:15.5px;
  background:radial-gradient(90% 120% at 100% 0%,#1f6b52 0%,transparent 55%),radial-gradient(70% 90% at 0% 100%,#11493d 0%,transparent 60%),#0d2f29!important}
footer.hf::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
footer.hf .hf__in{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);width:min(1240px,100% - 40px);margin:0 auto;padding-bottom:clamp(40px,6vw,72px)}
footer.hf .hf__logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none!important}
footer.hf .hf__logo img{width:34px;height:auto;filter:brightness(0) invert(1)}
/* The quiet text in the footer was #9fc7b6 on the green, which measures 3.45:1 and
   misses AA. The copyright line and the line under the wordmark are the two pieces
   of text on this site a reader is most likely to be looking for deliberately, so
   they are lifted to a tint that clears 4.5:1 on the same ground.
   It carries !important and a doubled class because a rule further down this same
   file sets the copyright line to the failing tint, also with !important and at the
   same specificity, and of two equal rules the later one wins. Doubling .hf puts this
   one ahead on weight rather than on position. */
footer.hf.hf .hf__base p,
footer.hf.hf .hf__logo small{color:#cce5d8!important}
footer.hf .hf__logo i{display:block;font-style:normal;font-size:28px;font-weight:600;letter-spacing:-.01em;color:#fff!important;line-height:1.05}
footer.hf .hf__logo i b{font-weight:800;color:#a8ebcb!important}
footer.hf .hf__logo small{display:block;margin-top:4px;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9fc7b6!important}
/* The slogan under the lockup, back on 2026-10-25 and reworded: "move the logo to the
   left and add the slogan Optimised handling plans, written in seconds" (owner), and out
   again a few minutes later with the lockup ("remove this completely"). Both are kept
   because both have now been removed and restored inside one day.

   The measure breaks it after the comma, where the owner wrote the break, instead of
   leaving the orphan the old 30ch produced ("...written in / seconds."). Measured in
   Open Sans on 2026-10-25, in px:

                       "Optimised handling plans,"   "...plans, written"   14em
     16px (here)                           194.7                 252.1     224
     13.5px (hx2070 on /welcome/)          164.3                 212.7     189

   so the break falls after the comma for any measure between those two columns, and 14em
   lands in the middle of that band at BOTH sizes, which is the whole reason it is em and
   not px: the landing page sets this sentence to 13.5px to match its own smaller footer,
   and a px measure tuned to 16px would break in the wrong place there. Re-measure if the
   words change. */
footer.hf .hf__line{margin:20px 0 26px;max-width:14em;font-size:16px;line-height:1.55;color:#d5e6de!important}
footer.hf a.hf__go{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;background:#fff!important;color:#0d3d35!important;font-weight:700;font-size:16px;text-decoration:none!important;box-shadow:0 16px 34px -18px rgba(0,0,0,.6);transition:transform .25s,box-shadow .25s}
footer.hf .hf__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
footer.hf a.hf__go:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(0,0,0,.7)}
footer.hf a.hf__go:hover svg{transform:translateX(3px)}
footer.hf .hf__col,footer.hf .hf__col nav{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
footer.hf .hf__col b,footer.hf .hf__soc b{display:block;margin:0 0 6px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a8ebcb!important}
/* 16px over a 1.35 line box is 21.6px tall, and with padding forced to zero that was the
   whole target: every link in these columns sat 2px under the 24px WCAG 2.2 asks for
   (2.5.8). Raised by the line box rather than by padding, because padding here is
   !important and the underline is positioned from the box's own bottom edge. */
footer.hf .hf__col a{position:relative;display:inline-block;padding:0!important;color:#fff!important;text-decoration:none!important;font-size:16px;font-weight:500;line-height:1.5;min-height:24px;opacity:.88;transition:opacity .2s}
footer.hf .hf__col a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:#a8ebcb;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
footer.hf .hf__col a:hover{opacity:1}
footer.hf .hf__col a:hover::after{transform:scaleX(1)}
footer.hf .hf__soc{margin-top:22px;display:flex;flex-direction:column;gap:10px}
footer.hf .hf__socRow{display:flex;flex-wrap:wrap;gap:10px}
footer.hf .hf__socRow a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff!important;opacity:1;transition:background .25s,transform .25s,color .25s}
footer.hf .hf__socRow a::after{display:none}
footer.hf .hf__socRow a:hover{background:#a8ebcb;color:#0d3d35!important;transform:translateY(-3px)}
footer.hf .hf__socRow svg{width:19px;height:19px}
footer.hf .hf__base{position:relative;border-top:1px solid rgba(255,255,255,.12)}
footer.hf .hf__base p{width:min(1240px,100% - 40px);margin:0 auto;padding:16px 0 0;font-size:13px;line-height:1.6;color:#9fc7b6!important}
footer.hf .hf__base p:last-child{padding:6px 0 24px}
footer.hf a:focus-visible{outline:3px solid #a8ebcb;outline-offset:3px;border-radius:6px}
/* The logo lockup, everywhere it appears (header, footer, workspace).
   =====================================================================
   NOTE, 2026-10-25: the FOOTER no longer renders a lockup at all (owner: "remove this
   completely"). Everything in this section still governs the header and the auth pages,
   and is kept intact for the footer because the mark has been taken out and put back
   twice in one day. Nothing here describes the footer on the screen today.

   It used to run the tagline exactly as wide as "Handling Plan" above it: the words set
   the width, the tagline took it with width:0 and min-width:100%, and a script in
   functions.php shrank the type until twenty-nine characters fitted. Measured on
   2026-10-25 that came out at 7.71px in the header and 7.38px in the footer of the same
   page, and on a narrower window the script hit its floor and withdrew the line
   altogether, which is why the header tagline was display:none at 6.08px. A tagline
   nobody can read is not a tagline, and two sizes for one lockup is not a lockup.

   So the measure now follows the type instead of the type following the measure. The
   tagline is set once, here, at a size that reads, and the column grows to whatever it
   needs; the words above simply sit in a slightly wider box. Header and footer are
   identical by construction rather than by two runs of the same script.

   The one thing it cannot do is fit a phone: at 10px the lockup is 231px, and beside the
   burger and the code link that overflowed a 390px header by 29px. So it is withdrawn
   below the width where the header collapses to a burger, which is a decision taken here
   rather than a script giving up. Anything that sets a size on this element has to beat
   the inline style the fitter may already have written, hence !important. */
/* The tagline runs to exactly the width of the wordmark above it, which is the lockup
   the owner asked for. Two things have to be true at once for that to work, and the old
   build only ever managed one of them.

   `justify` can only ADD space between words, never remove it, so the wordmark has to be
   the wider of the two or the tagline spills past it. Measured in Archivo on 2026-10-25:

     wordmark  23px 135px | 28px 164px | 30px 176px | 32px 187px | 34px 199px
     tagline  9.5px 168px | 10px 177px | 11px 194px      (uppercase, 600, no tracking)

   At the 28px the footer was using, a 10px tagline is 177px against a 164px wordmark, so
   it overhung by 13px: that is the overhang in the owner's screenshot. The old build hid
   the problem by shrinking the type until it fitted, which is how it reached 7.38px and
   then vanished. **32px against 10px** is the first clean pair: the wordmark is 187px, the
   tagline 177px, and justify opens the ten point gap evenly across the words. So the
   wordmark grows and the tagline stays readable, rather than the other way round.

   The pair generalises, which matters if this is ever wanted at another size: the tagline
   must be 0.3125 of the wordmark, since the wordmark sets 5.85px per point of size and
   the tagline 18.68. 32/10 is that ratio exactly. 24/7.5 would be the footer-sized one.

   Only where the tagline shows, which is 860px and up. Below that the tagline is withdrawn
   and the wordmark goes back to the compact size the header already used, because a 187px
   wordmark beside the burger overflows a phone. */
.tp-logo > span,footer.hf .hf__logo > span{display:inline-grid!important;justify-items:stretch}
.tp-logo > span > small,footer.hf .hf__logo > span > small{
  display:block!important;width:0!important;min-width:100%!important;
  white-space:nowrap;overflow:visible!important;
  font-size:10px!important;line-height:1.2!important;
  /* The width is made up with TRACKING, not word spacing. Left to justify alone, the
     10.6px of slack went into the only three word gaps there are, so each one more than
     doubled and the line read as four separate words. Spread across the twenty-nine
     characters instead it is 0.035em each, which reads as a tracked caption, which is
     what a tagline under a wordmark should be.
       measured in Archivo, 10px, uppercase 600, against a 187.28px wordmark:
       0em 176.64  .02em 182.45  .03em 185.34  .035em 186.80  .037em 187.38  .04em 188.24
     .035em lands 0.48px short on purpose, so justify is left closing a hairline across
     those three gaps (0.16px each, invisible) rather than a tenth of the line. It also
     keeps justify as the safety net: if Archivo ever fails to load and the fallback runs
     narrow, justify still fills to the wordmark instead of leaving the line short. */
  letter-spacing:.035em!important;text-transform:uppercase;
  text-align:justify!important;text-align-last:justify!important;
  -moz-text-align-last:justify!important;margin-right:0!important}
/* 32px is now the AUTH mark alone, since the footer has no mark to size. It used to pin
   both, and the comment it replaced warned that a wordmark may only shrink where its
   tagline goes with it: the first attempt at the phone breakpoint dropped every wordmark
   to 24px but withdrew only the HEADER's tagline, so the footer kept a 10px tagline
   against a 140px wordmark and overhung it by 36px. That trap is still live for anything
   that sizes a lockup here, hence the ratio noted above. */
html body .tp-auth__logo i{font-size:32px!important}
html body .tp-auth__logo i b{font-size:inherit!important}
@media (min-width:860px){
  html body .tp-logo i{font-size:32px!important}
  html body .tp-logo i b{font-size:inherit!important}
}
/* The HEADER only. The footer keeps its tagline on a phone, and must: it has a stacked
   brand block with room to spare, measured at 390px with no overflow, and hx2070.css
   already forces it visible with html body footer.lp__foot.hf .hf__logo small, which
   outranks anything written here. Since that file loads on the landing page alone, a
   rule hiding both would have hidden the footer tagline on every inner page and kept it
   on the home page: a new inconsistency, which is the opposite of the point. */
@media (max-width:859px){
  .lp__head .tp-logo > span > small,.lp__mark > span > small{display:none!important}
}

/* The close of the page and the footer, as one ground (owner, 2026-10-25).
   =====================================================================
   Three near-identical pale greens were stacked with a seam between them. Measured:

     #start  "Write your first plan today"   background transparent, so the body
                                             showed through at #f4f6f5, under a
                                             13% green radial wash
     the gap main.lp__tiles padding-bottom   12px of that same #f4f6f5
     footer  .lp__foot.hf                    #DCE9DF sage

   So the band and the strip below it were the same colour, the footer was a third,
   and the 12px read as a white line ruled between them. The section even carries
   hz-dark and hp-on-dark, which is what it was once meant to be, but nothing paints
   it, and its text is dark, so the classes are vestigial.

   The close and the footer are now one sage block, parted only by the hairline the
   footer already draws. The 12px goes, which also removes the same seam on every
   other page, where a white last section met the sage footer. Text contrast on sage
   was checked before committing: heading 13.69, lede 6.97, eyebrow 6.82, and the
   green pill 16.76 against the ground with a 21 label, so nothing needed recolouring.
   The green wash comes off so the two match exactly rather than nearly.

   The selector needs FOUR classes. hx2070.css paints this band with
   `.lp .hz-sec.hz-join { background: ...gradients... !important }`, which is three
   classes, and `html body .lp .hz-join` is only two: the html and body add element
   weight, and elements are the lowest tier, so they never outrank a class however many
   you chain. The class count is compared first and 3 beat 2. It also has to set the
   `background` shorthand, not `background-image`, because that is what the losing
   attempt tried to unset underneath a winning shorthand.

   2026-10-25, later the same day: white, not sage, by instruction. Both together, because
   making only the footer white would put the two-tone seam straight back. The homepage
   footer is a LIGHT treatment already, so white needs no recolouring: its text measures
   17.15 for the wordmark, 8.54 for the eyebrow, 6.51 for the links and the base line, and
   6.3 for the leaf, all on white, all above 4.5. The sage came from hx2070.css
   `.lp .lp__foot{background:var(--a-mist)!important}` at (0,2,0), so three classes and the
   html body chain are enough to outrank it. */
html body main.lp__tiles{padding-bottom:0!important}
html body .lp .hz-sec.hz-join.hz-join,html body .hz-sec.hz-join.hz-join{
  background:#fff!important}
html body footer.lp__foot.hf.hf,html body footer.hf.hf.hf{
  background:#fff!important}

/* The footer's ink, for a white ground. MY BUG, fixed the same day.
   =====================================================================
   The rule above has no page scoping, so it whitened the footer on all 32 pages, not
   just the home page I had checked. The home page footer was already a LIGHT treatment
   and was fine. Every other page was a DARK treatment: white wordmark, #a8ebcb column
   headings, white links, #cce5d8 base type, all of it sitting on deep green. White on
   white. The footer went invisible on about eighteen pages and I reported the change as
   safe because I had measured one page and reasoned about the rest.

   So the whole palette is set here rather than left to whichever file won before, and
   every value is one already measured against white elsewhere in this file: #0b1f19 at
   17.15, #2c6b52 at 6.3, #4e625c at 6.51. Five classes, because hx2070.css reaches these
   with html body footer.lp__foot.hf and loads after footer.css on the one page it loads
   on at all. */
html body footer.hf.hf.hf .hf__logo i,
html body footer.hf.hf.hf .hf__logo b,
html body footer.hf.hf.hf .hf__col b{color:#0b1f19!important}
html body footer.hf.hf.hf .hf__logo small{color:#2c6b52!important}
html body footer.hf.hf.hf .hf__line,
html body footer.hf.hf.hf .hf__col a,
html body footer.hf.hf.hf .hf__base p,
html body footer.hf.hf.hf .hf__base a,
html body footer.hf.hf.hf p,
html body footer.hf.hf.hf li,
html body footer.hf.hf.hf small{color:#4e625c!important}
html body footer.hf.hf.hf .hf__col a:hover,
html body footer.hf.hf.hf .hf__base a:hover{color:#0b1f19!important}
/* The hover underline and the social buttons were drawn for a dark ground too: mint on
   deep green, and a white-on-white-at-8% tile that is nothing at all on paper. */
html body footer.hf.hf.hf .hf__col a::after{background:#2c6b52!important}
html body footer.hf.hf.hf .hf__socRow a{
  background:#f3f6f4!important;border:1px solid #cfdfd5!important;color:#2c6b52!important}
html body footer.hf.hf.hf .hf__socRow a:hover{
  background:#2c6b52!important;color:#fff!important}
html body footer.hf.hf.hf .hf__base{border-top:1px solid #cfdfd5!important}
/* The mark itself, which was not there. The rule at the top of this file carries
   `filter:brightness(0) invert(1)` on the footer image, which painted the leaf white for
   the deep green ground this footer used to have. Measured on 2026-10-25: a white 34 by
   41 mark on an rgb(255,255,255) footer, on 25 of the 26 pages. That is why the footer
   lockup was the wordmark on its own while the header two screens above it showed a
   yellow leaf over a teal figure, and it was the first thing missing from the lockup the
   owner was asked to look at. hx2070.css said exactly this already, twice, with the
   reasoning ("the footer is pale now ... the mark can sit on the ground itself"), but it
   loads on the landing page alone, so /welcome/ was the one page where the mark showed.
   Kept now the mark is gone from the markup, against it coming back. */
html body footer.hf.hf.hf .hf__logo img{filter:none!important;background:none!important;
  padding:0!important;border-radius:0!important}

/* The wordmark itself, written one way on every page.
   =====================================================================
   Measured on 2026-10-25, the brand name was set three ways at once:

     content header  .tp-logo .lp__mark      Archivo   23px   .26em before "Plan"
     content footer  .hf__logo               Archivo   23px   no gap
     app pages       .tp-logo .tp-auth__logo Open Sans 34px   .26em before "Plan"

   The markup is the same everywhere, Handling<b>Plan</b>, so all of it was cascade. The
   app pages (/pricing/, /faq/, /login/, /open-a-plan/) load plans.css instead of
   plans-shell.css, and neither file gives the wordmark a font-family at all, so on those
   pages the brand name quietly fell back to the body face and the name was set in a
   different typeface from the rest of the site. Both files then pushed "Plan" away from
   "Handling" with margin-left:.26em, while the footer, which has no such rule, closed it
   up. The footer is the one that reads as a lockup, and it is the version the owner
   pointed at, so it is the one every page now gets.

   Declared here because footer.css is the only stylesheet loaded on all 32 pages, and
   flagged because plans.css and plans-shell.css load after it on some of them and before
   it on others, so order alone cannot settle it.

   Size is deliberately NOT normalised: 23px is a header mark and the 34px on the auth
   pages is a centred brand mark at the top of the page, which is a difference of context,
   not of style. */
.tp-logo i,.tp-auth__logo i,.hf__logo i,.lp__mark i{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif!important;
  font-weight:300!important;letter-spacing:-.015em!important;font-style:normal}
.tp-logo i b,.tp-auth__logo i b,.hf__logo i b,.lp__mark i b,
.tp-logo b,.tp-auth__logo b,.hf__logo b,.lp__mark b{
  font-family:inherit!important;font-weight:700!important;margin-left:0!important}

/* The site header alone drops to 24px below 860px, and only because its tagline is
   withdrawn there: a 187px wordmark beside the burger overflows a phone. The auth marks
   keep 32px, because they keep their taglines. The footer has no mark at all since
   2026-10-25. Scoped to .lp__head and .lp__mark so it cannot reach the other two. */
@media (max-width:859px){
  html body .lp__head .tp-logo i,html body .lp__mark i{font-size:24px!important}
  html body .lp__head .tp-logo i b,html body .lp__mark i b{font-size:inherit!important}
}
/* These two breakpoints are superseded by the ones in the Apple block at the end of this
   file, which switch at 600px instead of 1000 and 560 because 12px links hold three
   columns much further down than 16px ones did. They are left standing rather than
   deleted: they are the dark-ground defaults, they are outranked rather than conflicting,
   and the .hf__brand rules in them cost nothing now that no brand block is rendered. */
@media (max-width:1000px){ footer.hf .hf__in{grid-template-columns:1fr 1fr} footer.hf .hf__brand{grid-column:1/-1} }
/* Two columns on a phone, not one.
   Stacking the link columns made the footer 1,465px tall at 390px wide: a screen and
   three quarters, on every page of the site, and longer than the entire contents of the
   contact, about and integrations pages above it. It is the largest fixed cost on the
   site and it was paid fifteen times. Two columns hold the same twenty two links with
   nothing hidden behind an interaction. */
@media (max-width:560px){
  footer.hf .hf__in{grid-template-columns:1fr 1fr;gap:26px clamp(14px,4vw,24px)}
  footer.hf .hf__brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){ footer.hf a.hf__go,footer.hf .hf__go svg,footer.hf .hf__col a::after,footer.hf .hf__socRow a{transition:none} }

/* ---------------------------------------------------------------------------
   The close of the footer: the legal row (.hf__legal, added 2026-10-25 with the
   footer itself, which now ends all 26 pages including the legal notices and the
   public screens of the application, each of which used to carry a footer of its
   own that named these four documents) and the colophon under it, centred.

   "This is poorly designed, fix the footer, the last footer detail should be
   central" (owner, 2026-10-25). What it replaced, measured at 1440 on the sign-in
   page: five rows flush left at the 1240 measure, all 13px in one grey, the four
   paragraphs spaced 10, 16, 16 and 6px apart, which reads as an accident because
   it was one. Each padding had been set for the row above it as that row was
   added, and nothing ever looked at the five together.

   So: centred, on a measure of its own rather than the full width of the columns
   above, since a centred line that runs the full width stops reading as a block and
   starts reading as a paragraph.

   Colour is deliberately NOT set for the links or the paragraphs. The white-ground
   block earlier in this file already claims `html body footer.hf.hf.hf .hf__base a`
   and `... .hf__base p` at three doubled classes with !important, so a colour here
   would either lose to it or need its own chain to beat it, and the two would then
   have to be kept in step by hand.
   --------------------------------------------------------------------------- */
footer.hf .hf__base{text-align:center}
footer.hf .hf__legal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  width:min(820px,100% - 40px);margin:0 auto;padding:22px 0 0;
  font-size:13px;line-height:1.6}
footer.hf .hf__legal a{text-decoration:none}
footer.hf .hf__legal a:hover{text-decoration:underline}

/* Why the chain and the !important, and what ONE footer costs.
   =====================================================================
   hx2070.css loads after this file on the landing page, and reaches the close four
   times. Enumerated by asking the browser which rules matched, not by grepping,
   because two of the four do not sit on one line and a grep misses them:

     html body footer.hf .hf__in       gap clamp(22px,3vw,46px)!important
     html body footer.hf .hf__base     padding 14px 0 22px!important
     html body footer.hf .hf__base p   padding 0!important, 12.5px!important, balance
     html body footer.hf .hf__base .hf__copy   600!important, --a-ink!important

   So /welcome/ had a bold dark copyright line, no space at all between the colophon
   lines, 12.5px type and a 43px column gap, while the other 25 pages had a 13px grey
   line in the same weight as everything around it, 16px gaps and 64px columns. Nobody
   reports a difference like that; everybody feels it. Four doubled classes outrank all
   four of those, and `text-wrap:balance` is taken from the landing page rather than
   thrown away with the rest: it is what stops a centred line breaking one word down.
   (The 600 weight on the copyright was taken too, for about an hour. It did not last:
   see the Apple block below, where the copyright goes back to being the quietest thing
   in the footer, which is where Apple puts it.)

   The bottom padding sits on .hf__base rather than on the last paragraph, where it used
   to. Two of the five lines came out on the owner's instruction the same day, and a rule
   written as p:last-child silently moves its spacing onto whatever the new last line is. */
html body footer.hf.hf.hf .hf__base p{width:min(820px,100% - 40px);margin:0 auto!important;
  text-wrap:balance}
/* And the slogan's measure, for the same reason: hx2070.css carries
   `html body footer.hf .hf__line{max-width:30ch!important}` at (0,2,3), which is 231px at
   the 13.5px it also sets, and 231 is past the 212.7 where "written" stops fitting. Only
   the measure is taken back; the landing page keeps its own type size. */
html body footer.hf.hf.hf .hf__line{max-width:14em!important}

/* ---------------------------------------------------------------------------
   The footer at footer size, in the Apple idiom (owner, 2026-10-25: "remove this
   completely ... visit https://www.apple.com/uk/ and learn all sections of the apple
   and make our resemble it in all aspects, font size font type etc, the animations
   designs. maintain our brand color").

   Measured off apple.com/uk the same day, at 1440, with getComputedStyle rather than
   by eye:

     every element in the footer   12px / 16px line-height / -0.12px (= -0.01em)
     column heading (an h3)        rgba(0,0,0,.88), weight 400, sentence case
     column link                   rgba(0,0,0,.72), weight 400, no underline
     legal and small print         rgba(0,0,0,.56)
     link rhythm                   16px line box + 9.6px margin = 25.6px pitch
     measure                       1024px
     brand mark in the footer      none at all

   The move worth taking is the one that is easy to miss: Apple's footer has ONE type
   size, and its whole hierarchy comes from three ink levels. No capitals, no bold, no
   tracking, no second size. Ours had 14px uppercase headings on .08em of tracking over
   16px links over 13px small print, which is four signals doing the work of one. So the
   three levels are ours, measured on white: #0b1f19 at 17.15, #4e625c at 6.51 and
   #5a6b65 at 5.64, standing in for .88, .72 and .56. Brand green is kept, as asked: it
   is the ink level that changes, not the hue.

   Two deliberate departures, both of them earlier instructions from the same owner on
   the same day, so they stand until they are withdrawn:
     - the close stays CENTRED ("the last footer detail should be central"); Apple's is
       flush left.
     - the ground stays WHITE and shared with the band above it ("white, not sage, by
       instruction"); Apple's footer is #f5f5f7, a tonal block of its own.

   One thing is deliberately NOT copied. Apple's footer links are a 16px line box with a
   9.6px margin, so the touch target is 16px and WCAG 2.2 asks for 24 (2.5.8). Ours keep
   the 24 with 4px of padding and take the rhythm back out of the gap instead, so the
   pitch is Apple's 25.6px to the pixel and the target is still a target: 24 + 1.6.
   --------------------------------------------------------------------------- */
/* Three tracks, not four. The grid at the top of this file still opens with a
   minmax(0,1.25fr) brand track, and with the brand block out of the markup that track
   stayed in the layout as 266px of nothing before the word About. Declared here with
   the rest of the footer's measurements, which means the breakpoints above are outranked
   and have to be restated. Three columns of 12px links hold down to about 600px: at a
   601px viewport the row is 557 wide and each track 169px, and the longest label, "Open
   a plan with a code", sets 129px at this size. */
html body footer.hf.hf.hf .hf__in{width:min(1024px,100% - 44px)!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(24px,3vw,40px)!important;padding-bottom:28px!important}
@media (max-width:600px){
  html body footer.hf.hf.hf .hf__in{grid-template-columns:1fr 1fr!important;
    gap:24px clamp(14px,4vw,24px)!important}
}
html body footer.hf.hf.hf .hf__col,
html body footer.hf.hf.hf .hf__col nav{gap:1.6px!important}
html body footer.hf.hf.hf .hf__col b{margin:0 0 9.6px!important;font-family:inherit!important;
  font-size:12px!important;font-weight:400!important;line-height:16px!important;
  letter-spacing:-.01em!important;text-transform:none!important;color:#0b1f19!important}
html body footer.hf.hf.hf .hf__col a{font-size:12px!important;font-weight:400!important;
  line-height:16px!important;letter-spacing:-.01em!important;padding:4px 0!important;
  min-height:24px!important;opacity:1!important;color:#4e625c!important}
/* Apple underlines a footer link on hover and draws nothing otherwise. Ours grew a mint
   rule out of the bottom edge, which was drawn for the deep green ground this footer
   used to have and is invisible on paper anyway. */
html body footer.hf.hf.hf .hf__col a::after{display:none!important}
html body footer.hf.hf.hf .hf__col a:hover{color:#0b1f19!important;text-decoration:underline!important}
html body footer.hf.hf.hf .hf__legal{gap:6px 20px!important;padding:18px 0 0!important;
  font-size:12px!important;line-height:16px!important;letter-spacing:-.01em!important}
html body footer.hf.hf.hf .hf__base p{font-size:12px!important;line-height:16px!important;
  letter-spacing:-.01em!important;padding:1px 0 0!important;color:#5a6b65!important}
/* Apple's copyright line is the QUIETEST thing in its footer, not the loudest. The bold
   dark treatment this line carried an hour ago came from hx2070.css on the landing page,
   which is outranked here along with the rest of what it says about the close. */
html body footer.hf.hf.hf .hf__base .hf__copy{padding:14px 0 0!important;
  font-weight:400!important;color:#5a6b65!important}
html body footer.hf.hf.hf .hf__base{padding:0 0 22px!important}