/* SALA — Platform page styles */

/* Page hero */
.phero{ padding:72px 0 60px; background:
  radial-gradient(900px 420px at 50% -10%, var(--blue-tint) 0%, rgba(233,240,255,0) 62%); text-align:center; }
.phero .h1{ max-width:18ch; margin:18px auto 0; }
.phero .lead{ max-width:56ch; margin:18px auto 0; }

/* Data flow chips */
.flow{ display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:wrap; margin-top:48px; }
.flow-node{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; min-width:150px; box-shadow:var(--shadow-sm); text-align:left; }
.flow-node .fn-l{ font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:.05em; }
.flow-node .fn-t{ font-weight:600; font-size:15.5px; margin-top:6px; }
.flow-node .fn-d{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.flow-arrow{ display:flex; align-items:center; padding:0 14px; color:var(--blue); font-size:20px; }
@media(max-width:760px){ .flow-arrow{ transform:rotate(90deg); padding:8px 0; } .flow{ flex-direction:column; align-items:center; } }

/* Module deep rows */
.mrow{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:64px 0; border-top:1px solid var(--line); }
.mrow:nth-child(even) .mrow-media{ order:-1; }
.mrow-copy .mnum{ font-family:var(--mono); font-size:13px; color:var(--blue); letter-spacing:.04em; }
.mrow-copy .h3{ margin:12px 0 14px; font-size:26px; }
.mrow-copy p{ color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 18px; }
.mtags{ display:flex; flex-wrap:wrap; gap:8px; }
.mtag{ font-size:13px; font-weight:500; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:6px 13px; }
.mrow-media{ }
.mvis{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; min-height:260px; }
.mvis .mvis-bar{ height:40px; display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid var(--line-2); }
.mvis .mvis-bar .d{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.mvis .mvis-bar .ti{ font-size:12.5px; font-weight:600; color:var(--ink-2); margin-left:6px; }
.mvis-body{ padding:18px; }

/* generic list rows inside mocks */
.lrow{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.lrow:last-child{ border-bottom:0; }
.lrow .ldot{ width:9px; height:9px; border-radius:50%; flex:none; }
.lrow .lt{ font-size:13.5px; font-weight:500; flex:1; }
.lrow .ls{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.lrow .lbadge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }

/* schedule grid mock */
.sched{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.sched .cell{ height:34px; border-radius:7px; background:var(--bg-soft); border:1px solid var(--line-2); }
.sched .cell.b{ background:var(--blue-tint); border-color:var(--blue-tint-2); }
.sched .cell.b2{ background:var(--blue); }

/* calendar/event mock */
.evt{ display:flex; flex-direction:column; gap:10px; }
.evt .ev{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; }
.evt .ev .date{ width:42px; height:42px; border-radius:10px; background:var(--blue-tint); color:var(--blue-700); display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; }
.evt .ev .date .dd{ font-size:16px; font-weight:700; line-height:1; }
.evt .ev .date .mm{ font-family:var(--mono); font-size:9px; text-transform:uppercase; }
.evt .ev .ei .et{ font-size:13.5px; font-weight:600; }
.evt .ev .ei .es{ font-size:12px; color:var(--muted); }

/* learning mock */
.lp{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.lp .lc{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.lp .lc .th{ height:54px; background:repeating-linear-gradient(135deg,#eef2fb 0 10px,#e3ebf8 10px 20px); }
.lp .lc .lcb{ padding:10px; }
.lp .lc .lct{ font-size:12.5px; font-weight:600; }
.lp .lc .lcp{ height:5px; border-radius:3px; background:var(--line); margin-top:8px; overflow:hidden; }
.lp .lc .lcp i{ display:block; height:100%; background:var(--blue); }

/* CTA reuse from home.css (.final-cta, .cta-box) */
@media(max-width:860px){
  .mrow{ grid-template-columns:1fr; gap:30px; padding:48px 0; }
  .mrow:nth-child(even) .mrow-media{ order:0; }
}