/* Homepage — artboards 10 (1440) and 11 (390). Tokens only; shared pieces come from site.css. */

.hm-hero{display:flex;flex-direction:column;gap:16px;max-width:820px}
.hm-lede{font-size:18px;line-height:28px;color:var(--ink3);max-width:60ch}

/* Selector card */
.hm-pick{margin-top:32px;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 24px;background:var(--bg)}
.hm-pair{flex:1 1 320px}
.hm-date{flex:1 1 300px}
.hm-th{flex:0 0 auto}
.hm-srch{position:relative}
.hm-srch .pair-results{top:calc(100% + 6px)}
.hm-hint{font-size:14px;line-height:20px;color:var(--ink2)}
.hm-hint strong{color:var(--ink);font-weight:600}
.hm-th .hm-hint{margin-top:6px}
.hm-seg .seg-o{min-width:60px;padding:0 12px}
.hm-go{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;border-top:1px solid var(--line);padding-top:20px}
.hm-route{font-size:13px;line-height:20px;color:var(--ink3);overflow-wrap:anywhere}

/* Long (desktop) vs short (mobile) copy of the same sentence. */
.hm-s{display:none}

.hm-sec{border-top:0;padding-top:0;margin-top:64px}

/* Featured forecasts */
.hm-feat{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:20px}
.hm-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.hm-card-t{font-size:18px;line-height:24px;font-weight:600}
.hm-card-t a{color:var(--ink)}
.hm-card-s{font-size:14px;line-height:20px;color:var(--ink2)}
.hm-odl{display:flex;flex-direction:column}
.hm-odl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--s3)}
.hm-odl dt{font-size:14px;line-height:20px}
.hm-odl dd{font-size:18px;line-height:20px;font-weight:600;white-space:nowrap}
.hm-card-f{font-size:13px;line-height:16px;color:var(--ink2);margin-top:auto}
.hm-note{margin-top:12px;font-size:14px;line-height:20px;color:var(--ink2)}

/* How it works */
.hm-how{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:32px}
.hm-how>li{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--ink);padding-top:16px}
.hm-how>li>div{display:flex;flex-direction:column;gap:8px}
.hm-n{font-size:14px;line-height:20px;font-weight:700;color:var(--ink2)}
.hm-how p{font-size:16px;line-height:24px;color:var(--ink3)}

/* Track record + sources */
.hm-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:24px}
.hm-tr,.hm-src{border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.hm-tr{background:var(--s2)}
.hm-src{border:1px solid var(--line)}
.hm-tr p,.hm-src p{font-size:16px;line-height:24px;color:var(--ink3)}
.hm-src ul{padding-left:18px;margin:0;display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:24px;color:var(--ink3)}
.hm-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.hm-a{font-weight:600}

@media (max-width:767px){
  .hm-lede{font-size:16px;line-height:24px;margin-top:-4px}
  .hm-hero{gap:12px}
  .hm-pick{margin-top:24px;padding:16px;flex-direction:column;align-items:stretch;gap:16px}
  .hm-pair,.hm-date,.hm-th{flex:none}
  .hm-date .hm-hint{display:none}
  .hm-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .hm-seg .seg-o{min-width:0;padding:0 8px;font-size:15px}
  .hm-go{border-top:0;padding-top:0;flex:none}
  .hm-go .btn-p{width:100%}
  .hm-route{display:none}

  .hm-l{display:none!important}
  .hm-s{display:inline}
  p.hm-s,a.hm-s{display:block}
  a.hm-a.hm-s{display:flex;align-items:center;min-height:44px}

  .hm-sec{margin-top:40px}
  .hm-feat{margin-top:16px;grid-template-columns:minmax(0,1fr);gap:12px}
  .hm-feat>li:nth-child(n+3){display:none}
  .hm-card{border-radius:var(--r-md);padding:16px;gap:12px}
  .hm-card-t{font-size:17px}
  .hm-odl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hm-odl>div{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;border:0}
  .hm-odl dt{color:var(--ink3)}
  .hm-odl dd{font-size:22px;line-height:28px}
  .hm-card-f{font-size:14px;line-height:20px}
  .hm-note{margin-top:10px}

  .hm-how{margin-top:12px;display:flex;flex-direction:column;gap:0}
  .hm-how>li{flex-direction:row;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
  .hm-how>li>div{gap:4px}
  .hm-n{font-size:16px;line-height:22px;flex:0 0 16px}
  .hm-how .h3{font-size:16px;line-height:22px}

  .hm-duo{gap:32px;margin-top:32px}
  .hm-tr{padding:20px;gap:10px}
  .hm-src{padding:0;border:0;gap:8px}
  .hm-tr .hm-a{display:flex;align-items:center;min-height:44px}
}