/* Inner pages. Rides on ansard.css, adds only what the sub pages need. */

.page{
  background:var(--ink);
  padding:clamp(130px,17vh,190px) var(--pad) clamp(70px,9vh,110px);
}
.page__in{max-width:1080px;margin:0 auto;}

.page__kicker{
  font:500 11px/1 var(--ui);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
  margin-bottom:20px;
}
.page h1{
  text-align:left;margin:0;max-width:17ch;
  font-size:clamp(2rem,4.2vw,3.4rem);
}
.page__lede{
  margin:clamp(18px,2vw,26px) 0 0;
  max-width:62ch;
  font-size:clamp(15.5px,1.35vw,18px);
  line-height:1.55;color:var(--soft);
}

.slab{
  border-top:1px solid var(--hair);
  padding:clamp(40px,5vw,64px) 0 0;
  margin-top:clamp(46px,6vw,76px);
}
.slab > h2{
  text-align:left;margin:0 0 clamp(24px,3vw,36px);
  max-width:24ch;
  font-size:clamp(1.45rem,2.5vw,2rem);
}

.pair{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3vw,48px);
}
.pair article h3{
  font:500 clamp(16px,1.5vw,19px)/1.3 var(--face);
  letter-spacing:-.012em;margin-bottom:10px;
}
.pair article p{
  font-size:15px;line-height:1.62;color:var(--faint);margin:0 0 10px;
}
.pair article p:last-child{margin-bottom:0;}
.pair b{color:var(--white);font-weight:600;}

.spec{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
}
.spec li{
  display:grid;grid-template-columns:minmax(150px,240px) 1fr;
  gap:clamp(16px,2.4vw,40px);
  padding:18px 0;
  border-bottom:1px solid var(--hair);
  align-items:baseline;
}
.spec li:first-child{border-top:1px solid var(--hair);}
.spec dt,.spec strong{
  font:500 14.5px/1.4 var(--face);letter-spacing:-.01em;color:var(--white);
}
.spec span{font-size:14.5px;line-height:1.6;color:var(--faint);}
.spec em{
  font-style:normal;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.62);
  white-space:nowrap;margin-left:10px;
}

/* ---- pricing ---- */

.tiers{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
  margin-top:clamp(34px,4vw,52px);
}
.tier{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,34px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:linear-gradient(#151515,#0F0F0F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.tier--mid{
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(#1B1B1B,#131313);
}
.tier__name{
  font:500 15px/1 var(--face);letter-spacing:-.01em;color:var(--white);
}
.tier__who{
  margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--faint);
  min-height:3em;
}
.tier__fig{
  margin:clamp(20px,2.4vw,28px) 0 0;
  display:flex;align-items:baseline;gap:7px;
}
.tier__fig b{
  font:400 clamp(2.1rem,3.4vw,2.9rem)/1 var(--face);
  letter-spacing:-.03em;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.tier__fig span{font-size:13.5px;color:var(--faint);}
.tier__mins{
  margin:12px 0 0;font-size:13.5px;color:var(--soft);
}
.tier__after{
  margin:5px 0 0;font-size:12.5px;color:rgba(255,255,255,.42);
}
.tier ul{
  list-style:none;margin:clamp(20px,2.2vw,26px) 0 0;padding:0;
  display:grid;gap:9px;
}
.tier li{
  font-size:13.5px;line-height:1.5;color:var(--faint);
  padding-left:17px;position:relative;
}
.tier li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.30);
}
.tier .pill{margin-top:auto;align-self:stretch;margin-top:clamp(22px,2.4vw,30px);}

.note{
  margin-top:clamp(36px,4vw,54px);
  padding:20px 22px;
  border:1px solid var(--hair);border-radius:14px;
  background:rgba(255,255,255,.02);
}
.note p{font-size:14px;line-height:1.6;color:var(--faint);margin:0 0 8px;}
.note p:last-child{margin-bottom:0;}
.note b{color:var(--white);font-weight:600;}

/* Build flag. Delete the element and this rule before anyone outside sees it. */
.provisional{
  max-width:1080px;margin:0 auto clamp(26px,3vw,38px);
  padding:13px 16px;
  border:1px dashed rgba(255,255,255,.28);
  border-radius:10px;
  font:500 12.5px/1.5 var(--ui);
  letter-spacing:.01em;
  color:rgba(255,255,255,.62);
}

