/* Abertura da landing: texto + exemplo interativo. Cores da página só dos tokens de launch.css. */
.landing-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding-top:20px}
.landing-hero h1{font-size:42px;line-height:1.12;max-width:520px}
.landing-hero .lead{font-size:17px}
.landing-hero .hero-note{margin-top:12px;font-size:12px}
.landing-figure{min-width:0;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 12px}
.landing-tabs{display:flex;gap:6px;margin-bottom:8px}
/* As abas ocupam o lugar desde o início; só aparecem quando o primeiro quadro está pronto (sem pulo). */
.landing-hero:not(.is-ready) .landing-tabs{visibility:hidden}
.landing-tabs button{min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--muted);font-size:13px;font-weight:650}
.landing-tabs button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:white}
/* Espaço da figura reservado antes do JS/JSON (sem pulo de layout). */
.landing-stage{position:relative;aspect-ratio:16/9}
.landing-drawing{display:block;width:100%;height:100%}
.landing-fallback{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:14px;text-align:center;background:var(--paper);border-radius:8px}
/* Duas linhas de conta reservadas em todas as abas (Estrutura fica vazia): trocar de aba não mexe na página. */
.landing-line{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:76px;margin-top:6px;padding:4px 8px;text-align:center;font-size:17px;color:var(--ink);overflow:hidden}
/* A conta inline do KaTeX quebra depois do "=" e dos operadores quando falta largura (celular). */
.landing-line-row{max-width:100%}
.landing-line .focus-strong{border-radius:4px;padding:0 1px;background:#fff3d6;box-shadow:0 0 0 2px #e19a1d}
.landing-caption{min-height:21px;margin-top:2px;font-size:13px;text-align:center}

/* Desenho: as mesmas regras do editor (structcalc.css, :is(#structure-canvas,.report-structure)), copiadas só para o SVG da landing. */
.landing-drawing .structural-element{stroke:#192842;stroke-width:var(--drawing-bar-width);stroke-linecap:round}
.landing-drawing .structural-element.trelica{stroke-width:var(--drawing-truss-width)}
.landing-drawing .structural-node{fill:#152846;stroke:#152846;stroke-width:var(--drawing-node-width)}
.landing-drawing .support-symbol{fill:#fff;stroke:#14233f;stroke-width:var(--drawing-symbol-width);stroke-linejoin:round}
.landing-drawing .hinge{fill:#fff;stroke:#14233f;stroke-width:var(--drawing-symbol-width)}
.landing-drawing :is(.load-arrow,.moment-symbol){fill:none;stroke:#b91c1c;stroke-width:var(--drawing-symbol-width);stroke-linecap:butt}
.landing-drawing :is(.load-arrow.distributed,.load-distribution-top){fill:none;stroke:#005be8;stroke-width:var(--drawing-symbol-width)}
.landing-drawing .load-head{fill:#b91c1c;stroke:none}
.landing-drawing .load-head.distributed{fill:#005be8}
.landing-drawing text{font-family:var(--drawing-font-family)!important;font-size:var(--drawing-load-font)!important;font-weight:var(--drawing-font-weight)!important;paint-order:stroke;stroke:#fff;stroke-width:var(--drawing-text-halo);stroke-linejoin:round}
.landing-drawing .node-label{fill:#14233f!important;font-size:var(--drawing-node-font)!important}
.landing-drawing .load-label{fill:#b91c1c!important}
.landing-drawing .load-label.distributed{fill:#005be8!important}
.landing-drawing .dimension-label{fill:#46566e!important;font-size:var(--drawing-dimension-font)!important}
.landing-drawing :is(.dimension-stroke,.dimension-tick){fill:none;stroke:#46566e;stroke-width:var(--drawing-line-width)}
.landing-drawing :is(.label-leader,.application-leader){stroke:#68778c;stroke-width:var(--drawing-line-width)}
.landing-drawing .reaction-label{fill:#15803d!important}
.landing-drawing .result-label-leader{opacity:.55}
.landing-drawing :is(.reaction-force,.reaction-moment){vector-effect:non-scaling-stroke}
/* Vistas de resultado, como no editor: cotas e chamadas somem, cargas ficam atenuadas, apoios a meia opacidade. */
.landing-drawing:not([data-view-mode="geometry"]) :is([data-dimensions],.label-leader){display:none}
.landing-drawing[data-load-visibility="attenuated"] :is(.load-arrow,.moment-symbol,.load-distribution-top){opacity:.25}
.landing-drawing[data-load-visibility="attenuated"] .load-label{visibility:hidden}
.landing-drawing.reaction-view [data-drawing-role^="support"]{opacity:.5}
/* Foco, como na Resolução (resolution.css): o resto cai para 25%, o forte fica laranja. */
.landing-drawing.has-focus :is([data-node-id]:not([data-reaction-node]),[data-element-id],[data-load-id],[data-support-node],[data-reaction-node]):not(.focus-strong),
.landing-drawing.has-focus [data-drawing] :is(.node-label,.hinge,.label-leader,.application-leader):not(.focus-strong){opacity:.25;transition:opacity .15s}
.landing-drawing [data-drawing] .focus-strong:not(text){filter:none;stroke:#e19a1d}
.landing-drawing [data-drawing] :is(.structural-node,.load-head,.reaction-head,.result-point).focus-strong{fill:#e19a1d}
.landing-drawing [data-drawing] .result-point.focus-strong{r:6px;stroke:white;stroke-width:2px}
.landing-drawing [data-drawing] text.focus-strong{fill:#a35f00!important;font-weight:700!important;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}

@media(max-width:1198px){.landing-hero{gap:30px}}
@media(max-width:980px){.landing-tabs button{min-height:44px}}
@media(max-width:800px){.landing-hero{grid-template-columns:minmax(0,1fr);gap:24px}.landing-hero h1{font-size:36px;max-width:620px}}
/* Celular: a figura vem antes do título, compacta; título de 28 px e abas de 44 px. */
@media(max-width:600px){
  .landing-hero{gap:16px;padding-top:0}
  .landing-figure{order:-1;padding:10px 10px 8px}
  .landing-stage{aspect-ratio:4/3}
  .landing-tabs button{flex:1;min-height:44px;padding:6px 8px}
  .landing-hero h1{font-size:28px;letter-spacing:-.6px}
  .landing-hero .lead{font-size:15px;margin:12px 0 18px}
  .landing-hero .actions{display:grid;grid-template-columns:1fr}
  .landing-line{font-size:13px;min-height:84px;margin-top:4px;padding:2px 0}
  .landing-caption{font-size:12px;min-height:40px}
}

/* Resto da landing, /daily e /universidades: as figuras fixas usam o mesmo desenho (.landing-drawing). */
.landing-section{margin-top:64px}
.landing-section>h2{margin-bottom:20px}
.landing-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.landing-card{min-width:0;display:flex;flex-direction:column;gap:8px;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 18px}
.landing-card h3{margin-top:6px}
.landing-card p{font-size:13px}
.landing-thumb{aspect-ratio:4/3;background:var(--paper);border-radius:8px}
[data-figure-card].is-ready :is(.landing-thumb,.landing-diagrams>div){background:none}
/* Conta da miniatura: menor que a do hero e sem altura reservada de duas linhas. */
.landing-card-line{min-height:0;margin-top:0;padding:0;font-size:12px}
.landing-diagrams{display:grid;gap:4px}
.landing-diagrams>div{position:relative;aspect-ratio:3/1;background:var(--paper);border-radius:6px}
.landing-diagrams>div>span{position:absolute;left:4px;top:2px;font-size:12px;font-weight:700;color:var(--muted)}
.landing-diagrams .landing-drawing,.landing-thumb .landing-drawing,.daily-figure .landing-drawing,.auth-figure .landing-drawing{height:100%}

.daily-invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;margin-top:64px;padding:32px;background:var(--navy);border-radius:var(--radius);color:white}
.daily-invite h1,.daily-invite h2{color:white;margin:14px 0 20px}
.daily-invite .tag{background:var(--blue);color:white}
.daily-figure{aspect-ratio:16/9;background:white;border-radius:8px;padding:8px}
.daily-steps{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.daily-steps li{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:650;color:white}
.daily-steps svg{width:40px;height:40px;fill:none;stroke:#d6deeb;stroke-width:2;stroke-linecap:round}
.daily-steps svg .accent{stroke:var(--blue);stroke-width:2.5}
.daily-steps svg circle{fill:var(--blue);stroke:none}
.daily-meta{color:#d6deeb;font-size:13px}
.daily-page .daily-invite{margin-top:0}
.daily-rules{list-style:none;padding:0;margin:28px 0 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.daily-rules li{padding:14px 16px;background:white;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;font-weight:650}
.daily-rules li::before{content:"✓";color:var(--green);margin-right:8px}
.daily-actions{justify-content:center;margin-top:20px}

.landing-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line)}
.landing-proof h2{margin:10px 0 8px}
.landing-proof .small{grid-column:1/-1}
.universities-notice{margin-top:28px}
.universities-why,.universities-quote{margin-top:40px}
.universities-why h2,.universities-quote h2{font-size:24px;margin-bottom:14px}
.universities-why ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.universities-why li{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;font-size:14px;color:var(--muted)}
.universities-why li strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.universities-quote{background:var(--navy);color:white;border-radius:var(--radius);padding:24px 28px}
.universities-quote h2{color:white}
.universities-quote ol{margin:0 0 20px;padding-left:20px;display:grid;gap:8px;font-size:15px}
@media(max-width:700px){.universities-why ul{grid-template-columns:1fr}.universities-quote{padding:20px}}
.example-figure{display:grid;gap:10px;align-content:start}
.example-figure .tag{justify-self:start}
.auth-figure{max-width:420px;aspect-ratio:16/9;border:1px solid var(--line);background:#fff;border-radius:9px;margin:26px 0;padding:6px}

@media(max-width:800px){
  .landing-cards,.landing-proof,.daily-rules{grid-template-columns:minmax(0,1fr)}
  .daily-invite{grid-template-columns:minmax(0,1fr);padding:24px}
  .auth-figure{display:none}
}
@media(max-width:600px){
  .landing-section,.daily-invite,.landing-proof{margin-top:40px}
  .daily-invite{padding:20px 16px}
  .daily-steps{gap:8px}
  .daily-steps li{font-size:12px}
  .daily-invite .btn,.daily-actions .btn{width:100%}
}