@charset "utf-8";
/* ==========================================================================
   Hostonym — the comparison pages.

   Built from main.css's tokens only: --ink, --paper-2, --rule, --brass, --ok,
   --alert, the three families and the type scale. No new colour is introduced,
   because the one thing that would make these pages look bolted on is a palette
   of their own.

   Two ideas carry the whole design.

   1. The two-column card at the top is symmetrical, and deliberately. A page
      that draws its own column wider or brighter than the other side's is
      arguing before the reader has read anything, and a reader can see that in
      the layout before they can see it in the prose. Same width, same weight,
      same treatment; the brass rule under ours is the only asymmetry and it is
      there to say which site you are on.

   2. The matrix marks are shapes, not colours. A filled disc, a hollow ring, a
      half disc and a dash read correctly in greyscale, at a glance, and to
      anybody who does not distinguish the green from the brick — and every one
      of them also carries its word in text beside it. Colour is confirmation
      here, never the message.
   ========================================================================== */

/* -------------------------------------------------------- 1. the two sides */

.alt-vs{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:clamp(14px,2vw,26px);
}

.alt-card{
  display:flex;flex-direction:column;
  padding:clamp(18px,2.2vw,26px);
  background:var(--paper);border:1px solid var(--rule);
}
/* the one asymmetry: whose site this is */
.alt-card--us{border-top:2px solid var(--brass)}
.alt-card--them{border-top:2px solid var(--rule-2)}

.alt-card-n{
  display:flex;align-items:center;gap:10px;
  margin:6px 0 16px;
  font:600 clamp(1.15rem,1.7vw,1.45rem)/1.2 var(--f-serif);
  letter-spacing:-.02em;color:var(--ink);
}

/* the mark a compared host uses for itself, at 64px for a retina screen */
.alt-i{
  flex:0 0 auto;width:30px;height:30px;object-fit:contain;
  border-radius:2px;background:var(--paper-2);padding:2px;
}
.alt-i--mono{
  display:inline-flex;align-items:center;justify-content:center;
  font:600 15px/1 var(--f-sans);color:var(--mute);
  background:var(--paper-3);
}

.alt-facts{display:grid;gap:8px;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--rule)}
.alt-facts>div{display:flex;gap:10px;align-items:baseline}
.alt-facts dt{
  flex:0 0 84px;
  font:500 var(--fs-micro)/1.4 var(--f-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);
}
.alt-facts dd{margin:0;font:400 var(--fs-sm)/1.5 var(--f-sans);color:var(--ink-2)}

.lbl--good{color:var(--brass)}

.alt-good{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.alt-good li{
  position:relative;padding-inline-start:18px;
  font:400 var(--fs-sm)/1.6 var(--f-sans);color:var(--slate);
}
.alt-good li::before{
  content:"";position:absolute;inset-inline-start:0;top:.55em;
  width:7px;height:7px;border:1px solid var(--brass);border-radius:50%;
}

/* the divider between the two cards, on wide screens only */
.alt-vs-mark{
  align-self:center;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule-2) 18%,var(--rule-2) 82%,transparent);
}
.alt-vs-mark::after{
  content:"";display:block;
}

@media (max-width:860px){
  .alt-vs{grid-template-columns:1fr}
  .alt-vs-mark{display:none}
}

/* ------------------------------------------------------------ 2. the marks */

.alt-m{
  display:inline-block;flex:0 0 auto;
  width:11px;height:11px;border-radius:50%;
  vertical-align:-1px;
}
/* published — filled */
.alt-m--yes{background:var(--ok)}
/* partly — half filled, so it is distinguishable without colour */
.alt-m--part{
  background:linear-gradient(90deg,var(--brass) 0 50%,transparent 50% 100%);
  border:1px solid var(--brass);
}
/* no — hollow ring in the muted brick */
.alt-m--no{background:transparent;border:1.5px solid var(--alert)}
/* not published — a dash, because it is an absence and should not read as a verdict */
.alt-m--unk{
  width:11px;height:0;border-radius:0;
  border-top:2px solid var(--rule-2);
  vertical-align:4px;
}

/* --------------------------------------------------------- 3. the matrix */

.alt-tw{
  /* wide content scrolls inside its own box; the page never scrolls sideways */
  overflow-x:auto;
  border:1px solid var(--rule);background:var(--paper);
  -webkit-overflow-scrolling:touch;
}
.alt-t{width:100%;min-width:560px;border-collapse:collapse;text-align:left}

