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

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

   Two ideas carry the design.

   1. Nothing here is ranked, tinted or emphasised over anything else. Every
      image on this estate costs the same on the same hardware, so a tile that
      drew itself brighter than its neighbour would be inventing a difference
      in order to have something to sell. Same border, same weight, same size,
      thirteen times — and the only accent in the whole section is the brass
      rule under the group headings, which is navigation rather than emphasis.

   2. The vendor mark sits on its own tile of paper-2 at a fixed square, never
      scaled to fill. These are thirteen logos drawn by thirteen different
      people at thirteen different optical weights; a common plate is what
      keeps a row of them from looking like a jumble sale.
   ========================================================================== */

/* ------------------------------------------------------------- 1. the mark */

.os-mk{
  flex:0 0 auto;object-fit:contain;
  width:28px;height:28px;
  border-radius:2px;background:var(--paper-2);padding:3px;
}
/* an image with no mark on file still holds its place in the row */
.os-mk--none{
  display:inline-block;width:28px;height:28px;
  border-radius:2px;background:var(--paper-3);
}

/* --------------------------------------------------- 2. what it is, up top */

/* the brass variant of main.css's label, shared with the comparison pages */
.lbl--good{color:var(--brass)}

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

.os-id,.os-specs{
  display:flex;flex-direction:column;
  padding:clamp(18px,2.2vw,26px);
  background:var(--paper);border:1px solid var(--rule);
}
.os-id{border-top:2px solid var(--brass)}
.os-specs{border-top:2px solid var(--rule-2);background:var(--paper-2)}

.os-id-n{
  display:flex;align-items:center;gap:11px;
  margin:6px 0 12px;
  font:600 clamp(1.15rem,1.7vw,1.45rem)/1.2 var(--f-serif);
  letter-spacing:-.02em;color:var(--ink);
}
.os-id-n .os-mk{width:34px;height:34px}

.os-id-one{
  margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--rule);
  font:400 var(--fs-base)/1.68 var(--f-sans);color:var(--slate);
}

.os-vers{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.os-vers li{
  padding:4px 9px;background:var(--paper-2);border:1px solid var(--rule);
  font:400 var(--fs-sm)/1.35 var(--f-mono);color:var(--ink-2);
}
.os-id .os-vers li{background:var(--paper-3)}
.os-vers-n{
  margin:14px 0 0;
  font:400 var(--fs-sm)/1.62 var(--f-sans);color:var(--mute);
}

.os-specs-l{display:grid;gap:0;margin:12px 0 0}
.os-specs-l>div{
  display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);
  gap:4px 14px;padding:11px 0;border-bottom:1px solid var(--rule);
}
.os-specs-l>div:last-child{border-bottom:0;padding-bottom:0}
.os-specs-l dt{
  font:500 var(--fs-micro)/1.5 var(--f-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);
}
.os-specs-l dd{margin:0;font:400 var(--fs-sm)/1.55 var(--f-sans);color:var(--ink-2)}

@media (max-width:860px){
  .os-top{grid-template-columns:1fr}
  .os-specs-l>div{grid-template-columns:1fr}
  .os-specs-l dt{margin-bottom:1px}
}

/* --------------------------------------------------------- 3. where it runs */

