/* Tektura: styles for the branding page only, split out of site.css so no other page has to
   download them. Loaded after site.css. The rules are in the order they had there, and
   none of them needs to win against a later rule of the same weight in site.css, so the
   split changes nothing on screen. A rule another page needs goes in site.css. */

/* Branding page figures — the corner rule, same as every other image on the site. */
.bfig{margin:22px 0 0;max-width:880px}
.bfig img{display:block;width:100%;height:auto;background:var(--white);
  border-top-right-radius:var(--r-img);border-bottom-left-radius:var(--r-img)}
.bfig figcaption{margin-top:11px;font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--slate);letter-spacing:.02em;max-width:var(--measure)}

/* After the story: each section is one of the steps, up close. What the stage did, the
   sections do too as they arrive — the five questions tick, the days fill, the payment
   splits — driven by --p (0 to 1) as each passes up the screen (story.js). Without the
   script, or with less motion asked for, everything is simply shown done. */
.upclose{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:0 0 14px}
.upclose a{color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor}
.upclose.on-ink{color:rgba(255,255,255,.6)}
.story-end{padding-top:0;background:var(--paper)}
.end-card{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--paper);padding:clamp(28px,4vw,48px);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.end-card h2{font-size:clamp(26px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0 0 12px;color:var(--paper);text-transform:none}
.end-card p{color:var(--on-ink);max-width:52ch;margin:0}
.end-card .btn:hover{background:var(--paper);color:var(--ink)}
.scene-copy h2{font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.02em;margin:0 0 14px;text-transform:none}
.scene-copy .lede{margin:0 0 22px;max-width:46ch}
.scene-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.scene-steps li{padding:12px 16px 12px 18px;border-top-right-radius:var(--r-btn);border-bottom-left-radius:var(--r-btn);box-shadow:inset 3px 0 0 var(--rule);transition:box-shadow .3s ease,background .3s ease}
.scene-steps li b{display:block;font-size:16px;color:var(--ink);margin-bottom:3px}
.scene-steps li span{display:block;font-size:14.5px;line-height:1.5;color:var(--slate);text-align:left}
.scene-steps li.lit{box-shadow:inset 3px 0 0 var(--signal);background:var(--white)}
.scene-steps li.lit span{color:var(--body)}
.scene-art{position:relative;min-width:0}
@media (max-width:860px){
  .scene-art{order:-1}
  .scenes-live .scene-copy .lede{display:none}
  .scenes-live .scene-copy h2{font-size:24px;margin-bottom:10px}
  .scenes-live .scene-steps li{padding:8px 12px 8px 14px}
  .scenes-live .scene-steps li span{font-size:13.5px}
  .scenes-live .scene-steps li:not(.lit){display:none}
  .scenes-live .scene-steps li.lit:has(~ li.lit){display:none}
}
/* The same without :has(): only the step scenes.js has marked .now is shown on a phone. */
@supports not selector(:has(a)){
  @media (max-width:860px){.scenes-live .scene-steps li.lit:not(.now){display:none}}
}
@media (prefers-reduced-motion:reduce){.scene-steps li{transition:none}}

/* Branding: a mark from a sketch to a letterhead */
.mk-art{height:min(60vh,440px);display:grid;place-items:center;position:relative}
.mk-box{--a:clamp(0,(var(--p) + .04)/.2,1);--b:clamp(0,(var(--p) - .2)/.25,1);--c:clamp(0,(var(--p) - .5)/.18,1);--d:clamp(0,(var(--p) - .74)/.22,1);position:relative;width:min(70%,300px);aspect-ratio:1}
.mk-box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mk-sketch{fill:none;stroke:var(--slate);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--a));opacity:calc(1 - var(--b))}
.mk-grid{fill:none;stroke:#BDB9B0;stroke-width:.5;opacity:calc(var(--b) * (1 - var(--c)))}
.mk-line{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--b))}
.mk-fill{fill:var(--ink);opacity:var(--c)}
.mk-mark{position:absolute;inset:0;transform-origin:50% 50%;transform:scale(calc(1 - var(--d)*.3));opacity:calc(1 - var(--d))}
.mk-sw{position:absolute;left:50%;bottom:-54px;display:flex;gap:8px;transform:translateX(-50%) translateY(calc((1 - var(--c))*12px));opacity:calc(var(--c) * (1 - var(--d)))}
.mk-sw i{width:34px;height:34px;border-top-right-radius:10px;border-bottom-left-radius:10px}
.mk-aa{position:absolute;left:calc(100% + 24px);top:0;font-size:clamp(34px,4vw,48px);font-weight:600;line-height:1;color:var(--ink);opacity:calc(var(--c) * (1 - var(--d)))}
.mk-aa small{display:block;white-space:nowrap;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--slate);margin-top:6px}
.mk-use{position:absolute;inset:0;opacity:var(--d);pointer-events:none}
.mk-letter{position:absolute;left:-4%;top:-2%;width:58%;aspect-ratio:1/1.35;background:var(--white);box-shadow:0 12px 30px rgba(18,22,27,.16);padding:7%;transform:translateY(calc((1 - var(--d))*40px)) rotate(-4deg)}
.mk-letter svg{position:static;width:18%;height:auto}
.mk-letter i{display:block;height:5px;margin:7px 0;border-radius:2px;background:#E3E0D9}
.mk-letter i.s{width:60%;margin-top:18px}.mk-letter i.o{width:32%;background:var(--signal);margin-top:20px}
.mk-phone{position:absolute;right:0;top:8%;width:33%;aspect-ratio:9/19.5;background:#1B2027;border-radius:24px;padding:2.2%;box-shadow:0 18px 34px -8px rgba(18,22,27,.34),inset 0 0 0 1px rgba(255,255,255,.08);transform:translateY(calc((1 - var(--d))*60px)) rotate(5deg)}
.mk-phone>div{position:relative;height:100%;border-radius:20px;background:var(--paper);padding:26% 9% 0;overflow:hidden}
.mk-phone>div::before{content:"";position:absolute;left:50%;top:3.5%;width:30%;height:4.2%;border-radius:99px;background:#1B2027;transform:translateX(-50%)}
.mk-phone>div::after{content:"";position:absolute;left:50%;bottom:2.5%;width:36%;height:1.2%;border-radius:99px;background:#1B2027;opacity:.5;transform:translateX(-50%)}
.mk-phone svg{position:static;width:20%;height:auto}
.mk-phone b{display:block;height:34%;margin:9% -9% 9%;background:linear-gradient(160deg,#2A313A,var(--ink) 60%);border-radius:0}
.mk-phone i{display:block;height:4%;width:80%;border-radius:3px;background:#DDD9D1;margin-bottom:5%}
.mk-phone em{display:block;width:100%;height:9%;margin-top:9%;border-radius:0 10%/0 30%;background:var(--signal)}
@media (max-width:860px){.mk-art{height:36vh}.mk-box{width:min(52%,210px)}.mk-sw{bottom:-40px}.mk-sw i{width:24px;height:24px}}
/* Shown still (less motion, or a phone): the finished mark on its grid, with its colours
   and type, rather than only the last step, and no room held for the scroll. */
html:not(.scenes-live) .mk-box{--a:1;--b:1;--c:1;--d:0}
html:not(.scenes-live) .mk-grid{opacity:1}
html:not(.scenes-live) .mk-scene .scene-pin{padding-block:0}
.section.pale .scene-steps li.lit{background:var(--paper)}
.scene-copy .lede,.scene-copy p{text-align:left!important;hyphens:manual}
html:not(.scenes-live) .scene-steps li{box-shadow:inset 3px 0 0 var(--signal)}html:not(.scenes-live) .scene-steps li span{color:var(--body)}
/* The link is easier to press on a phone through an invisible margin round it (site.css,
   pointer:coarse, and here for narrow screens). Padding on the link itself pushed its
   underline 14px below the words. */
@media (max-width:560px){
  .upclose a{position:relative}
  .upclose a::after{content:"";position:absolute;inset:-14px -8px}
}
/* A phone never gets wider than its screen: the type sample beside the mark wraps, and
   anything drawn past the edge of a section is cut there rather than widening the page. */
@media (max-width:560px){
  .mk-aa{left:calc(100% + 16px)}
  .mk-aa small{white-space:normal;width:7.5em;line-height:1.45}
}

/* The cost page: the sum on the right of the heading, drawn on squared paper */
.sum-card{position:relative;margin:0;padding:24px 26px 22px;background:var(--white);box-shadow:0 0 0 1px var(--rule);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);
  background-image:linear-gradient(rgba(92,100,112,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(92,100,112,.07) 1px,transparent 1px);background-size:14px 14px;background-position:-1px -1px}
.sum-card>*{position:relative}
/* The drawn line sits under the total it marks, whatever the width of the card. */
.sum-mark{position:relative;display:inline-block}
.sum-sketch{position:absolute!important;left:-4%;bottom:-9px;width:108%;height:10px;pointer-events:none;overflow:visible}
.sum-sketch .sk-line{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.sum-sketch .sk-line{animation:sk-draw 1.1s cubic-bezier(.4,0,.2,1) .6s both}}
@keyframes sk-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.sum-card .label{display:block;color:var(--slate);margin:0 0 14px}
.sum-rows{margin:0;display:grid}
.sum-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px dashed #C9C5BC}
.sum-rows dt{font-size:15px;color:var(--body)}
.sum-rows dd{margin:0;font-family:var(--mono);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.sum-rows .sum-total{border-bottom:0;padding-top:14px}
.sum-rows .sum-total:first-child{padding:8px 0 14px;border-bottom:1px dashed #C9C5BC}
.sum-rows .sum-total dt{font-weight:600;color:var(--ink)}
.sum-rows .sum-total dd{font-family:inherit;font-size:clamp(22px,2vw,27px);font-weight:600;letter-spacing:-.01em}
.sum-foot{margin:14px 0 0;font-size:14px;color:var(--slate);text-align:left!important}
/* less air between the heading and the questions */
.section:has(.sum-card){padding-bottom:clamp(40px,5vw,64px)}
.section:has(.sum-card)+.section.pale{padding-top:clamp(40px,5vw,64px)}

/* ---------- Pencil drawings ----------
   The look of the mark's construction drawing, used wherever the page talks about design:
   faint guide lines and circles that stay, a pencil outline drawn on, then the fill. The
   motion script adds .pd before drawing (so with less motion, or no script, they are simply
   there) and .on as each one arrives. */
.pencil{display:block;width:100%;height:auto;overflow:visible}
.pencil .pg,.pencil .pg *{fill:none;stroke:#BDB9B0;stroke-width:.6;stroke-dasharray:2 3}
.pencil .pl{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pencil .pl.thin{stroke-width:.8;stroke:var(--slate)}
.pencil .pl.sigl{stroke:var(--signal);stroke-width:2.2}
.pencil .ps{fill:none;stroke:#A9AEB5;stroke-width:.8}
.pencil .stitch{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:3 2.2}
.pencil .pd-dim line{stroke:var(--signal);stroke-width:.8}
.pencil .ink{fill:var(--ink)}.pencil .sig{fill:var(--signal)}.pencil .soft{fill:#D9D6CF}.pencil .paperf{fill:var(--paper)}.pencil .whitef{fill:var(--white)}
.pencil .pt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;fill:var(--ink)}
.pencil .pt.dim{fill:var(--slate)}
.pencil .aa{font-family:inherit;font-weight:600;font-size:46px;fill:var(--ink)}
.pencil .aa.big{font-size:74px}
.pencil.pd .pl{stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.45,0,.35,1) var(--d,0ms)}
.pencil.pd .pf,.pencil.pd .aa,.pencil.pd .stitch{opacity:0;transition:opacity .6s ease calc(var(--d,0ms) + .9s)}
.pencil.pd .pg{opacity:0;transition:opacity .7s ease var(--d,0ms)}
.pencil.pd.on .pl{stroke-dashoffset:0}
.pencil.pd.on .pf,.pencil.pd.on .aa,.pencil.pd.on .stitch,.pencil.pd.on .pg{opacity:1}
.pen-card{margin:-4px 0 18px;max-width:340px;height:clamp(96px,9vw,122px)}
.pen-host{display:flex;flex-direction:column}
.pen-row{align-items:center;gap:clamp(28px,5vw,72px)}
.pen-fig{padding:clamp(8px,2vw,20px) 0}
.pen-wide{max-width:460px;margin-inline:auto}
/* The brand board at the top of the page: a made-up band's guide on one sheet, the mark
   set out in pencil, then its colours, type and the things it goes on. */
.brand-board.pen-wide{max-width:600px;filter:drop-shadow(0 26px 34px rgba(18,22,27,.16))}
.brand-board .bb-serif{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.brand-board .aa.bb-serif{font-size:62px;fill:var(--ink)}
.brand-board .bb-guide,.brand-board .bb-guide *{stroke:rgba(246,241,231,.4)}
.brand-board .bb-ring{stroke:var(--bb-b);stroke-width:5}
.brand-board .pt.bb-m{fill:var(--bb-a);font-weight:600}
.brand-board .pt{font-size:9.5px}
@media (max-width:860px){.pen-fig{margin-top:8px}.pen-wide{max-width:420px}}
.sum-card .sum-what{margin:-4px 0 6px;font-size:14.5px;line-height:1.5;color:var(--body);text-align:left!important}
.pen-row>.sum-card{align-self:center}
/* The sum on the cost page: the community rate first, since most of the people it is for pay it */
.sum-rows dd{text-align:right}
.sum-total{display:grid;gap:3px;justify-items:start}
.sum-total+.sum-total{padding-top:12px;border-top:1px dashed #C9C5BC}
.sum-foot a{color:var(--signal);font-weight:600}

/* How a mark is made: the four steps as a numbered track. Each node fills orange as
   you scroll past it; the line joins the ones done. On a phone the track runs across. */
.mk-scene .scene-steps{gap:0;margin-top:6px}
.mk-scene .scene-steps li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:0 0 26px;background:none!important;box-shadow:none!important;border-radius:0}
.mk-scene .scene-steps li::before{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--rule);transition:background .3s ease}
.mk-scene .scene-steps li:last-child{padding-bottom:0}.mk-scene .scene-steps li:last-child::before{display:none}
.mk-scene .scene-steps li i{grid-row:span 2;width:40px;height:40px;border-radius:0 12px 0 12px;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:16px;color:var(--slate);border:2px solid #CFCBC3;background:var(--paper);transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.mk-scene .scene-steps li b{font-size:20px;line-height:1.2;padding-top:8px;margin:0 0 4px;transition:opacity .3s ease}
.mk-scene .scene-steps li span{font-size:15.5px;color:var(--body);transition:opacity .3s ease}
.mk-scene .scene-steps li:not(.lit) :is(b,span){opacity:.45}
.mk-scene .scene-steps li.lit i{background:var(--signal);border-color:var(--signal);color:var(--white)}
.mk-scene .scene-steps li.lit:has(+ li.lit)::before{background:var(--signal)}
.scenes-live .mk-scene .scene-steps li.lit:not(:has(+ li.lit)) i{box-shadow:0 0 0 6px rgba(194,65,12,.16)}
@media (max-width:860px){
  .scenes-live .mk-scene .scene-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .scenes-live .mk-scene .scene-steps li{display:flex!important;flex-direction:column;align-items:center;text-align:center;padding:0}
  .scenes-live .mk-scene .scene-steps li::before{top:19px;bottom:auto;left:calc(50% + 24px);right:calc(-50% + 24px);width:auto;height:2px}
  .scenes-live .mk-scene .scene-steps li i{width:36px;height:36px;font-size:15px}
  .scenes-live .mk-scene .scene-steps li b{font-size:13.5px;padding-top:8px}
  .scenes-live .mk-scene .scene-steps li span{display:none}
}
@media (prefers-reduced-motion:reduce){.mk-scene .scene-steps li :is(i,b,span),.mk-scene .scene-steps li::before{transition:none}}
/* Phone type scale: this page's share. The scale is described at the end of site.css. */
@media (max-width:520px){
  /* secondary text */
  .mk-scene .scene-steps li span,.sum-card .sum-what,.sum-foot{font-size:15px}
  /* body text inside cards and lists */
  .mk-scene .scene-steps li i{font-size:17px}
  /* section headings */
  .end-card h2{font-size:28px}
}

/* The board at the top: three made-up brands on one drawing. */
.brand-board{--bb-a:#6F1D2B;--bb-b:#E3B04B;--bb-c:#F6F1E7}
.brand-board [style*="--bb-"],.brand-board .bb-ring,.brand-board .pt.bb-m{transition:fill .7s ease,stroke .7s ease,r .7s cubic-bezier(.3,.8,.3,1),stroke-width .7s ease}
.brand-board [data-bb]{transition:opacity .25s ease}
.brand-board.bb-swap [data-bb]{opacity:0}
.brand-board[data-brand="1"] .bb-serif{font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;font-weight:700}
.brand-board[data-brand="2"] .bb-serif{font-family:Rockwell,"Roboto Slab","Courier New",serif;font-weight:700}
.brand-board[data-brand="1"] .bb-ring{r:84px;stroke-width:3}
.brand-board[data-brand="2"] .bb-ring{r:58px;stroke-width:9}
.bb-pick{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:20px;max-width:600px}
.bb-pick button{display:inline-grid;place-items:center;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.bb-dots{display:inline-flex;align-items:center}
.bb-dot{width:26px;height:36px}
.bb-dot i{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px rgba(18,22,27,.25);transition:transform .25s ease,box-shadow .25s ease}
.bb-dot:hover i{transform:scale(1.25)}
.bb-dot[aria-pressed="true"] i{transform:scale(1.45);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.bb-arrow{width:36px;height:36px;background:var(--white)!important;box-shadow:inset 0 0 0 1.5px var(--rule);border-top-right-radius:10px;border-bottom-left-radius:10px;transition:box-shadow .2s ease}
.bb-arrow:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.bb-pick button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* The name and its tag keep one size of space whichever brand is showing, so nothing
   below moves as they change: two lines beside the controls, or one line under them. */
.bb-label{flex:1 0 220px;display:grid;justify-items:start;align-content:center;gap:5px;min-height:52px;margin-left:10px}
.bb-name{font-size:14.5px;line-height:1.3;font-weight:600;color:var(--ink);white-space:nowrap}
.bb-pick{container-type:inline-size}
@container (max-width:521px){.bb-label{flex-basis:100%;margin:6px 0 0}}
@media (max-width:560px){.bb-label{flex-basis:100%;margin:6px 0 0}}
@media (max-width:560px) and (min-width:371px){.bb-label{display:flex;align-items:center;gap:10px;min-height:28px}}
/* Each board's key line, as text: the boards are too small to read on a phone. */
.bb-key{margin:8px 0 0;max-width:600px;min-height:3em;font-size:14.5px;line-height:1.5;color:var(--body);text-align:left}
@media (max-width:370px){.bb-key{min-height:4.5em}}
@media (min-width:561px){.bb-key{position:absolute;width:1px;height:1px;min-height:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.bb-hero{align-items:start}
.bb-tag{padding:3px 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);box-shadow:inset 0 0 0 1px var(--rule-strong);border-top-right-radius:6px;border-bottom-left-radius:6px}
.bb-tag.real{color:#fff;background:var(--ink);box-shadow:none}
.bb-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bb-note{margin:12px 0 0;max-width:600px;font-size:14px;color:var(--slate);text-align:left}
/* The GUS Band: six steps in a grid. */
.gus-steps{list-style:none;margin:28px 0 0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gus-step{max-width:none;background:var(--white);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.gus-step img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.gus-step>div{padding:18px 22px 22px}
.gus-step h3{margin:0 0 6px;font-size:19px;line-height:1.25;text-transform:none;letter-spacing:0}
.gus-step p{margin:0;color:var(--body);font-size:16px;line-height:1.55;text-align:left}
.gus-step p+p{margin-top:12px}
.gus-last{background:var(--ink);justify-content:center}
.gus-last>div{padding:28px}
.gus-last h3{color:var(--paper)}
.gus-last p{color:var(--on-ink)}
.gus-last a{color:var(--paper)}
/* Christopher Bond: the mark, the colours and the rule. */
.cb-board{margin:0;display:grid;gap:10px;max-width:520px;justify-self:end;width:100%}
.cb-mark{background:#0F1626;padding:26px 30px;border-top-right-radius:var(--r-card)}
.cb-mark img{display:block;width:min(100%,330px);height:auto}
.cb-sw{list-style:none;margin:0;padding:0;max-width:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cb-sw li{max-width:none;display:grid;gap:1px;font-size:12px;color:var(--slate)}
.cb-sw li::before{content:"";height:54px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(18,22,27,.12);margin-bottom:7px}
.cb-sw b{font-size:14px;color:var(--ink)}
.cb-sw span{font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.cb-sw .was::before{background:linear-gradient(to top right,transparent calc(50% - 1px),var(--ink) calc(50% - 1px),var(--ink) calc(50% + 1px),transparent calc(50% + 1px)),var(--c)}
.cb-rule{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cb-rule span{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#2BE86B;color:#0F1626}
.cb-rule span:last-child{border-bottom-left-radius:0}.cb-rule span:first-child{border-bottom-left-radius:var(--r-card)}
.cb-rule b{font-size:40px;line-height:1;font-weight:600}
/* The samples are drawn, not text: the white one is meant to fail. */
.cb-rule b::before{content:"Aa"}
.cb-rule em{font-style:normal;font-size:12.5px;line-height:1.35;font-weight:600}
.cb-rule .no b{color:#fff}
.cb-rule .no{position:relative}
.cb-rule .no::after,.cb-rule .yes::after{position:absolute;right:12px;top:8px;font-weight:700;font-size:15px}
.cb-rule .yes{position:relative}
.cb-rule .no::after{content:"\00d7";font-size:20px;top:4px}
.cb-rule .yes::after{content:"\2713"}
/* The card at the foot of the page: room above it, and room inside it. */
.story-end{padding-top:clamp(40px,6vw,72px)}
.end-card .upclose{display:block;margin-bottom:12px}
.end-card h2{margin-bottom:14px}
.story-end .end-card p{text-align:left;hyphens:manual}
@media (max-width:900px){.gus-steps{grid-template-columns:1fr}.cb-board{justify-self:start}}
@media (max-width:520px){.cb-sw{grid-template-columns:repeat(2,minmax(0,1fr))}.cb-rule{grid-template-columns:1fr}.cb-rule span:first-child{border-bottom-left-radius:0}.cb-rule span:last-child{border-bottom-left-radius:var(--r-card)}}
@media (prefers-reduced-motion:reduce){.brand-board [style*="--bb-"],.brand-board .bb-ring,.brand-board [data-bb]{transition:none}}

/* Three boards, three drawings: one shows at a time and the next wipes in. */
.bb-stage{display:grid;max-width:600px;position:relative}
.bb-back{grid-area:1/1;background:#fff;border-top-right-radius:3.46% 4%;border-bottom-left-radius:3.46% 4%;box-shadow:0 26px 34px rgba(18,22,27,.16);transition:background-color .75s ease}
.bb-stage>svg{grid-area:1/1;position:relative;width:100%;height:auto;display:block;opacity:0;visibility:hidden;filter:blur(10px);transform:scale(1.025);transition:opacity .32s ease,filter .32s ease,transform .32s ease,visibility 0s .32s}
.bb-stage>svg.on{opacity:1;visibility:visible;filter:none;transform:none;transition:opacity .42s ease .4s,filter .42s ease .4s,transform .42s ease .4s}
.bb-ghosts{grid-area:1/1;position:relative;z-index:2;pointer-events:none}
.bb-ghosts i{position:absolute;display:block;box-shadow:inset 0 0 0 1px rgba(18,22,27,.22)}
@font-face{font-family:"ExShrikhand";src:url("../fonts/ex-shrikhand.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ExCaveatBrush";src:url("../fonts/ex-caveat-brush.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ExAbril";src:url("../fonts/ex-abril.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ExFrauncesBlack";src:url("../fonts/ex-board-fraunces-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
.bb-f-shrik{font-family:"ExShrikhand",Georgia,serif;font-weight:400}
.bb-f-brush{font-family:"ExCaveatBrush",cursive;font-weight:400}
.bb-f-abril{font-family:"ExAbril",Georgia,serif;font-weight:400}
.bb-f-fraunces{font-family:"ExFrauncesBlack",Georgia,serif;font-weight:900}
@font-face{font-family:"ExOutfit";src:url("../fonts/ex-board-outfit-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"ExOutfit";src:url("../fonts/ex-board-outfit-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"ExSyne";src:url("../fonts/ex-board-syne-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"ExGrotesk";src:url("../fonts/ex-board-space-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ExBricolage";src:url("../fonts/ex-board-bricolage-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.bb-f-outfit{font-family:"ExOutfit",Georgia,serif;font-weight:300}
.bb-f-outfitb{font-family:"ExOutfit",Georgia,serif;font-weight:600}
.bb-f-syne{font-family:"ExSyne",Georgia,serif;font-weight:800}
.bb-sans{font-family:var(--sans)}
.bb-round{font-family:"Arial Rounded MT Bold","Trebuchet MS","Segoe UI",system-ui,sans-serif;font-weight:700}
.bb-slab{font-family:Rockwell,"Roboto Slab","Courier New",serif;font-weight:700}
.bb-mono{font-family:var(--mono)}
/* Plex is ours: each made-up brand sets its words in its own type. */
.bb-cycles :is(.bb-sans,.bb-mono){font-family:"ExOutfit",sans-serif;font-weight:300}
.bb-theatre :is(.bb-sans,.bb-mono){font-family:"ExGrotesk",sans-serif}
.bb-reed :is(.bb-sans,.bb-mono){font-family:"ExBricolage",sans-serif}
:is(.bb-band,.bb-pellowen,.bb-choir) .bb-mono{font-family:Arial,Helvetica,sans-serif}
.bb-gus{font-family:"GusNoverion",var(--sans)}
@media (prefers-reduced-motion:reduce){.bb-stage>svg,.bb-stage>svg.on{transition:none;filter:none;transform:none}.bb-back{transition:none}}

/* The GUS Band, told with the crest itself and our own drawing round it. */
@font-face{font-family:"GusNoverion";src:url("../fonts/gus-noverion-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"GusNoverion";src:url("../fonts/gus-noverion-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
.gus-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:28px}
.gus-card{grid-column:span 2;background:var(--white);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.gus-lines,.gus-two{grid-column:span 3}
.gus-txt{padding:18px 22px 22px}
.gus-txt h3{margin:0 0 6px;font-family:"GusNoverion",var(--sans);font-weight:900;font-size:20px;line-height:1.25;text-transform:none;letter-spacing:0}
.gus-txt p{margin:0;color:var(--body);font-size:16px;line-height:1.55;text-align:left;hyphens:manual}
.gus-txt p+p{margin-top:12px}
.gus-art{height:300px;display:flex;align-items:center;justify-content:center;gap:22px;padding:22px}
.gus-art img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.gus-paper{background:linear-gradient(rgba(18,22,27,.05) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(18,22,27,.05) 1px,transparent 1px) 0 0/22px 22px,#FAF6F3;justify-content:space-evenly}
.gus-crest{position:relative;height:100%;aspect-ratio:948/1006;flex:none}
.gus-crest svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gus-lines .gl *{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:14 12;vector-effect:non-scaling-stroke;stroke-width:1.2px;opacity:.75}
.gus-lines .gl line,.gus-lines .gl circle{stroke-dasharray:2400;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.3,1) .2s}
.gus-lines.reveal:not(.in) .gl line,.gus-lines.reveal:not(.in) .gl circle{stroke-dashoffset:2400}
/* Find the faults: the old crest and the redrawn one side by side, on the same lines. The
   old one is cut from the band's slide with its centre where the lines cross, so it runs
   a little past its box. */
.gus-paper figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.gus-paper .gus-crest{height:calc(100% - 30px)}
.gus-crest img.old{position:absolute;left:-1.27%;top:0;width:102.53%;height:103.98%;max-width:none}
.gus-grey{background:#FAF6F3}
.gus-grey figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.gus-grey img{flex:1;min-height:0;height:auto}
.gus-grey figcaption,.gus-paper figcaption{font-family:"GusNoverion",var(--sans);font-weight:700;font-size:11px;line-height:16px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:#BE1D2E}
.gus-tiles{padding:0;gap:0;height:220px;align-items:stretch}
.gus-tiles span{flex:1;position:relative;overflow:hidden}
/* The corner mark as it sits on their pages, whole and sized to its tile. */
.gus-tiles img{position:absolute;left:0;bottom:0;width:auto;height:auto;max-width:100%;max-height:100%}
.gus-tiles .t-w{background:#fff;box-shadow:inset 0 -1px 0 var(--rule)}.gus-tiles .t-k{background:#14100F}.gus-tiles .t-g{background:#BE1D2E}
.gus-sw{padding:0;gap:0;height:220px;align-items:stretch}
.gus-sw span{flex:1;background:var(--c);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;gap:2px;min-width:0}
.gus-sw b{font-family:"GusNoverion",var(--sans);font-weight:700;font-size:14px;line-height:1.2}
.gus-sw i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.04em;opacity:.9}
.gus-sw .gold{color:#14100F}
.gus-card.gus-last{background:linear-gradient(200deg,#BE1D2E 55%,#A50E0E);justify-content:center}
.gus-last .gus-txt{padding:28px}
.gus-last h3{color:#fff}.gus-last p{color:#fff}.gus-last a{color:#fff}
@media (max-width:1000px){.gus-card,.gus-lines,.gus-two{grid-column:span 6}.gus-art{height:260px}}
/* On a phone the two crests share the width, each sized by it. */
@media (max-width:520px){
  .gus-art{height:auto}
  .gus-paper figure,.gus-grey figure{flex:1 1 0;height:auto}
  .gus-paper .gus-crest{flex:none;width:100%;height:auto}
  .gus-grey img{flex:none;width:100%;height:auto}
  .gus-tiles,.gus-sw{height:180px}
}
@media (prefers-reduced-motion:reduce){.gus-lines .gl line,.gus-lines .gl circle{transition:none}.gus-lines.reveal:not(.in) .gl line,.gus-lines.reveal:not(.in) .gl circle{stroke-dashoffset:0}}
/* The community discount, in a box of its own under What it costs. */
.br-cr{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:14px 18px;max-width:none;background:var(--white);color:var(--ink);font-size:15.5px;line-height:1.45;text-align:left;border-top-right-radius:14px;border-bottom-left-radius:14px}
.br-cr span{text-align:left!important;hyphens:manual;-webkit-hyphens:manual}
.br-cr b{flex:none;padding:6px 10px;background:var(--signal);color:#fff;font-size:16px;border-top-right-radius:8px;border-bottom-left-radius:8px}