@media (max-width:900px){
  .pair{grid-template-columns:1fr;gap:26px;}
  .tiers{grid-template-columns:1fr;}
  .spec li{grid-template-columns:1fr;gap:6px;padding:16px 0;}
  .page h1{max-width:none;}
}

/* ---- features, editorial layout ---- */

.featHero{
  background:var(--ink);
  padding:clamp(130px,17vh,190px) var(--pad) clamp(50px,6vh,80px);
}
.featHero__in{max-width:1180px;margin:0 auto;}
.featCount{
  display:flex;align-items:flex-end;gap:clamp(16px,2vw,28px);
  margin-bottom:clamp(22px,2.6vw,34px);
}
.featCount b{
  font:400 clamp(5rem,13vw,11rem)/.78 var(--face);
  letter-spacing:-.05em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.featCount span{
  padding-bottom:clamp(8px,1.2vw,18px);
  max-width:15ch;
  font:400 clamp(14px,1.2vw,16.5px)/1.45 var(--ui);
  color:rgba(255,255,255,.50);
}
.featHero h1{
  text-align:left;margin:0;max-width:19ch;
  font-size:clamp(1.9rem,4vw,3.2rem);
}
.featHero .page__lede{max-width:60ch;}

.featBody{
  background:var(--ink);
  padding:0 var(--pad) clamp(80px,10vh,130px);
}
.featBody__in{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:190px 1fr;
  gap:clamp(30px,5vw,90px);
  align-items:start;
}

.featIndex{position:sticky;top:104px;}
.featIndex ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;}
.featIndex a{
  display:flex;gap:11px;align-items:baseline;
  padding:9px 0;
  text-decoration:none;
  font:400 13px/1.35 var(--ui);
  color:rgba(255,255,255,.34);
  transition:color .4s ease;
}
.featIndex a i{
  font-style:normal;
  font-size:10px;letter-spacing:.06em;
  color:rgba(255,255,255,.22);
  font-variant-numeric:tabular-nums;
}
.featIndex a:hover{color:rgba(255,255,255,.78);}
.featIndex a.here{color:var(--white);}
.featIndex a.here i{color:rgba(255,255,255,.55);}

.grp{padding:clamp(38px,5vw,64px) 0;border-top:1px solid var(--hair);}
.grp:first-child{border-top:0;padding-top:0;}
.grp__head{
  display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);
  margin-bottom:clamp(20px,2.4vw,32px);
}
.grp__no{
  font:400 12px/1 var(--ui);letter-spacing:.1em;
  color:rgba(255,255,255,.26);
  font-variant-numeric:tabular-nums;
  padding-top:6px;
}
.grp h2{
  text-align:left;margin:0;max-width:22ch;
  font-size:clamp(1.35rem,2.3vw,1.85rem);
}

.grp .spec li{
  grid-template-columns:minmax(160px,270px) 1fr;
  padding:17px 14px 17px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  transition:background .4s ease,padding-left .4s cubic-bezier(.22,.61,.36,1);
}
.grp .spec li:first-child{border-top:1px solid rgba(255,255,255,.06);}
.grp .spec li:hover{background:rgba(255,255,255,.025);padding-left:13px;}