.os-on{
  display:grid;gap:clamp(10px,1.4vw,16px);margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(214px,1fr));
}
.os-on-i{display:flex}
.os-on-a{
  display:flex;flex-direction:column;gap:11px;width:100%;
  padding:clamp(15px,1.8vw,20px);
  background:var(--paper);border:1px solid var(--rule);
  text-decoration:none;
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
a.os-on-a:hover{border-color:var(--ink);transform:translateY(-2px)}
a.os-on-a:hover .os-on-go{color:var(--brass)}

/* not offered: the tile stays, because the absence is information */
.os-on-i.is-off .os-on-a{background:transparent;border-style:dashed;cursor:default}

.os-on-h{display:flex;flex-direction:column;gap:3px}
.os-on-t{font:600 1.0313rem/1.25 var(--f-serif);letter-spacing:-.012em;color:var(--ink)}
.os-on-y,.os-on-n{
  font:500 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
}
.os-on-y{color:var(--brass)}
.os-on-n{color:var(--mute)}

.os-on-p{
  font:600 clamp(1.3rem,2vw,1.7rem)/1 var(--f-serif);letter-spacing:-.02em;color:var(--ink);
}
.os-on-p--off{color:var(--rule-2)}
.os-on-u{margin-inline-start:2px;font:400 var(--fs-sm)/1 var(--f-sans);color:var(--mute)}

.os-on-go{
  margin-top:auto;padding-top:11px;border-top:1px solid var(--rule);
  font:500 var(--fs-sm)/1.35 var(--f-sans);color:var(--ink);
  transition:color .16s var(--ease);
}
.os-on-go--off{color:var(--mute);font-weight:400}

/* how it gets there */
.os-deploy{
  display:grid;grid-template-columns:1.5fr auto;align-items:center;
  gap:clamp(16px,2.4vw,36px);
  margin:clamp(20px,2.6vw,34px) 0 0;padding:clamp(20px,2.6vw,32px);
  background:var(--paper);border:1px solid var(--rule);
}
.os-deploy-h{
  margin:8px 0 0;
  font:600 clamp(1.1rem,1.7vw,1.4rem)/1.26 var(--f-serif);
  letter-spacing:-.018em;color:var(--ink);
}
.os-deploy-p{margin:9px 0 0;font:400 var(--fs-sm)/1.68 var(--f-sans);color:var(--slate);max-width:64ch}
.os-deploy-a{display:flex;flex-wrap:wrap;gap:9px}

@media (max-width:820px){
  .os-deploy{grid-template-columns:1fr}
}

/* ------------------------------------------- 4. good at, and choose another */

.os-good{
  margin:clamp(26px,3vw,40px) 0 0;padding:clamp(18px,2.2vw,26px);
  background:var(--paper-2);border:1px solid var(--rule);
}
.os-good-l{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.os-good-l li{
  position:relative;padding-inline-start:20px;
  font:400 var(--fs-base)/1.66 var(--f-sans);color:var(--slate);
}
.os-good-l li b{color:var(--ink);font-weight:600}
.os-good-l li::before{
  content:"";position:absolute;inset-inline-start:0;top:.56em;
  width:7px;height:7px;border:1px solid var(--brass);border-radius:50%;
}

.os-instead{
  margin:clamp(18px,2.2vw,26px) 0 0;padding:clamp(18px,2.2vw,26px);
  background:var(--paper-2);
  border:1px solid var(--rule);border-inline-start:2px solid var(--brass);
}
.os-instead-l{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:13px}
.os-instead-l li{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:start;gap:6px 14px;
}
.os-instead-a{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 10px 5px 6px;
  background:var(--paper);border:1px solid var(--rule);
  font:500 var(--fs-sm)/1.3 var(--f-sans);color:var(--ink);
  text-decoration:none;white-space:nowrap;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.os-instead-a:hover{border-color:var(--ink);color:var(--brass)}
.os-instead-a .os-mk{width:22px;height:22px;padding:2px}
.os-instead-w{font:400 var(--fs-base)/1.62 var(--f-sans);color:var(--slate);padding-top:.18em}
.os-instead-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);
}

@media (max-width:620px){
  .os-instead-l li{grid-template-columns:1fr}
  .os-instead-w{padding-top:0}
}

.os-stamp{
  margin:clamp(22px,2.6vw,32px) 0 0;
  font:400 var(--fs-sm)/1.6 var(--f-sans);color:var(--mute);
}

/* -------------------------------------------------- 5. the rest of the kind */

.os-more{
  display:grid;gap:10px;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr));
}
.os-more-a{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:2px 11px;
  padding:13px 15px;background:var(--paper);border:1px solid var(--rule);
  text-decoration:none;transition:border-color .16s var(--ease);
}
.os-more-a:hover{border-color:var(--ink)}
.os-more-a:hover .os-more-n{color:var(--brass)}
.os-more-a .os-mk{grid-row:1/3;width:24px;height:24px}
.os-more-n{
  font:600 var(--fs-base)/1.3 var(--f-serif);letter-spacing:-.01em;color:var(--ink);
  transition:color .16s var(--ease);
}
.os-more-o{
  font:400 var(--fs-micro)/1.5 var(--f-sans);color:var(--mute);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ======================================================================
   The hub.
   ====================================================================== */

/* ---------------------------------------------------- 6. what is the same */

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

.os-same-l{margin:0;padding:clamp(16px,2vw,22px);list-style:none;background:var(--paper-2);border:1px solid var(--rule)}
.os-same-l li{
  display:grid;gap:3px;padding:11px 0;border-bottom:1px solid var(--rule);
}
.os-same-l li:first-child{padding-top:0}
.os-same-l li:last-child{border-bottom:0;padding-bottom:0}
.os-same-l b{font:500 var(--fs-base)/1.3 var(--f-sans);color:var(--ink)}
.os-same-l span{font:400 var(--fs-sm)/1.55 var(--f-sans);color:var(--mute)}

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

/* ----------------------------------------------------------- 7. the groups */

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

.os-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);
}
.os-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);
}
.os-group-n{
  grid-column:1;margin:0;
  font:400 var(--fs-sm)/1.6 var(--f-sans);color:var(--mute);max-width:62ch;
}
.os-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){
  .os-group-h{grid-template-columns:1fr}
  .os-group-c{grid-column:1;grid-row:auto;margin-top:2px}
}

