/* ============================================================
   Use cases group: the hub (use-cases.html) and its three job pages
   (use-cases/*.html). Loaded after site.css and pages.css, and only
   holds what nobody else needs.

   HUB
     .lane-list .lane ..... the three reader lanes, anchors #dev #idea #team
     .jobs .job ........... the three flagship jobs, each row is one link
     .rt-head ............. routine library head (copy left, doodle right)
     .library-cols .rgroup  the routine library, grouped by team (Founders spans the width)
     .routines ............ one ruled list per group; .when and .app mark
                            the time and the connected app inside each line
     .starters ............ starter list (uses .frows--2 from pages.css)

   JOB PAGES
     .crumb ............... back link above the H1
     .beats .bt ........... the six-beat ledger; .gate rows are the two signatures
     .morejobs ............ the sibling-jobs row at the end of "when it fits"
   ============================================================ */

/* ---------- shared bits ---------- */
.crumb{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 18px;font-weight:700;font-size:16px;text-decoration:none;border-bottom:2px solid currentColor}
.crumb span{transition:transform .2s var(--ease)}
.crumb:hover span{transform:translateX(-4px)}
.phero .jump{max-width:25rem;margin-top:34px}
.phero .lede,.sec-head .lede,.lane-line,.job p{text-wrap:pretty}
.rt-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;color:var(--p-strong);text-decoration:none;border-bottom:2px solid currentColor;white-space:nowrap}
.frow-body .rt-link{margin-top:2px}
.rt-link span{transition:transform .2s var(--ease)}
.rt-link:hover span{transform:translateX(4px)}

/* ---------- hub: lanes ---------- */
.lane-list{border-top:2px solid var(--p-ink)}
.lane{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px 56px;align-items:start;padding:34px 0 38px;border-bottom:1px solid var(--p-rule);scroll-margin-top:20px}
.lane h2{max-width:9ch;font-size:clamp(36px,4.8vw,66px);line-height:.98;letter-spacing:-.045em;transition:color .2s}
.lane-body{max-width:54ch;padding-top:6px}
.lane-promise{font-weight:800;font-size:clamp(20px,1.9vw,26px);line-height:1.22;letter-spacing:-.03em}
.lane-line{margin-top:10px;font-size:17px;line-height:1.5;color:var(--p-dim)}
.lane .more{margin-top:10px}
.lane h2{grid-column:1;grid-row:1}
.lane-body{grid-column:2;grid-row:1/3}
.lane .sign{grid-column:1;grid-row:2;justify-self:start;margin-top:4px;visibility:hidden;color:var(--flag-deep);border-color:var(--flag-deep)}
.lane:target h2{color:var(--flag-deep)}
.lane:target .sign{visibility:visible}
@media(max-width:820px){.lane{grid-template-columns:1fr;padding:28px 0 30px}.lane h2{max-width:12ch}.lane-body{grid-column:1;grid-row:2;padding-top:0}.lane .sign{grid-row:3;margin-top:6px}}

/* ---------- hub: flagship jobs ---------- */
.jobs{list-style:none;border-top:2px solid var(--p-ink)}
.job{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"t p" "t g";gap:6px 32px;align-items:baseline;padding:26px 0 28px;border-bottom:1px solid var(--p-rule);color:inherit;text-decoration:none}
.job h3{grid-area:t;font-weight:800;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em;line-height:1.1;text-wrap:balance;transition:color .18s}
.job:hover h3{color:var(--p-bad)}
.job p{grid-area:p;font-size:17px;line-height:1.45;max-width:46ch}
.job .go{grid-area:g;display:inline-flex;align-items:center;gap:8px;width:fit-content;min-height:44px;font-weight:800;border-bottom:2px solid currentColor}
.job .go span{transition:transform .2s var(--ease)}
.job:hover .go span{transform:translateX(4px)}
@media(max-width:700px){.job{grid-template-columns:1fr;grid-template-areas:"t" "p" "g"}}

