/* Approved landing refinements, kept separate from the original shared design. */
[data-wipe]{clip-path:none}
.masthead{padding:6px 0}
.masthead .links{width:100%;margin-left:0;justify-content:space-between;flex-wrap:nowrap}
.masthead .links button{
  display:inline-flex;align-items:center;min-height:44px;padding:0 8px;
  border:0;background:transparent;cursor:pointer;
  font-family:var(--f-mono);font-size:clamp(12.5px,1vw,14.5px);
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-55);
}
.masthead .links button:hover{color:var(--ink)}
.masthead .links .header-access{padding:0 16px;background:var(--ink);color:var(--bone-hi);letter-spacing:0.1em}
.masthead .links .header-access:hover{background:var(--coral);color:var(--ink)}
.hero{padding-top:clamp(16px,1.8vw,24px)}
.hero-plate{margin-top:clamp(16px,1.7vw,24px);margin-inline:auto}
/* Trim the lower landscape; keep the wordmark inside the shorter frame. */
.hero-plate .plate-inner{aspect-ratio:2182/810;overflow:hidden}
.hero-plate .plate-inner > img{position:absolute;inset:0 auto auto 0;height:auto;aspect-ratio:2182/980;object-fit:contain}

/* Leave a light paper frame around both command/copy rows. */
.install{
  padding:clamp(12px,1.5vw,20px);
  border:1px solid var(--rule-soft);
  background:rgba(240,233,220,0.5);
}
.install::before{inset:0}

footer .footer-domain{text-transform:none}

/* Clear positioning and a primary action within the first screen. */
.hero h1{font-size:clamp(40px,6vw,92px)}
.hero-headline-line{display:block;white-space:nowrap}
.hero-row{display:block}
.hero-context{margin-top:16px}
.hero-who,.hero-loop{
  width:100%;max-width:none;margin:0;
  font-family:var(--f-sans);font-variation-settings:normal;font-weight:400;
  font-size:clamp(18px,1.6vw,22px);line-height:1.55;letter-spacing:normal;
  text-wrap:wrap;color:var(--ink-72);
}
.hero-note{width:100%;max-width:none;text-wrap:wrap}
.hero-loop{margin-top:16px}
.hero-summary{max-width:none;margin-top:16px;font-size:clamp(17px,1.6vw,22px);line-height:1.45;color:var(--ink-72)}
.hero-plate{width:100%;max-width:100%}
.product-status{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:0.03em;color:var(--ink-72);text-transform:none;scroll-margin-top:24px}
button.band-link{padding:0;border:0;background:transparent;text-align:left;cursor:pointer}
button.band-link:hover,button.band-link:focus-visible{opacity:0.72;transform:translateY(-2px)}
.equation{flex-wrap:wrap;white-space:normal;gap:12px 18px}
.equation .tail{white-space:nowrap}
.text-link{display:inline-block;padding:8px 0;text-decoration:underline;text-underline-offset:4px;font-size:16px;line-height:1.5}
.example-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:12px 0 28px}
.example-intro p{max-width:none}
.example-intro h3,.install h2{font-family:var(--f-title);font-size:clamp(25px,3vw,38px);font-weight:700;letter-spacing:-0.035em;line-height:1.15}
.example-intro p,.example-steps p,.install-intro{font-size:clamp(16px,1.35vw,20px);line-height:1.65;color:var(--ink-72)}
.forecast-example{margin:0;border:1px solid var(--rule);padding:8px;background:var(--bone-hi)}
.forecast-example img{width:100%;height:auto}
.forecast-legend{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;padding:12px 8px 0;font-size:13px;line-height:1.5}
.forecast-legend li{display:flex;align-items:center;gap:8px}
.forecast-legend li::before{content:"";width:22px;border-top:3px solid var(--ink)}
.forecast-legend .forecast::before{border-color:var(--coral);border-top-style:dashed}
.forecast-legend .range::before{height:14px;border:0;background:rgba(126,154,140,0.35)}
.forecast-example figcaption{padding:14px 8px 8px;font-family:var(--f-mono);font-size:12px;line-height:1.6;color:var(--ink-72)}
.example-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:26px}
.example-steps .mono{display:block;font-size:12px;line-height:1.6;color:var(--ink-72);margin-bottom:12px}
.install-intro{max-width:none;margin-bottom:12px}
.install-links{display:flex;flex-wrap:wrap;gap:8px 24px}
#contents > .action{margin-top:0;padding-top:0;border-top:0}
.cta{width:100%;flex-direction:column;align-items:flex-start;gap:16px}
.cta-note{flex:none;text-transform:none;letter-spacing:0.02em;max-width:none;line-height:1.6}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.cta-actions .btn{border:1px solid var(--ink);cursor:pointer}
.cta-actions .btn:hover{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.access-dialog .form-note{font-size:13px;line-height:1.55;color:var(--ink-72);margin:0 0 12px}
@media (min-width:900px) and (max-height:900px){
  .hero{padding-top:16px}
  .hero h1{max-width:none;font-size:clamp(40px,5vw,80px)}
  .hero-plate{margin-top:16px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(32px,9vw,40px)}
  .cta-actions{flex-direction:column;align-items:flex-start}
  .plate-inner > img{aspect-ratio:1560/700}
  .hero-summary{font-size:17px}
  .example-steps{grid-template-columns:minmax(0,1fr)}
  .example-steps{gap:20px}
  .equation{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:14px 12px}
  .equation .term{font-size:clamp(20px,6vw,30px)}
  .equation .op{text-align:center}
  .equation .term.out{justify-self:start}
  .equation .tail{grid-column:1/-1;margin-left:0;margin-top:8px}
  .forecast-example{padding:4px}
}

@media (max-width:380px){
  .masthead .links button{font-size:11px;letter-spacing:0.06em;padding:0 4px}
  .masthead .links .header-access{padding:0 10px;letter-spacing:0.06em}
}

.forecast-tabs{display:flex;gap:8px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.forecast-tabs[hidden]{display:none}
.forecast-tabs button{min-height:48px;padding:12px 18px;border:1px solid transparent;background:transparent;font-family:var(--f-mono);font-size:13px;line-height:1.4;cursor:pointer}
.forecast-tabs button[aria-selected="true"]{background:var(--ink);color:var(--bone-hi);border-color:var(--ink)}
.forecast-tabs button:hover{border-color:var(--ink)}
@media (max-width:640px){
  .forecast-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .forecast-tabs button{padding:10px 4px;font-size:12px}
}

/* Match the legend to each example's chart marks. */
#forecast-panel[data-example="orders"] .history::before,
#forecast-panel[data-example="orders"] .forecast::before{width:14px;height:12px;border:0;background:var(--ink);opacity:.85}
#forecast-panel[data-example="orders"] .forecast::before{background:var(--coral)}
#forecast-panel[data-example="orders"] .range::before{width:14px;height:14px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:linear-gradient(to right,transparent 6px,var(--ink) 6px,var(--ink) 8px,transparent 8px)}
#forecast-panel[data-example="inference"] .history::before{height:12px;background:rgba(34,48,31,.16)}

#forecast-panel[data-example="science"] .history::before{height:12px;border:0;background:radial-gradient(circle at center,var(--blue) 3px,transparent 3px),linear-gradient(transparent 5px,var(--blue) 5px,var(--blue) 7px,transparent 7px)}