/* ------------------------------------------------------------ 8. the tiles */

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

.os-tile{display:flex}
.os-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);
}
.os-tile-a:hover{border-color:var(--ink);transform:translateY(-2px)}
.os-tile-a:hover .os-tile-p{color:var(--brass)}

.os-tile-h{display:flex;align-items:center;gap:11px}
.os-tile-h .os-mk{width:34px;height:34px}
.os-tile-hn{display:flex;flex-direction:column;gap:2px;min-width:0}
.os-tile-n{font:600 1.0625rem/1.25 var(--f-serif);letter-spacing:-.01em;color:var(--ink)}
.os-tile-v{
  font:400 var(--fs-micro)/1.4 var(--f-mono);color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

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

.os-tile-foot{
  display:flex;align-items:end;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:1px solid var(--rule);
}
.os-tile-on{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.os-tile-p{
  font:500 var(--fs-sm)/1.3 var(--f-sans);color:var(--ink);white-space:nowrap;
  transition:color .16s var(--ease);
}

.os-chip{
  padding:2px 7px;background:var(--paper-2);border:1px solid var(--rule);
  font:400 var(--fs-micro)/1.5 var(--f-sans);color:var(--mute);white-space:nowrap;
}

/* -------------------------------------------------------- 9. side by side */

.os-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;
}
.os-t{width:100%;min-width:720px;border-collapse:collapse;text-align:left}

.os-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;
}

.os-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;
}
.os-t tbody th,.os-t tbody td{
  padding:12px clamp(10px,1.4vw,16px);
  border-bottom:1px solid var(--rule);
  vertical-align:top;font-weight:400;
}
.os-t tbody tr:last-child th,.os-t tbody tr:last-child td{border-bottom:0}
.os-t tbody tr:hover th,.os-t tbody tr:hover td{background:var(--paper-2)}
.os-t tbody td{font:400 var(--fs-sm)/1.5 var(--f-sans);color:var(--slate)}

.os-t-n{
  display:flex;align-items:center;gap:8px;
  font:500 var(--fs-base)/1.3 var(--f-sans);color:var(--ink);text-decoration:none;
  white-space:nowrap;transition:color .16s var(--ease);
}
.os-t-n:hover{color:var(--brass)}
.os-t-n .os-mk{width:20px;height:20px;padding:2px}
.os-t-on{white-space:normal}
.os-t-on .os-chip{display:inline-block;margin:0 3px 3px 0}

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

/* ---------------------------------------------------- 10. by product, cta */

.os-prod{
  display:grid;gap:1px;margin:0;padding:0;list-style:none;background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
.os-prod-a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:3px 12px;height:100%;
  padding:clamp(15px,1.9vw,21px);
  background:var(--paper);text-decoration:none;
  transition:background .16s var(--ease);
}
.os-prod-a:hover{background:var(--paper-2)}
.os-prod-a:hover .os-prod-t{color:var(--brass)}
.os-prod-a:hover .os-prod-go{transform:translateX(3px);border-color:var(--brass)}
.os-prod-t{
  grid-column:1;font:600 1.0625rem/1.25 var(--f-serif);letter-spacing:-.012em;color:var(--ink);
  transition:color .16s var(--ease);
}
.os-prod-c{grid-column:1;font:400 var(--fs-micro)/1.4 var(--f-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.os-prod-p{grid-column:1;margin-top:5px;font:400 var(--fs-sm)/1.3 var(--f-sans);color:var(--slate)}
.os-prod-go{
  grid-column:2;grid-row:1/4;align-self:center;
  width:26px;height:26px;flex:0 0 auto;position:relative;
  border:1px solid var(--rule-2);border-radius:50%;
  transition:transform .16s var(--ease),border-color .16s var(--ease);
}
.os-prod-go::after{
  content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;
  border-top:1.3px solid currentColor;border-right:1.3px solid currentColor;
  transform:rotate(45deg) translate(-1px,1px);color:var(--mute);
}

.os-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;
}
.os-cta-t{margin:0;font:600 clamp(1.2rem,2vw,1.6rem)/1.25 var(--f-serif);letter-spacing:-.02em;color:var(--ink)}
.os-cta-s{margin:8px 0 20px;font:400 var(--fs-base)/1.6 var(--f-sans);color:var(--mute)}
.os-cta .btn{margin:0 5px}

/* -------------------------------------------------------------- 11. rtl */

/* Everything above is written with logical properties, so this is the whole
   of it: the two arrows that point along the reading direction. */
[dir="rtl"] .os-prod-go::after{transform:rotate(225deg) translate(-1px,1px)}
[dir="rtl"] .os-prod-a:hover .os-prod-go{transform:translateX(-3px)}