/* ============================================================
   The home page's two new sections — "Two Places, One Study".

   Approved 2026-09-14. The page used to alternate between the site
   and the app without naming either, and the section that should have
   explained them predated the Study Desk, Sage, the reference layer,
   the timeline and the atlas.

   Two sections answer it: the two halves shown as one thing joined by
   a thread (the hinge sentence is the load-bearing part), and the
   counted proof beneath it. The feature grid keeps styles.css's own
   `.card`; all it gains here is the marker saying where each one lives.

   Tokens are styles.css's own (:root there).
   ============================================================ */

/* ---- two places, one study ---- */
.twoplaces .section-head{margin-bottom:48px}
.halves{display:flex;align-items:stretch;gap:0}
.half{
  flex:1;min-width:0;padding:30px 32px 28px;border-radius:20px;
  border:1px solid rgba(142,153,194,.22);
  background:linear-gradient(180deg,rgba(15,20,42,.72),rgba(10,15,34,.42));
}
.half.web{border-color:rgba(232,184,115,.3)}
.half.app{border-color:rgba(91,227,213,.3)}
.half > .eyebrow{margin:0}
.half.app > .eyebrow{color:var(--aqua)}
.half h3{
  font-family:var(--font-display);font-size:clamp(20px,2vw,25px);letter-spacing:.05em;
  font-weight:600;margin:10px 0 4px;color:var(--starlight);
}
.half-where{margin:0 0 20px;font-size:12.5px;color:var(--faint);letter-spacing:.02em}
.half-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:13px}
/* the bullet is absolute, so the sentence flows as one run — a flex bullet
   makes the bold lead-in its own column and the line ragged */
.half-list li{
  position:relative;padding-left:17px;
  font-size:14.5px;line-height:1.55;color:#DDE3F5;font-weight:300;
}
.half-list b{color:var(--starlight);font-weight:600}
.half-list li::before{
  content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(232,184,115,.7);
}
.half.app .half-list li::before{background:var(--aqua);box-shadow:0 0 8px rgba(91,227,213,.7)}

/* the seam: one thread between the two, with the knot the site uses */
.seam{
  width:118px;flex:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
}
.seam .wire{flex:1;width:1px;background:linear-gradient(180deg,transparent,rgba(232,184,115,.55),transparent)}
.seam .knot{
  width:38px;height:38px;border-radius:50%;flex:none;
  border:1px solid rgba(232,184,115,.6);background:rgba(232,184,115,.1);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:16px;text-shadow:0 0 14px rgba(232,184,115,.8);
}

.hinge{margin:34px auto 0;max-width:660px;text-align:center}
.hinge b{
  display:block;font-family:var(--font-display);font-size:clamp(16px,1.7vw,19px);
  letter-spacing:.05em;color:var(--gold);font-weight:600;
}
.hinge span{display:block;margin-top:10px;font-size:14.5px;line-height:1.65;color:#B4BDDD;font-weight:300}

/* ---- counted, not claimed ---- */
/* it follows "two places" directly and the grid follows it, so it borrows
   the padding either side rather than adding 220 px of sky */
.counted-section{padding:0 0 40px}
.counted-section .section-head{max-width:940px;margin-bottom:44px}
.counts{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:0;
  background:rgba(142,153,194,.16);border:1px solid rgba(142,153,194,.16);
  border-radius:18px;overflow:hidden;
}
.counts > div{background:rgba(7,11,28,.92);padding:24px 22px}
.counts dt{
  font-family:var(--font-display);font-size:clamp(22px,2.3vw,28px);
  letter-spacing:.02em;color:var(--gold);font-variant-numeric:tabular-nums;
}
.counts dd{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:#B4BDDD;font-weight:300}
.counts-foot{
  margin:24px auto 0;max-width:760px;text-align:center;
  font-size:13px;line-height:1.7;color:var(--faint);font-weight:300;
}
.counts-foot a{color:var(--gold)}

/* ---- where a feature lives ---- */
.card{position:relative}
.surf{
  position:absolute;right:22px;top:22px;z-index:2;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  border:1px solid rgba(142,153,194,.35);border-radius:999px;padding:3px 10px;color:var(--faint);
}
.surf.both{border-color:rgba(167,139,250,.5);color:var(--violet)}
.surf.web{border-color:rgba(232,184,115,.5);color:var(--gold)}
.surf.app{border-color:rgba(91,227,213,.5);color:var(--aqua)}
.card h3{padding-right:96px}

/* one line under the screenshots saying what they are */
.shot-note{
  margin:-40px auto 48px;max-width:620px;text-align:center;
  font-size:13px;line-height:1.6;color:var(--faint);font-weight:300;
}
.shot-note b{color:var(--starlight);font-weight:500}

@media(max-width:900px){
  .halves{flex-direction:column}
  .half{padding:24px 22px 22px}
  .seam{width:auto;flex-direction:row;height:74px;gap:14px;padding:0 8px}
  .seam .wire{flex:1;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(232,184,115,.55),transparent)}
  .half .btn{width:100%}
  .counts{grid-template-columns:repeat(2,1fr)}
  .counts > div:last-child{grid-column:span 2}
  .card h3{padding-right:0}
  .surf{position:static;display:inline-block;margin-bottom:14px}
  .shot-note{margin:-24px auto 36px}
}
@media(max-width:560px){
  .counts{grid-template-columns:1fr}
  .counts > div:last-child{grid-column:auto}
}