/* A breather between groups so it is not forty four rows in a column. */
.breather{
  margin:clamp(30px,4vw,52px) 0;
  padding:clamp(30px,3.6vw,48px);
  border:1px solid var(--hair);border-radius:18px;
  background:linear-gradient(160deg,#151515,#0E0E0E 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.breather p{
  margin:0;max-width:30ch;
  font:400 clamp(1.25rem,2.1vw,1.7rem)/1.28 var(--face);
  letter-spacing:-.022em;color:var(--white);
}
.breather span{
  display:block;margin-top:14px;max-width:52ch;
  font:400 14.5px/1.6 var(--ui);color:var(--faint);
}

@media (max-width:900px){
  .featBody__in{grid-template-columns:1fr;gap:0;}
  .featIndex{display:none;}
  .featHero h1,.grp h2{max-width:none;}
  .grp .spec li{grid-template-columns:1fr;gap:6px;}
}

/* Devices dropped into the prose pages. */
.device{
  margin:clamp(34px,4.5vw,60px) 0;
  display:flex;justify-content:center;
}
.device .phone--sm{width:min(300px,80vw);}
.app--flat{
  display:block;
  flex:1 1 auto;width:100%;max-width:760px;
  min-height:0;
}
.app--flat .app__main{min-width:0;}
.page .device,.featCol .device{justify-content:center;}

/* ---- features: running count in the index ---- */
.featProg{
  margin:0 0 20px;padding-bottom:16px;
  border-bottom:1px solid var(--hair);
  font:400 12px/1.4 var(--ui);color:rgba(255,255,255,.40);
}
.featProg b{
  display:block;font:400 clamp(1.7rem,2.4vw,2.2rem)/1 var(--face);
  letter-spacing:-.035em;color:var(--white);
  font-variant-numeric:tabular-nums;margin-bottom:5px;
}
.featProg span{
  display:block;height:2px;margin-top:12px;border-radius:2px;
  background:rgba(255,255,255,.10);position:relative;overflow:hidden;
}
.featProg span::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);
  background:rgba(255,255,255,.62);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}

