/* ------------------------------------------------------------------
   pingnews.uk, 2026 rebuild
   Brand: Ping guidelines p.9-11. Green #00FFBE, violet #7300FA,
   black #1E1E1E. Display type is condensed italic caps (Stratos Italic
   in the guidelines; Barlow Condensed 800 italic stands in until a
   Stratos licence exists). Body is DM Sans.
   Committed single dark look: newspaper halftone, torn edges, poster type.
   ------------------------------------------------------------------ */

:root{
  --bg:#0D0D0D;
  --surface:#161616;
  --fg:#F6F5F2;
  --fg-dim:#CFCECA;
  --muted:#9C9C98;
  --green:#00FFBE;
  --violet:#7300FA;
  --violet-lift:#A96BFF;
  --line:#2B2B2B;
  /* Type scale. Every size on the site comes from here. */
  --t-hero:clamp(3.2rem,10.5vw,7.4rem);  /* home hero only */
  --t-h1:clamp(2.7rem,8vw,5.6rem);       /* interior page title */
  --t-h2:clamp(2.3rem,5.6vw,4rem);       /* band / section heading */
  --t-h3:clamp(1.9rem,4vw,2.8rem);       /* heading inside running prose */
  --t-h4:clamp(1.5rem,2.6vw,1.9rem);     /* card, step, list item */
  --t-stat:clamp(2.8rem,6vw,4.4rem);     /* the big numbers */
  --t-lede:clamp(1.05rem,1.8vw,1.3rem);
  --t-body:1rem;
  --t-small:.9rem;
  --t-label:.8rem;                       /* eyebrow, tag, note */
  /* Timeline dates. At --t-label they were 12.8px of condensed italic with wide
     tracking: fine as an eyebrow, too small as the thing you scan down. */
  --t-date:clamp(1.05rem,1.7vw,1.25rem);
  --t-nav:.95rem;

  /* One vertical rhythm for every eyebrow / heading / body stack */
  --sp-eyebrow:14px;   /* eyebrow down to its heading */
  --sp-lede:20px;      /* heading down to the text under it */
  --sp-section:44px;   /* gap above a new heading inside running prose */
  --display:"Barlow Condensed","Haettenschweiler","Arial Narrow",sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The header is sticky, so anything linked to by #id must leave room for it or
   the heading arrives hidden underneath. Applies to every jump target. */
[id]{scroll-margin-top:calc(var(--nav-h,76px) + 18px)}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.band{position:relative}
.band>.wrap{padding-block:clamp(56px,8vw,104px)}
/* Two plain bands in a row would otherwise stack their padding and leave
   a gap twice the size of every other. The coloured bands keep theirs,
   since the colour change is what marks the join. */
.band:not([class*=" "])+.band:not([class*=" "])>.wrap{padding-top:0}

h1,h2,h3,.display{
  font-family:var(--display);
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.9;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}

.eyebrow{
  font-family:var(--display);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:var(--t-label);line-height:1.2;color:var(--green);
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--green);color:var(--bg);
  padding:10px 16px;font-weight:700;z-index:100;
}
.skip:focus{left:8px;top:8px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:30;
  background:rgba(13,13,13,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:24px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:clamp(34px,4vw,44px);width:auto;display:block}
.nav nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.nav nav a{
  font-family:var(--display);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-nav);
  text-decoration:none;color:var(--green);
}
.nav nav a:hover,.nav nav a:focus-visible{color:var(--fg)}
.nav nav a[aria-current="page"]{color:var(--fg)}

/* ---------- buttons ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{
  font-family:var(--display);font-style:italic;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;
  padding:14px 26px;text-decoration:none;border:2px solid var(--green);
  display:inline-flex;align-items:center;gap:.5em;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn-solid{background:var(--green);color:var(--bg)}
.btn-ghost{color:var(--green)}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--violet)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* ---------- page header (interior pages) ---------- */
.page-head{
  border-bottom:1px solid var(--line);
  background-image:radial-gradient(var(--line) 1px,transparent 1.4px);
  background-size:7px 7px;
}
.page-head>.wrap{padding-block:clamp(52px,7vw,88px)}
.page-head h1{font-size:var(--t-h1);margin-block:var(--sp-eyebrow) var(--sp-lede)}
.page-head .lede{font-size:var(--t-lede);max-width:60ch;color:var(--fg-dim)}