/* ---------- hub: the routine library ---------- */
.rt-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:center;margin-bottom:60px}
.rt-head .lede{max-width:50ch}
.rt-connect{margin-top:26px;max-width:54ch;padding:18px 22px 20px;background:var(--sea-2);font-size:16px;line-height:1.5;color:var(--chalk)}
.rt-connect b{font-weight:800;color:var(--signal)}
.doodle--mail{width:min(430px,100%);margin-left:auto}
@media(max-width:900px){.rt-head{grid-template-columns:1fr;margin-bottom:44px}.doodle--mail{width:min(340px,100%);margin-left:0}}
.library-cols{columns:2;column-gap:64px;margin-bottom:56px}
.rgroup{min-width:0;break-inside:avoid;margin-bottom:56px}
.rgroup--wide{margin-bottom:0}
.rgroup h3{font-weight:800;font-size:clamp(26px,2.8vw,38px);letter-spacing:-.04em;line-height:1.05;margin-bottom:14px;color:var(--p-strong)}
.routines{list-style:none;border-top:2px solid var(--p-ink)}
.routines li{display:grid;grid-template-columns:8.6rem minmax(0,1fr);gap:4px 22px;padding:15px 0 17px;border-bottom:1px solid var(--p-rule);font-size:15.5px;line-height:1.5;color:var(--p-dim)}
.routines .when{font-weight:800;color:var(--p-accent);line-height:1.4}
.routines .app{font-weight:700;color:var(--mint)}
.rgroup--wide .routines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.rgroup--wide .routines li{grid-template-columns:1fr;gap:6px}
.rt-links{display:flex;flex-wrap:wrap;gap:0 40px;margin-top:44px}
.rt-links .more{margin-top:0}
@media(max-width:900px){.library-cols{columns:1}.rgroup{margin-bottom:44px}.rgroup--wide .routines{grid-template-columns:1fr;gap:0}}
@media(max-width:560px){.routines li,.rgroup--wide .routines li{display:block}.routines .when{display:inline}}

/* ---------- hub: starters ---------- */
.starters .frow{padding-bottom:22px}
.starters .starter-end{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:22px 24px 20px;margin-top:0;border-top:0;background:var(--sea);color:var(--chalk)}
.starters .frows--2 .starter-end p{margin:0;max-width:24ch;font-weight:800;font-size:clamp(19px,1.7vw,22px);line-height:1.22;letter-spacing:-.025em;color:var(--chalk)}
.starters .starter-end .more{margin-top:8px;color:var(--signal)}
.starters .starter-end .more:focus-visible{outline-color:var(--signal)}
.s-paper .notfor{margin-top:60px;padding-top:22px;max-width:none;border-top:2px solid var(--p-ink);font-size:17px;line-height:1.5;color:var(--p-dim);scroll-margin-top:20px}

/* ---------- job pages: the six-beat ledger ---------- */
.beats{list-style:none;border-top:2px solid var(--p-ink)}
.bt{display:grid;grid-template-columns:7.8rem minmax(0,1fr);gap:4px 24px;padding:20px 16px 22px;border-bottom:1px solid var(--p-rule)}
.bt h3{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.035em;line-height:1.15}
.bt .who{grid-column:1;grid-row:1/3;align-self:start;padding-top:7px;font-family:var(--mono);font-size:13px;line-height:1.4;color:var(--p-dim)}
.bt p{grid-column:2;grid-row:2;max-width:56ch;font-size:16px;line-height:1.5;color:var(--p-dim)}
.bt.gate{background:var(--flag);border-bottom-color:transparent}
.bt.gate .who,.bt.gate p{color:var(--sea)}
.bt.gate p{font-weight:500}
.bt.gate .sign{color:var(--sea);border-color:var(--sea)}
.bt-fammy{display:block;width:78px;margin:8px 0 -4px -6px;color:var(--sea);overflow:visible}
@media(prefers-reduced-motion:no-preference){.bt.gate:hover .bt-fammy{animation:peck .5s var(--ease)}}
.uc-label{margin-top:16px;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--p-dim)}
.sec-head .more{display:inline-block;margin-top:14px;padding:12px 0 2px;min-height:44px;line-height:1.4;border-bottom:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.sec-head .more span{display:inline-block}
@media(max-width:640px){
  .bt{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:18px 14px 20px}
  .bt h3{grid-column:1;grid-row:1}
  .bt .who{grid-column:2;grid-row:1;padding-top:5px;text-align:right;max-width:9.5rem}
  .bt p{grid-column:1/-1;grid-row:2}
  .bt-fammy{display:none}
}

/* ---------- job pages: more jobs ---------- */
.morejobs{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px;margin-top:30px}
.morejobs span{font-weight:700}
.morejobs a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;text-decoration:none;border-bottom:2px solid currentColor;margin:0}
.morejobs a:hover{opacity:.75}