/* ---- integrations: wiring schematic ---- */
.schema{
  margin:clamp(34px,4.5vw,60px) 0;
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(10px,1.6vw,26px);align-items:center;
  padding:clamp(24px,3vw,40px);
  border:1px solid var(--hair);border-radius:20px;
  background:linear-gradient(160deg,#151515,#0E0E0E 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  font-family:var(--ui);
}
.schema__side{display:grid;gap:10px;}
.schema__row{display:grid;grid-template-columns:1fr 34px;align-items:center;}
.schema__box{
  padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:11px;
  background:#181818;
  opacity:0;transform:translateX(-10px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * .11s);
}
.schema.on .schema__box{opacity:1;transform:none;}
.schema__box b{display:block;font:500 12.5px/1.3 var(--ui);color:#F0F0F0;}
.schema__box span{display:block;margin-top:3px;font:400 11px/1.4 var(--ui);color:#7E7E7E;}
.schema__line{height:1px;background:rgba(255,255,255,.10);position:relative;overflow:hidden;}
.schema__line i{
  position:absolute;inset:0 auto 0 0;width:0;
  background:rgba(255,255,255,.55);
  transition:width .8s ease;transition-delay:calc(var(--i,0) * .11s + .25s);
}
.schema.on .schema__line i{width:100%;}
.schema__hub{display:flex;justify-content:center;}
.schema__core{
  padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;
  background:#1C1C1C;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px -30px #000;
  opacity:0;transform:scale(.94);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.schema.on .schema__core{opacity:1;transform:none;}
.schema__core b{
  display:block;font:700 17px/1 var(--face);letter-spacing:-.045em;color:#fff;
}
.schema__core b i{font-style:normal;}
.schema__core span{display:block;margin-top:6px;font:400 11px/1 var(--ui);color:#7E7E7E;}
.schema__out{display:grid;grid-template-columns:34px 1fr;align-items:center;}
.schema__line--r{order:0;}
.schema__box--call{border-color:rgba(255,255,255,.20);}

/* ---- security: the covered record ---- */
.gate{
  width:min(520px,100%);
  border:1px solid var(--hair);border-radius:18px;
  background:linear-gradient(160deg,#151515,#0E0E0E 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(20px,2.4vw,28px);
  font-family:var(--ui);
}
.gate__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--hair);
}
.gate__who{font:500 12.5px/1 var(--ui);color:#EDEDED;}
.gate__state{
  font:500 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.55);
  transition:background .5s ease,color .5s ease;
}
.gate__state.ok{background:rgba(255,255,255,.16);color:#fff;}
.gate__rec{margin:16px 0 0;display:grid;gap:10px;}
.gate__rec div{display:flex;gap:14px;align-items:baseline;}
.gate__rec dt{flex:0 0 4.4em;font:400 11px/1.4 var(--ui);color:#7E7E7E;}
.gate__rec dd{margin:0;font:500 13px/1.4 var(--ui);color:#F2F2F2;}
.gate__rec dd span{
  display:inline-block;
  filter:blur(6px);opacity:.55;
  transition:filter .7s ease,opacity .7s ease;
  user-select:none;
}
.gate__rec.open dd span{filter:none;opacity:1;}
.gate__q{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hair);
  font:400 13px/1.55 var(--ui);color:#B9B9B9;min-height:3.2em;
}
.gate__btn{
  margin-top:14px;width:100%;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  background:rgba(255,255,255,.05);
  color:#fff;font:500 13px/1 var(--ui);padding:13px;
  transition:background .4s ease,border-color .4s ease;
}
.gate__btn:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);}

/* ---- pricing: the meter ---- */
.mtr{
  width:min(680px,100%);
  border:1px solid var(--hair);border-radius:20px;
  background:linear-gradient(160deg,#151515,#0E0E0E 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(24px,3vw,36px);font-family:var(--ui);
}
.mtr__cap{
  margin:0;font:500 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.40);
}
.mtr__big{display:flex;align-items:baseline;gap:14px;margin:16px 0 22px;flex-wrap:wrap;}
.mtr__big b{
  font:400 clamp(2.6rem,5vw,4rem)/1 var(--face);letter-spacing:-.04em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.mtr__big span{font:400 13.5px/1.4 var(--ui);color:#8A8A8A;}
.mtr__big i{font-style:normal;color:#D8D8D8;font-variant-numeric:tabular-nums;}
.mtr__range{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.62) var(--f,15%),rgba(255,255,255,.12) var(--f,15%));
  outline:none;cursor:grab;
}
.mtr__range::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:0;cursor:grab;
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}
.mtr__range::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:0;cursor:grab;
}
.mtr__out{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.mtr__out p{margin:0 0 7px;font:400 11px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:#7E7E7E;}
.mtr__out b{font:500 clamp(17px,2vw,22px)/1 var(--ui);letter-spacing:-.02em;color:#fff;}

@media (max-width:900px){
  .schema{grid-template-columns:1fr;gap:18px;}
  .schema__row,.schema__out{grid-template-columns:1fr;}
  .schema__line{height:18px;width:1px;margin:0 auto;}
  .schema__line i{inset:0 0 auto 0;width:100%;height:0;transition:height .8s ease;}
  .schema.on .schema__line i{height:100%;}
  .mtr__out{grid-template-columns:1fr;gap:14px;}
}

/* ---- add-ons, cards ---- */
.slab__lede{
  margin:16px 0 0;max-width:62ch;
  font-size:15px;line-height:1.6;color:var(--faint);
}
.addons{
  margin-top:clamp(30px,3.6vw,44px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,24px);
}
.addons article{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(24px,2.8vw,34px);
  border:1px solid rgba(255,255,255,.10);border-radius:18px;
  background:#111;
  transition:border-color .5s ease;
}
/* A soft light that follows the card on hover, so it lifts without a colour. */
.addons article::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:90%;
  background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.10),transparent 62%);
  opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.addons article:hover{border-color:rgba(255,255,255,.22);}
.addons article:hover::before{opacity:1;}
.addons article > *{position:relative;}

.addon__top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:14px;
}
.addon__top h3{
  font:500 clamp(18px,1.9vw,23px)/1.2 var(--face);
  letter-spacing:-.018em;color:var(--white);margin:0;
}
/* A link inside a heading still gets the browser's purple unless you say
   otherwise. It looked like a broken page. */
.addon__top h3 a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:1px;transition:border-color .2s ease;
}
.addon__top h3 a:hover{border-bottom-color:rgba(255,255,255,.7);}
.addon__top span{
  flex-shrink:0;white-space:nowrap;
  font:400 12px/1 var(--ui);color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;
}
.addon__one{
  margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--soft);
}
.addons article p:not(.addon__one){
  margin:0;font-size:14px;line-height:1.65;color:var(--faint);
}
.addon__btn{
  align-self:flex-start;margin-top:clamp(20px,2.4vw,28px);
  cursor:pointer;background:none;
  border:1px solid rgba(255,255,255,.22);border-radius:9999px;
  color:rgba(255,255,255,.78);
  font:400 11px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
  padding:13px 20px;
  transition:border-color .4s ease,color .4s ease,background .4s ease;
}
.addon__btn:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.05);}

