/* Long-form pages (comparison guides). Loaded after styles.css and only on
   article pages, so the landing itself never pays for it. */

.doc-page{--read:#d3d8e4;--col:43rem;--gut:clamp(20px,4.5vw,44px)}
/* the animated city stays, but quieter: it sits behind long reading */
.doc-page .site-bg .hmap{opacity:.34}
.doc-page .phone{cursor:default}

.doc{display:grid;padding-block:clamp(44px,6vw,92px) 0;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [wide-start] minmax(0,9rem)
    [text-start] min(var(--col),100% - 2 * var(--gut))
    [text-end] minmax(0,9rem)
    [wide-end] minmax(var(--gut),1fr) [full-end]}
.doc>*{grid-column:text;min-width:0}
.doc>.wide{grid-column:wide}
.doc p,.doc li{color:var(--read);font-size:1.0625rem;line-height:1.72}
.doc p+p{margin-top:1.05em}
.doc p a,.doc li a,.doc td a{color:var(--text);text-decoration:underline;
  text-decoration-color:rgba(25,224,138,.5);text-decoration-thickness:1.5px;
  text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.doc p a:hover,.doc li a:hover,.doc td a:hover{color:var(--paint);text-decoration-color:var(--paint)}
.doc :target{scroll-margin-top:96px}

/* opening */
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.doc .crumbs li{font-size:.86rem;line-height:1.5;color:var(--muted)}
.crumbs li+li::before{content:"/" / "";margin-inline:10px;color:var(--muted-2)}
.doc .crumbs a{color:var(--muted);text-decoration:none;transition:color .2s}
.doc .crumbs a:hover{color:var(--text)}
.doc .crumbs [aria-current]{color:var(--read)}
/* a step below the landing h1: the title runs to about 60 characters */
.doc__title{margin-top:18px;grid-column:text-start/wide-end;font-size:clamp(2.3rem,4.9vw,4.1rem);
  letter-spacing:-.04em;line-height:1.04;max-width:19ch}
.doc__meta{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-size:.9rem;color:var(--muted)}
.doc__meta span+span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:14px;
  border-radius:99px;background:var(--paint);vertical-align:middle;translate:0 -1px}
.doc .doc__lede{margin-top:34px;font-size:clamp(1.12rem,1.45vw,1.26rem);line-height:1.62;color:var(--text)}
.doc .doc__note{margin-top:22px;padding-top:18px;border-top:1px solid var(--edge);
  font-size:.95rem;color:var(--muted)}

/* section headings inside the column */
.doc h2{font-size:clamp(1.65rem,2.7vw,2.25rem);letter-spacing:-.035em;line-height:1.1}
.doc h3{font-size:1rem;letter-spacing:-.01em;line-height:1.3}
.doc__h{margin-top:clamp(72px,8vw,112px)}
/* Devanagari matras and CJK glyphs collide at Latin line-heights; Japanese breaks by phrase, never before small kana */
:lang(ja) .doc__title,:lang(zh) .doc__title,:lang(ko) .doc__title,:lang(hi) .doc__title,
:lang(ja) .doc h2,:lang(zh) .doc h2,:lang(ko) .doc h2,:lang(hi) .doc h2{letter-spacing:-.01em;line-height:1.24}
:lang(ja) .doc__title,:lang(ja) .doc h2{line-break:strict;word-break:auto-phrase}
:lang(zh) .doc__title,:lang(zh) .doc h2{word-break:keep-all;overflow-wrap:anywhere}
.doc__h+p{margin-top:16px}

/* short answer */
.picks{margin-top:clamp(56px,6vw,80px)}
.picks h2{font-size:1.3rem;letter-spacing:-.02em}
.picks ul{list-style:none;padding:0;margin-top:14px;border-top:1px solid var(--edge)}
.picks li{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--edge-2);font-size:.98rem}
.picks li span{color:var(--muted)}
.doc .picks li a{font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px}
.picks li a svg{width:15px;height:15px;stroke:var(--paint);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:translate .3s var(--ease)}
.doc .picks li a:hover{color:var(--paint)}
.picks li a:hover svg{translate:0 3px}

/* three ways to count a walk */
.mech{margin-top:clamp(34px,4vw,52px)}
.mech__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.mech__map{border-radius:18px;overflow:hidden;border:1px solid var(--edge);background:#090c15;
  box-shadow:var(--shadow)}
.mech__map svg{width:100%;height:auto}
.mech__panel h3{margin-top:18px;font-size:1.12rem}
.doc .mech__panel p{margin-top:6px;font-size:.96rem;line-height:1.6;color:var(--muted)}
.doc .mech__panel .mech__apps{margin-top:10px;color:var(--text);font-weight:600;font-size:.9rem}
.doc .mech figcaption{margin-top:22px;font-size:.86rem;color:var(--muted)}