/* ---------- hero (home) ---------- */
.hero{
  border-bottom:1px solid var(--line);
  background-image:radial-gradient(var(--line) 1px,transparent 1.4px);
  background-size:7px 7px;
}
.hero>.wrap{padding-block:clamp(64px,10vw,128px)}
.hero-grid{display:grid;gap:clamp(32px,5vw,56px);grid-template-columns:1fr}
@media(min-width:900px){.hero-grid{grid-template-columns:1.3fr .7fr;align-items:center}}
.hero h1{font-size:var(--t-hero);margin-block:var(--sp-eyebrow) var(--sp-lede);line-height:1.14}
.hero h1 .hit{
  color:var(--bg);background:var(--green);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.lede{font-size:var(--t-lede);max-width:60ch;color:var(--fg-dim)}
.lede strong{color:var(--fg);font-weight:700}

.fist{display:flex;flex-direction:column;gap:18px}
.fist img{width:100%;height:auto;max-width:440px;margin-inline:auto;display:block}
/* Illustrations are detailed collages, built for social media. They need
   real size to read at all, so each gets a full-width band at the top of
   its card rather than being shrunk to an icon. */
.step-icon{
  width:100%;max-width:300px;height:auto;display:block;
  margin:0 auto 8px;
}
.fist-cap{
  font-family:var(--display);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-small);
  color:var(--muted);text-align:center;line-height:1.3;
}

/* ---------- stat band ---------- */
.stats{background:var(--green);color:var(--bg)}
.stats .wrap{padding-block:clamp(34px,4.5vw,52px)}
.stat-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:720px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
.stat .n{
  font-family:var(--display);font-style:italic;font-weight:800;
  font-size:var(--t-stat);line-height:.85;
  font-variant-numeric:tabular-nums;display:block;
}
.stat .l{font-weight:500;font-size:var(--t-small);line-height:1.35;margin-top:10px;display:block;max-width:30ch}
.stat+.stat{border-top:2px solid rgba(13,13,13,.25);padding-top:26px}
@media(min-width:720px){
  .stat+.stat{border-top:0;border-left:2px solid rgba(13,13,13,.25);padding-top:0;padding-left:26px}
}

/* ---------- section heads ---------- */
.sec-head{max-width:68ch;margin-bottom:var(--sp-lede)}
.sec-head>h2:last-child{margin-bottom:0}
.sec-head+.cards,.sec-head+.steps,.sec-head+.fund-figures{margin-top:clamp(12px,2vw,26px)}
.sec-head h2{font-size:var(--t-h2);margin-block:var(--sp-eyebrow) var(--sp-lede)}
.sec-head p{color:var(--fg-dim);font-size:1.08rem;max-width:62ch}

/* ---------- steps ---------- */
.steps{display:grid;gap:2px;background:var(--line);border:2px solid var(--line)}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--bg);padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;min-width:0}
.step .num{
  font-family:var(--display);font-style:italic;font-weight:800;
  font-size:var(--t-stat);line-height:.8;color:var(--violet-lift);font-variant-numeric:tabular-nums;
}
.step h3{font-size:var(--t-h4)}
.step p{color:var(--fg-dim);font-size:var(--t-body)}

/* ---------- creed band ---------- */
.creed{background:var(--violet);color:#fff}
.creed .wrap{padding-block:clamp(30px,4vw,44px)}
.creed-grid{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:620px){.creed-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.creed-grid{grid-template-columns:repeat(4,1fr)}}
.creed-grid li{
  list-style:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);font-style:italic;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.08;
  text-wrap:balance;
  padding:14px 16px;min-width:0;
}
.creed-grid li+li{border-top:2px solid rgba(255,255,255,.25)}
@media(min-width:620px){
  .creed-grid li+li{border-top:0}
  .creed-grid li:nth-child(n+3){border-top:2px solid rgba(255,255,255,.25)}
  .creed-grid li:nth-child(even){border-left:2px solid rgba(255,255,255,.25)}
}
@media(min-width:1000px){
  .creed-grid li:nth-child(n+3){border-top:0}
  .creed-grid li+li{border-left:2px solid rgba(255,255,255,.25)}
}