/* ---- how it goes ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);}
.steps article{border-top:1px solid var(--hair);padding-top:18px;}
.steps span{
  display:block;margin-bottom:12px;
  font:400 11px/1 var(--ui);letter-spacing:.12em;
  color:rgba(255,255,255,.30);font-variant-numeric:tabular-nums;
}
.steps h3{font:500 clamp(15px,1.4vw,18px)/1.3 var(--face);letter-spacing:-.012em;margin-bottom:9px;}
.steps p{font-size:14px;line-height:1.6;color:var(--faint);margin:0;}

@media (max-width:760px){
  .addons{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;gap:22px;}
}

/* ---- the diary board ---- */
.dg{
  margin:clamp(34px,4.5vw,58px) 0 0;
  border:1px solid var(--hair);border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#151515,#0E0E0E 65%);
  font-family:var(--ui);
}
.dg__bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px clamp(16px,2vw,22px);
  border-bottom:1px solid var(--hair);background:rgba(255,255,255,.03);
}
.dg__day{font:600 13px/1 var(--ui);color:#EDEDED;}
.dg__meta{font:400 12px/1 var(--ui);color:#7E7E7E;font-variant-numeric:tabular-nums;}
.dg__take{
  margin-left:auto;cursor:pointer;border:0;border-radius:9999px;
  background:var(--white);color:#000;font:500 12.5px/1 var(--face);
  height:38px;padding:0 18px;transition:opacity .4s ease;
}
.dg__take:hover{opacity:.9;}
.dg__take:disabled{opacity:.35;cursor:default;}

.dg__split{display:grid;grid-template-columns:1fr 268px;}
.dg__scroll{overflow-x:auto;scrollbar-width:none;border-right:1px solid var(--hair);}
.dg__scroll::-webkit-scrollbar{display:none;}
.dg__grid{min-width:1000px;padding:10px 0 14px;}

.bd__row{display:grid;grid-template-columns:96px 1fr;align-items:stretch;}
.bd__row--head .bd__lane i{
  font-style:normal;font:400 10px/1 var(--ui);color:#6A6A6A;
  display:flex;align-items:center;padding-left:6px;
  border-left:1px solid rgba(255,255,255,.05);height:24px;
}
.bd__tbl{
  padding:8px 12px;border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.bd__tbl b{font:600 12px/1 var(--ui);color:#EDEDED;}
.bd__tbl i{font-style:normal;font:400 10px/1 var(--ui);color:#6A6A6A;}
.bd__lane{position:relative;display:flex;height:46px;}
.bd__lane > i{
  width:76px;flex:0 0 76px;
  border-left:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.bd__res{
  position:absolute;top:5px;bottom:5px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 10px;cursor:pointer;text-align:left;
  border-radius:7px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.09);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.bd__res:hover{background:rgba(255,255,255,.15);transform:translateY(-1px);}
.bd__res.on{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.2);}
.bd__res b{font:600 11.5px/1 var(--ui);color:#F2F2F2;}
.bd__res span{font:400 10.5px/1 var(--ui);color:#B0B0B0;}
.bd__res.is-pending{background:rgba(255,255,255,.04);border-style:dashed;}
.bd__res.is-seated{border-color:rgba(255,255,255,.45);}
.bd__res.is-completed{opacity:.5;}
.bd__res.landing{background:rgba(255,255,255,.3);border-color:#fff;}

.dg__rail{padding:16px 18px;}
.bd__rail-empty{font:400 12.5px/1.5 var(--ui);color:#6A6A6A;}
.bd__rhead b{display:block;font:600 14px/1.2 var(--ui);color:#F2F2F2;}
.bd__rhead span{display:block;margin-top:4px;font:400 11px/1 var(--ui);color:#7E7E7E;text-transform:capitalize;}
.bd__chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;}
.bd__chips em{
  font-style:normal;font:500 10px/1 var(--ui);letter-spacing:.05em;
  padding:5px 8px;border-radius:5px;
  background:rgba(255,255,255,.08);color:#C9C9C9;
}
.bd__chips em.vip{background:rgba(255,255,255,.18);color:#fff;}
.bd__chips em.allerg{border:1px solid rgba(255,255,255,.28);background:none;}
.bd__facts{margin:16px 0 0;display:grid;gap:9px;}
.bd__facts div{display:flex;gap:10px;align-items:baseline;}
.bd__facts dt{flex:0 0 5.4em;font:400 10.5px/1.3 var(--ui);color:#6A6A6A;}
.bd__facts dd{margin:0;font:400 11.5px/1.35 var(--ui);color:#DCDCDC;}
.bd__msgs{
  margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.07);
  display:grid;gap:6px;
}
.bd__msgs span{
  position:relative;padding-left:16px;
  font:400 10.5px/1.3 var(--ui);color:#9A9A9A;
}
.bd__msgs span::before{
  content:"";position:absolute;left:0;top:.25em;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.45);
}
.bd__msgs span.off{color:#5A5A5A;}
.bd__msgs span.off::before{background:none;border:1px solid rgba(255,255,255,.20);}

.dg__hint{
  margin:0;padding:14px clamp(16px,2vw,22px) 17px;
  border-top:1px solid var(--hair);
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.48);
}
.dg__hint b{color:#EDEDED;font-weight:600;}

@media (max-width:900px){
  .dg__split{grid-template-columns:1fr;}
  .dg__scroll{border-right:0;border-bottom:1px solid var(--hair);}
}
.nav__links a.on{color:var(--white);}

/* ⛔ The star is not one of the numbers. It marks the section that is the whole
   argument for buying this rather than anything else, so it gets the signal
   colour and the numbered sections do not. One green mark on the page. */
.grp__no--star{color:var(--signal);font-size:14px;}

/* ── headings, one treatment across the whole site ────────────────────────
   ⛔ Taken from the hardware page because Rupert picked it there. A browser's
   default h1 is 700 with no tracking, which at 3.4rem in Helvetica Neue reads
   heavy and slightly loose. 600 with the tracking pulled in is the same face
   set properly. Applied here so every page moves together and no page is left
   as the odd one out. */
h1,h2,h3{
  font-family:var(--face);
  letter-spacing:-.022em;   /* weight lives in ansard.css, the base sheet */
}
.page h1,.featHero h1{line-height:1.06;}
h2{line-height:1.14;}

/* ── the plan cards, on unlimited ─────────────────────────────────────────
   ⛔ Switchboard has to justify £150 over Counter on the page itself, not in
   a comparison table further down. Everything below it saves a business time;
   this is the only tier that makes them money, so it gets one line saying so
   before the tick list. */
.tier__earn{
  font:600 11px/1.4 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--signal);margin:14px 0 0;padding-top:13px;
  border-top:1px solid rgba(159,255,0,.24);
}
.tier__has{
  list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:9px;
}
.tier__has li{
  font:400 13.5px/1.5 var(--ui);color:var(--faint);
  padding-left:18px;position:relative;
}
.tier__has li::before{
  content:"";position:absolute;left:0;top:6px;width:6px;height:6px;
  border-radius:50%;background:var(--signal);
}
.tier__has b{color:var(--soft);font-weight:500;}
.tier--ask .tier__fig b{font-size:clamp(1.2rem,2vw,1.5rem);}
.tier__note{
  font:400 14px/1.6 var(--ui);color:var(--faint);
  margin-top:clamp(26px,3.4vw,38px);max-width:62ch;
}
.tier__note b{color:var(--soft);font-weight:500;}

/* ── the plan cards ───────────────────────────────────────────────────────
   Three across, and Corporate on its own strip underneath. ⛔ Four cards in a
   row wrapped the fourth onto its own line on every laptop, which read as a
   mistake. Corporate is a different kind of thing anyway: a conversation, not
   a price. */
.tiers--three{grid-template-columns:repeat(3,minmax(0,1fr));}
.tier--top{border-color:rgba(159,255,0,.3);background:rgba(159,255,0,.035);}
.tier__badge{
  display:inline-block;font:600 10px/1 var(--ui);letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);
  border:1px solid var(--hair);border-radius:20px;padding:6px 11px;margin-bottom:14px;
}
.tier__badge--earn{color:var(--signal);border-color:rgba(159,255,0,.3);}

.corp{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;margin-top:14px;padding:24px 26px;
  border:1px solid var(--hair);border-radius:14px;background:rgba(255,255,255,.02);
}
.corp__name{font:600 17px/1 var(--face);letter-spacing:-.015em;margin-bottom:9px;}
.corp__who{font:400 14.5px/1.6 var(--ui);color:var(--faint);max-width:56ch;}

/* ── everything side by side ──────────────────────────────────────────────
   ⛔ The cards carry six lines each because six is what somebody reads. The
   other forty live here, for the one in ten who wants to check. */
.cmp__h{
  font-size:clamp(1.45rem,2.5vw,2rem);font-weight:600;line-height:1.14;
  margin:clamp(52px,7vw,90px) 0 clamp(24px,3vw,34px);
}
.cmp__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cmp{width:100%;min-width:560px;border-collapse:collapse;}
.cmp th,.cmp td{padding:13px 12px;border-bottom:1px solid var(--hair);font-size:14.5px;}
.cmp thead th{
  font:600 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);text-align:center;
}
.cmp thead th:first-child{text-align:left;}
.cmp tbody th{text-align:left;font-weight:400;color:var(--soft);}
.cmp td{text-align:center;}
.cmp .y{color:var(--signal);}
.cmp .n{color:rgba(255,255,255,.18);}

/* ---- coming soon ----------------------------------------------------
   A third state for the comparison table, between a tick and a dash.
   Deliberately NOT the signal colour: a tick earns that, a promise does
   not. Warm off-white on a hairline so it reads as "on its way" at a
   glance without competing with what actually works today. */
.cmp .s{
  color:rgba(255,255,255,.5);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
em.soon{
  font-style:normal;font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.58);
  white-space:nowrap;margin-left:9px;
  vertical-align:middle;
}
.spec em.soon{margin-left:10px;}
.soonbar{
  display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
  margin:22px 0 0;padding:16px 18px;
  border:1px solid rgba(255,255,255,.13);border-radius:10px;
  background:rgba(255,255,255,.025);
  font-size:14.5px;line-height:1.6;color:var(--soft);
  max-width:62ch;
}
.soonbar em.soon{margin-left:0;flex:none;margin-top:2px;}
@media (max-width:520px){
  .soonbar{padding:14px;font-size:14px;}
}

.cmp__g th{
  font:600 10.5px/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);padding-top:26px;border-bottom-color:rgba(255,255,255,.16);
}

@media (max-width:900px){
  .tiers--three{grid-template-columns:1fr;}
  .corp{flex-direction:column;align-items:flex-start;}
}
.tier__badge--none{border-color:transparent;color:transparent;pointer-events:none;}

/* The sites slider. ⛔ Three plans side by side rather than one "best fit",
   because with unlimited calls the number of sites does not pick a plan for
   you, it only changes what each one costs. */
.mtr__out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.mtr__out div{display:grid;gap:4px;}
.mtr__out p{
  font:500 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}
.mtr__out b{font:600 clamp(1.1rem,2vw,1.45rem)/1 var(--face);letter-spacing:-.028em;}
.mtr__out span{font:400 12px/1 var(--ui);color:var(--faint);}
.mtr__note{
  font:400 13.5px/1.6 var(--ui);color:var(--faint);
  margin-top:20px;padding-top:17px;border-top:1px solid var(--hair);
}
.mtr__note b{color:var(--soft);font-weight:500;}
@media (max-width:620px){.mtr__out{grid-template-columns:1fr;gap:16px;}}

/* ⛔ .addon__btn is styled as a pill but is an <a>, so the browser underlined
   the text inside the border and it read as two lines round the same thing.
   Any element that looks like a button must say it is not a link. */
a.addon__btn,a.pill,a.pill--big,a.pill--dark,a.pt__btn,
a.hwbtn,a.hwbtn--big,a.btn,a.sheet__cta{text-decoration:none;}

/* What carries up from the tier below. ⛔ It was a bullet in the list, which
   made "Everything in Counter" look like one more feature rather than the
   thing that says these are stacked. Above the list, quieter, it reads as the
   header it is. */
.tier__base{
  font:400 12.5px/1.4 var(--ui);color:var(--faint);
  margin:18px 0 10px;padding-bottom:11px;
  border-bottom:1px solid var(--hair);
}
.tier__base b{color:var(--soft);font-weight:500;}
.tier--top .tier__base b{color:var(--signal);}
.tier__has{margin-top:0;}