.alt-t-cap{
  caption-side:top;padding:14px clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--rule);
  font:400 var(--fs-sm)/1.6 var(--f-sans);color:var(--mute);text-align:left;
}
.alt-t-cap .alt-m{margin:0 2px}

.alt-t thead th{
  padding:12px clamp(10px,1.4vw,16px);
  border-bottom:1px solid var(--rule-2);
  font:500 var(--fs-micro)/1.3 var(--f-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
}
.alt-t thead th.alt-t-them,
.alt-t thead th.alt-t-us{width:23%}
.alt-t thead th span{vertical-align:middle}
.alt-t thead .alt-i{width:20px;height:20px;margin-inline-end:7px;vertical-align:middle}

/* our column is tinted the faintest amount, so the eye can find it while
   scrolling a twelve-row table on a phone */
.alt-t .alt-t-us{background:color-mix(in srgb,var(--brass) 4%,transparent)}

.alt-t tbody th{
  padding:13px clamp(10px,1.4vw,16px);
  border-bottom:1px solid var(--rule);
  font-weight:400;vertical-align:top;
}
.alt-t tbody td{
  padding:13px clamp(10px,1.4vw,16px);
  border-bottom:1px solid var(--rule);
  vertical-align:top;white-space:nowrap;
}
.alt-t tbody tr:last-child th,
.alt-t tbody tr:last-child td{border-bottom:0}

.alt-t-k{display:block;font:500 var(--fs-base)/1.35 var(--f-sans);color:var(--ink)}
.alt-t-n{display:block;margin-top:3px;font:400 var(--fs-sm)/1.5 var(--f-sans);color:var(--mute)}
.alt-t-l{margin-inline-start:8px;font:400 var(--fs-sm)/1.4 var(--f-sans);color:var(--slate)}

.alt-t-foot{
  margin:16px 0 0;
  font:400 var(--fs-sm)/1.65 var(--f-sans);color:var(--mute);
}
.alt-t-foot .lnk{margin-inline-start:6px}

/* ------------------------------------------------------- 4. how to read */

.alt-how{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,3vw,48px);align-items:start}
.alt-how-p{margin:12px 0 0;font:400 var(--fs-base)/1.7 var(--f-sans);color:var(--slate)}