/* ---------- stopped / honesty ---------- */
.stopped{background:var(--surface);border-block:2px solid var(--line)}
.stopped-inner{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:880px){.stopped-inner{grid-template-columns:.9fr 1.1fr;align-items:start}}
.struck{
  font-family:var(--display);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:var(--t-h2);line-height:.95;
  color:var(--muted);text-decoration:line-through;
  text-decoration-color:var(--green);text-decoration-thickness:.07em;
}
.stopped p{color:var(--fg-dim);margin-bottom:16px}
/* The eyebrow is a <p>, so the rule above was adding 16px on top of the
   flex gap and throwing the eyebrow-to-heading rhythm out. Inside .prose
   the gap already does this job. */
.stopped .eyebrow{margin-bottom:0}
.stopped .prose p{margin-bottom:0}
.stopped-next{margin-top:22px}
.stopped p:last-child{margin-bottom:0}
.stopped strong{color:var(--fg)}

/* ---------- cards ---------- */
.cards{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:680px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{border:2px solid var(--line);padding:30px 26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card h3{font-size:var(--t-h4)}
.card p{color:var(--fg-dim);font-size:var(--t-body)}
.card .tag{
  align-self:flex-start;font-family:var(--display);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:var(--t-label);
  padding:5px 11px;border:1.5px solid var(--green);color:var(--green);
}
.card .tag.wip{border-color:var(--violet-lift);color:var(--violet-lift)}

/* ---------- prose ---------- */
.prose{max-width:66ch;display:flex;flex-direction:column;gap:20px}
/* Only one post uses a rule, to separate its footnote from the body. Without
   this the browser default renders as a 2px grey dot on a dark background. */
.prose hr{border:0;height:1px;background:var(--line);margin:40px 0}
.prose p{color:var(--fg-dim)}
.prose strong{color:var(--fg)}
.prose h2{font-size:var(--t-h3);margin-top:calc(var(--sp-section) - 20px)}
.prose h3{font-size:var(--t-h4);margin-top:calc(var(--sp-section) - 28px)}
/* .prose is a 20px flex gap, so an eyebrow sitting directly above a heading
   pulls back to the same 14px used everywhere else. */
.prose .eyebrow+h2,.prose .eyebrow+h3{margin-top:calc(var(--sp-eyebrow) - 20px)}
.prose ul{margin:0;padding-left:1.1em;color:var(--fg-dim);display:flex;flex-direction:column;gap:10px}
.prose a{color:var(--green)}

/* ---------- cic band ---------- */
.cic{
  background:var(--green);color:var(--bg);
  /* Torn edge: 49 irregular points, mostly shallow fibre with occasional
     deeper rips. A regular sawtooth reads as a zigzag, not as paper. */
  clip-path:polygon(0.0% 11.4px,2.53% 25.4px,4.34% 25.1px,5.34% 1.6px,6.46% 7.6px,7.67% 15.6px,10.94% 4.2px,14.28% 28.6px,15.91% 11.1px,17.58% 2.4px,19.93% 4.0px,22.2% 20.6px,23.61% 4.4px,25.3% 4.6px,26.95% 6.6px,28.46% 5.2px,31.55% 3.3px,34.9% 13.8px,37.69% 14.4px,38.69% 7.1px,41.02% 3.5px,43.66% 5.6px,45.7% 8.6px,47.79% 1.5px,50.44% 8.9px,53.39% 13.5px,55.97% 24.6px,57.29% 10.5px,60.11% 12.2px,61.98% 1.6px,64.01% 8.1px,66.96% 3.2px,68.89% 8.1px,72.19% 11.6px,73.67% 14.4px,76.04% 10.0px,77.99% 5.5px,81.27% 5.1px,83.71% 1.4px,86.86% 8.0px,89.76% 4.2px,90.92% 1.5px,91.99% 11.5px,93.74% 20.0px,95.01% 13.3px,95.98% 5.9px,97.25% 13.1px,99.06% 17.6px,100.0% 7.2px,100% 100%,0 100%);
}
.cic .wrap{padding-block:clamp(60px,8vw,100px)}
.cic .eyebrow{color:#0D0D0D}
.cic h2{font-size:var(--t-h2);max-width:18ch;margin-top:var(--sp-eyebrow)}
.cic .rule{height:3px;background:var(--bg);margin-block:var(--sp-lede);max-width:120px}
.cic p{font-size:1.1rem;max-width:58ch;margin-bottom:14px;font-weight:500}
.cic p:last-child{margin-bottom:0}

/* ---------- cta ---------- */
.cta{border-top:1px solid var(--line)}
.cta h2{font-size:var(--t-h2);max-width:16ch;margin-top:var(--sp-eyebrow)}
.cta p{color:var(--fg-dim);max-width:56ch;margin-block:var(--sp-lede) 0;font-size:1.1rem}

/* ---------- contact ---------- */
.addr{
  border:2px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:8px;
  align-self:flex-start;
}
.addr .k{
  font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:var(--t-label);color:var(--muted);
}
.addr .v{font-size:1.25rem;font-weight:500;word-break:break-word}
.addr .v a{color:var(--green);text-decoration:none}
.addr .v a:hover{text-decoration:underline}

/* ---------- 404 ----------------------------------------------------------------
   The five bangs from the Ping social assets, rebuilt as shapes so each can arrive
   on its own. They scale up from their own baseline with a small overshoot, in the
   order they are read, left to right. Anyone who asks for less motion gets them all
   at once, already in place. */
.nf{text-align:center}
.nf .eyebrow{justify-content:center}
.nf-head{font-size:var(--t-h1);line-height:.95;text-transform:uppercase;margin:0 0 clamp(18px,3vw,30px)}
.nf-art{max-width:760px;margin:0 auto}
.nf-art svg{display:block;width:100%;height:auto;overflow:visible}
.bang polygon{fill:var(--green)}
.bang circle{fill:var(--violet-lift)}
.bang{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:bang-in .62s cubic-bezier(.34,1.56,.64,1) backwards;
}
.b1{animation-delay:.05s}
.b2{animation-delay:.19s}
.b3{animation-delay:.33s}
.b4{animation-delay:.47s}
.b5{animation-delay:.61s}
@keyframes bang-in{
  from{opacity:0;transform:scale(.35) translateY(14%)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .bang{animation:none}
}
.nf-line{color:var(--fg-dim);margin:clamp(20px,3vw,30px) auto 0;max-width:46ch}
.nf-row{justify-content:center;margin-top:clamp(22px,3vw,30px)}

/* The email box on its own, on the Trending artwork from the brand assets. The image
   is the designer's own, recoloured for a dark background rather than redrawn, and it
   is sized to the band's height and repeated across the width, so an arrow is never
   sliced through by the edge of the box. */
.email-field{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding-block:clamp(54px,9vw,96px);border-radius:3px;overflow:hidden;
  background-image:url("/assets/img/arrows.png");
  background-size:auto 100%;background-repeat:repeat-x;background-position:center;
}
.addr-solo{
  position:relative;z-index:1;margin-inline:auto;max-width:460px;text-align:center;
  background:var(--bg);box-shadow:0 0 0 14px var(--bg);
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:#0A0A0A}
.foot .wrap{padding-block:34px;display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center}
.foot p{color:var(--muted);font-size:var(--t-small)}
.foot nav{display:flex;gap:7px 16px;flex-wrap:wrap;align-content:start}
.foot nav a{color:var(--muted);font-size:var(--t-small);text-decoration:none;white-space:nowrap}
.foot nav a:hover{color:var(--green)}

/* ---------- people ---------- */
.people{display:grid;gap:26px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:720px){.people{grid-template-columns:1fr 1fr}}
.person{display:flex;gap:20px;align-items:center;min-width:0}
.person-pic{
  position:relative;flex:0 0 auto;
  width:clamp(104px,13vw,136px);aspect-ratio:1;
}
/* green disc offset behind, as the brand icons do */
.person-pic::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--green);transform:translate(9px,9px);
}
.person-pic img{
  position:relative;width:100%;height:100%;display:block;
  object-fit:cover;border-radius:50%;
}
/* Newsprint halftone over the photo. Kept deliberately faint: a heavier
   screen reads as texture at poster size but obliterates a face at 136px. */
.person-pic::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.22) .8px,transparent 1px);
  background-size:6px 6px;mix-blend-mode:multiply;
}
.person-name{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:var(--t-h4);line-height:1}
.person-role{color:var(--muted);font-size:var(--t-small);margin-top:6px}
.person-mail{margin-top:8px;font-size:var(--t-body);word-break:break-word}
.person-mail a{color:var(--green);text-decoration:none}
.person-mail a:hover{text-decoration:underline}