.mx-road{stroke:#1e2637;stroke-width:9;stroke-linecap:square}
.mx-bld{fill:#121828}
.mx-park{fill:#0e1c1b}
.mx-grid{stroke:rgba(255,255,255,.09);stroke-width:1}
.mx-fog{fill:#262e45}
.mx-trace{fill:none;stroke:rgba(238,241,247,.62);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mx-paint{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.mx-sq{fill:rgba(25,224,138,.2);stroke:rgba(25,224,138,.6);stroke-width:1}
.mx-walker circle:first-child{fill:rgba(25,224,138,.2)}
.mx-walker circle:last-child{fill:var(--paint);stroke:#0a0a12;stroke-width:2}

/* the route draws once, the fog clears behind it and the squares fill as it
   reaches them. The finished drawing is the default; only the pre-reveal state
   is hidden, so no-JS and reduced-motion readers get the complete picture. */
.mx-draw{stroke-dasharray:384;stroke-dashoffset:0;transition:stroke-dashoffset 1.9s cubic-bezier(.45,0,.2,1) .25s}
.mx-sq{transition:opacity .45s var(--ease)}
.mx-walker{transition:opacity .4s var(--ease) 2s}
.mech.reveal:not(.is-in) .mx-draw{stroke-dashoffset:384}
.mech.reveal:not(.is-in) .mx-sq,.mech.reveal:not(.is-in) .mx-walker{opacity:0}

/* every single street: the apps that count streets */
.fit{margin-top:24px;border-top:1px solid var(--edge)}
.fit div{display:grid;grid-template-columns:9rem 1fr;gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--edge-2)}
.fit dt a{font-weight:700;color:var(--text);transition:color .2s}
.fit dt a:hover{color:var(--paint)}
.fit dd{margin:0;color:var(--read);font-size:.98rem;line-height:1.6}

/* one entry per app */
.alt{position:relative;margin-top:clamp(64px,7vw,96px);padding-top:34px;border-top:1px solid var(--edge)}
.alt::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:99px;
  background:var(--road-hi)}
.alt--ours::before{background:var(--paint);box-shadow:0 0 0 5px rgba(25,224,138,.16)}
.alt__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.alt__head h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:99px;
  font-size:.78rem;font-weight:700;letter-spacing:.01em;color:var(--paint);
  background:rgba(25,224,138,.09);border:1px solid rgba(25,224,138,.32)}
.doc .alt__best{margin-top:14px;color:var(--text);font-weight:600}
.alt__best b{color:var(--muted);font-weight:600}
.doc .alt__best+p{margin-top:12px}

.facts{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--edge-2)}
.facts div{padding:13px 18px 13px 0;border-bottom:1px solid var(--edge-2)}
.facts div:nth-child(even){padding-left:18px;border-left:1px solid var(--edge-2)}
.facts dt{font-size:.8rem;font-weight:600;color:var(--muted)}
.facts dd{margin:3px 0 0;font-size:.96rem;line-height:1.5;color:var(--text)}

.pc{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(24px,3vw,40px)}
.pc ul{list-style:none;padding:0;margin-top:12px;display:grid;gap:9px}
.doc .pc li{display:flex;gap:11px;align-items:flex-start;font-size:.97rem;line-height:1.55}
.pc svg{width:17px;height:17px;flex:none;margin-top:4px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.pc__good svg{stroke:var(--paint)}
.pc__mind svg{stroke:var(--muted)}
.doc .alt__src{margin-top:22px;font-size:.86rem;color:var(--muted)}

.shots{margin-top:30px;display:grid;gap:clamp(14px,2vw,24px);max-width:270px}
.shots .phone{width:100%;margin:0}
.doc .shots figcaption{grid-column:1/-1;font-size:.86rem;color:var(--muted)}

.doc .doc__end{margin-top:clamp(56px,6vw,80px);font-size:.95rem;color:var(--muted)}

@media (max-width:860px){
  .mech__grid{grid-template-columns:1fr;gap:40px}
  .mech__panel{display:grid;grid-template-columns:1fr;max-width:520px}
}
@media (max-width:620px){
  .doc__meta{font-size:.86rem;flex-direction:column;align-items:flex-start;gap:2px}
  .doc__meta span+span::before{display:none}
  .picks li{grid-template-columns:1fr;gap:2px;padding:13px 0}
  .fit div{grid-template-columns:1fr;gap:2px;padding:13px 0}
  .facts{grid-template-columns:1fr}
  .facts div:nth-child(even){padding-left:0;border-left:0}
  .pc{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .mx-draw,.mx-sq,.mx-walker{transition:none}
}