.alt-key{margin:0;padding:clamp(16px,2vw,22px);list-style:none;background:var(--paper-2);border:1px solid var(--rule)}
.alt-key li{display:grid;grid-template-columns:16px 1fr;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.alt-key li:last-child{border-bottom:0;padding-bottom:0}
.alt-key li:first-child{padding-top:0}
.alt-key .alt-m{grid-row:1;margin-top:.35em}
.alt-key b{grid-column:2;font:500 var(--fs-base)/1.3 var(--f-sans);color:var(--ink)}
.alt-key span:not(.alt-m){grid-column:2;font:400 var(--fs-sm)/1.55 var(--f-sans);color:var(--mute)}

@media (max-width:860px){ .alt-how{grid-template-columns:1fr} }

/* ----------------------------------------------------------- 5. the grid */

.alt-grid{
  display:grid;gap:clamp(12px,1.5vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}

.alt-tile{display:flex}
.alt-tile-a{
  display:flex;flex-direction:column;gap:14px;width:100%;
  padding:clamp(16px,1.9vw,22px);
  background:var(--paper);border:1px solid var(--rule);
  text-decoration:none;
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.alt-tile-a:hover{border-color:var(--ink);transform:translateY(-2px)}
.alt-tile-a:hover .alt-tile-go{color:var(--brass)}

.alt-tile-h{display:flex;align-items:center;gap:11px}
.alt-tile-h .alt-i{width:34px;height:34px}
.alt-tile-hn{display:flex;flex-direction:column;gap:2px;min-width:0}
.alt-tile-n{
  font:600 1.0625rem/1.25 var(--f-serif);letter-spacing:-.01em;color:var(--ink);
}
.alt-tile-w{font:400 var(--fs-micro)/1.4 var(--f-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}

.alt-tile-one{
  flex:1 1 auto;
  font:400 var(--fs-sm)/1.65 var(--f-sans);color:var(--slate);
}

.alt-tile-foot{
  display:flex;align-items:end;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:1px solid var(--rule);
}
.alt-tile-score{display:flex;flex-direction:column;gap:6px;min-width:0}
.alt-bar{display:block;width:96px;height:3px;background:var(--paper-3)}
.alt-bar-f{display:block;height:100%;background:var(--brass)}
.alt-tile-sl{font:400 var(--fs-micro)/1.3 var(--f-sans);color:var(--mute);white-space:nowrap}
.alt-tile-go{
  font:500 var(--fs-sm)/1.3 var(--f-sans);color:var(--ink);white-space:nowrap;
  transition:color .16s var(--ease);
}

/* ------------------------------------------------------- 6. buy theirs */

.alt-pick{
  margin:clamp(26px,3vw,40px) 0 0;
  padding:clamp(18px,2.2vw,26px);
  background:var(--paper-2);
  border:1px solid var(--rule);border-inline-start:2px solid var(--brass);
}
.alt-pick-l{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.alt-pick-l li{
  position:relative;padding-inline-start:22px;
  font:400 var(--fs-base)/1.65 var(--f-sans);color:var(--ink-2);
}
.alt-pick-l li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:9px;height:1px;background:var(--brass);
}
.alt-pick-n{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font:400 var(--fs-sm)/1.65 var(--f-sans);color:var(--mute);
}

/* ------------------------------------------------------ 7. why believe */

.alt-why{
  display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.alt-why p:not(.lbl){margin:8px 0 0;font:400 var(--fs-sm)/1.7 var(--f-sans);color:var(--slate)}

.alt-cta{
  margin:clamp(30px,4vw,52px) 0 0;padding:clamp(22px,3vw,38px);
  background:var(--paper-2);border:1px solid var(--rule);text-align:center;
}
.alt-cta-t{margin:0;font:600 clamp(1.2rem,2vw,1.6rem)/1.25 var(--f-serif);letter-spacing:-.02em;color:var(--ink)}
.alt-cta-s{margin:8px 0 20px;font:400 var(--fs-base)/1.6 var(--f-sans);color:var(--mute)}
.alt-cta .btn{margin:0 5px}

/* ---------------------------------------------------- 8. the other pages */

.alt-more{
  display:grid;gap:10px;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
}
.alt-more-a{
  display:flex;align-items:center;gap:9px;
  padding:11px 13px;background:var(--paper);border:1px solid var(--rule);
  text-decoration:none;transition:border-color .16s var(--ease);
}
.alt-more-a:hover{border-color:var(--ink)}
.alt-more-a .alt-i{width:22px;height:22px}
.alt-more-n{font:500 var(--fs-sm)/1.3 var(--f-sans);color:var(--ink)}
.alt-more-w{
  margin-inline-start:auto;
  font:400 var(--fs-micro)/1.3 var(--f-sans);color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;
}

/* --------------------------------------------------------------- 9. rtl */

/* The bar fills from the reading edge. Everything else here is already
   written with logical properties, so this is the whole of it. */
[dir="rtl"] .alt-bar-f{margin-inline-start:auto}
[dir="rtl"] .alt-m--part{
  background:linear-gradient(270deg,var(--brass) 0 50%,transparent 50% 100%);
}

/* --------------------------------------------------- 10. the hub's groups

   Thirty-five tiles in one grid is a wall. Three headed groups let a reader
   find their own situation in about a second, and give a crawler three
   sections of internal links with a heading over each instead of one flat
   list of thirty-five. */

.alt-group{margin:0 0 clamp(30px,4vw,52px)}
.alt-group:last-child{margin-bottom:0}

.alt-group-h{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px clamp(14px,2vw,28px);
  margin:0 0 clamp(14px,1.8vw,20px);padding-bottom:11px;
  border-bottom:1px solid var(--rule-2);
}
.alt-group-t{
  grid-column:1;margin:0;
  font:600 clamp(1.05rem,1.5vw,1.3rem)/1.25 var(--f-serif);
  letter-spacing:-.015em;color:var(--ink);
}
.alt-group-n{
  grid-column:1;margin:0;
  font:400 var(--fs-sm)/1.6 var(--f-sans);color:var(--mute);max-width:62ch;
}
.alt-group-c{
  grid-column:2;grid-row:1;
  font:500 var(--fs-micro)/1.3 var(--f-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass);white-space:nowrap;
}

@media (max-width:620px){
  .alt-group-h{grid-template-columns:1fr}
  .alt-group-c{grid-column:1;grid-row:auto;margin-top:2px}
}