/* ---------- news ---------- */
.post-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.post-item{
  padding-block:26px;border-top:1px solid var(--line);min-width:0;
  display:grid;gap:18px;grid-template-columns:1fr;align-items:start;
}
@media(min-width:680px){
  .post-item{grid-template-columns:150px 1fr;gap:28px}
}
.post-item:first-child{border-top:0;padding-top:0}
.post-text{min-width:0}
/* Solid ground under each illustration. They are drawn for white, and
   floating transparent on the dark page made them read as cut out. */
.post-thumb{
  display:block;width:100%;max-width:150px;aspect-ratio:1;
  background:#fff;padding:12px;overflow:hidden;
}
.post-thumb img{
  width:100%;height:100%;display:block;
  object-fit:contain;object-position:center;
}
.post-item h2{font-size:var(--t-h4);margin-block:0 10px}
.post-item h2 a{text-decoration:none}
.post-item h2 a:hover{color:var(--green)}
.post-excerpt{color:var(--fg-dim);max-width:62ch}
.post-by{color:var(--muted);font-size:var(--t-small);margin-top:8px}
.post-body h2{font-size:var(--t-h3)}
.post-body h3,.post-body h4{font-size:var(--t-h4)}
.post-body img{max-width:100%;height:auto}
.post-body em{color:var(--fg)}

