/* ------------------------------------------------------------- solution.css
   Section 04. Two pieces of what used to be prose, made visual:

   - the three absences that describe how easy it is to walk in
   - the boundary, as a straight is / is not comparison

   The boundary is the most misread thing about the product, and it was
   carrying four separate claims inside one paragraph. Set as two columns it
   is scannable, and nothing has been dropped: not a clinic, not a counselling
   service, nobody becomes a patient, and referral goes out to an independent
   professional. That last one stays in prose under the block, because it is a
   sentence about what happens next rather than a property of the room. */

.access{
  list-style:none;
  margin:clamp(26px,3vw,34px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.access li{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-2);
  border:1px solid var(--rule);
  border-radius:100px;
  padding:9px 16px;
  background:rgba(255,255,255,.6);
}

.compare{
  --mark:clamp(23px,2.1vw,30px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,2.6vw,34px);
  margin-top:clamp(30px,3.4vw,42px);
}
@media(min-width:780px){
  .compare{grid-template-columns:1fr 1fr;gap:clamp(30px,3.6vw,54px)}
  .compare .col + .col{
    border-left:1px solid var(--rule);
    padding-left:clamp(26px,3vw,44px);
  }
}

.compare h4{
  margin:0 0 clamp(18px,1.8vw,24px);
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--ink-3);
}
.compare ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.5vw,20px)}
.compare li{
  display:grid;
  grid-template-columns:var(--mark) 1fr;
  gap:clamp(13px,1.3vw,18px);
  align-items:start;
  font-size:clamp(18px,1.75vw,23px);
  line-height:1.38;
  color:var(--ink-2);
}
.compare .mark{
  width:var(--mark);
  height:var(--mark);
  margin-top:.12em;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* the tick and cross are on a 24 unit grid, so scaling them would thicken the
   line with them. This holds it at 1.7 screen px whatever the size. */
.compare .mark *{vector-effect:non-scaling-stroke}
.compare .is .mark{stroke:var(--sage)}
.compare .isnt .mark{stroke:#BFA98C}
.compare .isnt li{color:var(--ink-3)}

.boundary-line{
  margin:clamp(24px,2.8vw,32px) 0 0;
  padding-left:18px;
  border-left:2px solid var(--rule);
  max-width:58ch;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-3);
}


/* the pills carry a whole column on the student page, so they need a little
   more presence than they had as a footnote under a paragraph */
.access-note{
  margin:clamp(16px,1.8vw,22px) 0 0;
  max-width:30ch;
  font-size:15.5px;
  line-height:1.5;
  color:var(--ink-3);
}
.access li{padding:11px 18px;font-size:11.5px}