/* ---------- accelerator ---------- */
.fund-figures{display:grid;gap:2px;background:var(--line);border:2px solid var(--line);margin-block:8px}
@media(min-width:720px){.fund-figures{grid-template-columns:repeat(3,1fr)}}
.fund-figure{background:var(--bg);padding:26px;min-width:0}
.fund-figure .n{
  font-family:var(--display);font-style:italic;font-weight:800;
  font-size:var(--t-stat);line-height:.85;color:var(--green);
  font-variant-numeric:tabular-nums;display:block;
}
.fund-figure .l{display:block;margin-top:10px;color:var(--fg-dim);font-size:var(--t-small);max-width:32ch}

/* ---------- text selection ---------- */
/* Reversed out: green ground, page black on top. On the green bands that
   would be invisible, so those flip back the other way. */
::selection{background:var(--green);color:var(--bg)}
::-moz-selection{background:var(--green);color:var(--bg)}
.stats::selection,.stats ::selection,
.cic::selection,.cic ::selection{background:var(--bg);color:var(--green)}
.stats::-moz-selection,.stats ::-moz-selection,
.cic::-moz-selection,.cic ::-moz-selection{background:var(--bg);color:var(--green)}

/* Visually hidden, still read by screen readers. Used where a section needs
   a heading for document structure that the design does not show. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- history timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline>li{
  display:grid;gap:6px 28px;grid-template-columns:1fr;
  padding-block:24px;border-top:1px solid var(--line);min-width:0;
}
.timeline>li:first-child{border-top:0;padding-top:0}
@media(min-width:720px){.timeline>li{grid-template-columns:168px 1fr;gap:0 28px}}
.t-date{
  font-family:var(--display);font-style:italic;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;font-size:var(--t-date);
  color:var(--green);padding-top:2px;line-height:1.15;
}
.t-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.t-body p{color:var(--fg-dim)}
.t-body strong{color:var(--fg)}

/* ---------- footer ---------- */
.foot-main{display:grid;gap:26px;grid-template-columns:1fr;margin-bottom:22px}
@media(min-width:760px){.foot-main{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:36px}}
.foot-legal p{margin:0}
.foot-legal p:first-child{color:var(--fg-dim);font-weight:500}
/* The one editorial line in an otherwise legal block, so it gets the accent and a rule
   of its own instead of the same grey as the company number. Needs `.foot-legal` on the
   front of it: plain `.foot-virtual` loses to `.foot p`, which sets the muted colour. */
.foot-legal .foot-virtual{
  margin-top:14px;padding-left:13px;border-left:2px solid var(--green);
  color:var(--green);max-width:40ch;
}