/* sky.css — design system for the Laya explainer.
   Subject: a decision engine that reads instantly (sun) versus one that deliberates (cloud).
   The palette is a real sky, and the one bold element is the sun. Everything else stays quiet. */

:root{
  /* sky, zenith -> horizon */
  --zenith:#2E4A7D; --sky-high:#7FA6D9; --sky-mid:#BBD3EC; --sky-low:#E8EFF7; --horizon:#FBF6EE;
  --ink:#16233A; --ink-soft:#41536E; --ink-faint:#7B8AA3;
  --sun:#F2A93B; --sun-core:#FFD27A; --sun-rim:#E08A1E;
  --cloud:#FFFFFF; --cloud-shade:#D8E2EE; --cloud-deep:#A9BACE;
  --rain:#5B6E8C;            /* clouded / uncertain */
  --clear:#3E8E7E;           /* verified  */
  --warn:#C4622D;            /* refuted / caution */
  --rule:#C9D6E6;
  --pad:clamp(1.25rem,4vw,3rem); --measure:68ch;
  --radius:2px;
  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;font-family:var(--f-body);font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.65;color:var(--ink);background:var(--horizon);
  background-image:linear-gradient(180deg,var(--sky-low) 0%,var(--horizon) 42%,var(--horizon) 100%);
  background-repeat:no-repeat;background-size:100% 34rem}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.12;letter-spacing:-.015em;
  margin:0 0 .6em;font-variation-settings:"SOFT" 40,"WONK" 0}
h1{font-size:clamp(2.1rem,1.4rem + 3.4vw,4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.4rem);margin-top:2.4em}
h3{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);margin-top:1.8em}
p,li{max-width:var(--measure)}
a{color:var(--zenith);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--sun-rim)}
code,kbd{font-family:var(--f-mono);font-size:.88em;background:#EAF1F8;
  border:1px solid var(--rule);border-radius:var(--radius);padding:.08em .34em}
strong{font-weight:650}
em{font-style:italic}
.lede{font-size:clamp(1.1rem,1rem + .55vw,1.4rem);color:var(--ink-soft);max-width:60ch;
  font-family:var(--f-display);font-weight:400;line-height:1.5}
.small{font-size:.9rem;color:var(--ink-faint)}
.tag{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}

/* ---------- layout ---------- */
.wrap{max-width:60rem;margin:0 auto;padding:0 var(--pad)}
.wide{max-width:76rem;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(2.5rem,6vw,5rem) 0}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.grid{display:grid;gap:clamp(1rem,3vw,2rem)}
@media(min-width:44rem){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
  .g2-wide{grid-template-columns:1.4fr 1fr}}

/* ---------- the sun: the one bold element ---------- */
.sun{display:block;width:clamp(3.5rem,9vw,6rem);height:auto}
.hero{position:relative;overflow:hidden;padding:clamp(3rem,10vw,7rem) 0 clamp(2rem,6vw,4rem)}
.hero-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero-sun{position:absolute;top:8%;right:6%;z-index:0;width:clamp(6rem,18vw,13rem);
  animation:rise 1.6s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{transform:translateY(2.5rem);opacity:0}to{transform:none;opacity:1}}
.cloudband{position:absolute;left:0;right:0;bottom:-1px;z-index:0;width:100%;height:auto}

/* ---------- panels: cloud-shaped, not the SaaS card kit ---------- */
.panel{background:var(--cloud);border:1px solid var(--rule);border-radius:var(--radius);
  padding:clamp(1.1rem,2.6vw,1.75rem)}
.panel h3:first-child,.panel h4:first-child{margin-top:0}
.note{border-left:3px solid var(--sun);background:#FFFBF3;padding:.9rem 1.1rem;
  border-radius:0 var(--radius) var(--radius) 0}
.note.warn{border-left-color:var(--warn);background:#FFF7F2}
.note.clear{border-left-color:var(--clear);background:#F3FAF8}
.note p:last-child{margin-bottom:0}

/* ---------- data ---------- */
.tablewrap{overflow-x:auto;margin:1.2rem 0}
table{border-collapse:collapse;font-size:.94rem;min-width:min(100%,34rem)}
caption{text-align:left;font-size:.86rem;color:var(--ink-faint);padding-bottom:.5rem}
th,td{border-bottom:1px solid var(--rule);padding:.5rem .7rem;text-align:left}
thead th{border-bottom:2px solid var(--ink);font-weight:650}
tbody tr:hover{background:#F4F8FC}
td.num,th.num{font-family:var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.hi{background:#FFF3D9}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(251,246,238,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav .wide{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding-top:.7rem;padding-bottom:.7rem}
.nav a{font-size:.95rem;text-decoration:none;color:var(--ink-soft)}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]{font-weight:650;box-shadow:inset 0 -2px 0 var(--sun)}
.brand{font-family:var(--f-display);font-weight:600;font-size:1.05rem;margin-right:auto;
  text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.brand svg{width:1.5rem;height:1.5rem;flex:none}

/* ---------- steps: only where content really is a sequence ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:1.5rem 0}
.steps>li{counter-increment:s;position:relative;padding-left:3.1rem;margin-bottom:1.5rem}
.steps>li::before{content:counter(s);position:absolute;left:0;top:.1rem;width:2rem;height:2rem;
  display:grid;place-items:center;border-radius:50%;background:var(--sun-core);
  border:1px solid var(--sun-rim);font-family:var(--f-mono);font-size:.85rem;color:var(--ink)}
.steps>li p:last-child{margin-bottom:0}
.steps h3{margin-top:0}

/* ---------- glossary ---------- */
.gloss dt{font-family:var(--f-display);font-weight:600;font-size:1.12rem;margin-top:1.6rem}
.gloss dd{margin:.35rem 0 0;max-width:var(--measure);color:var(--ink-soft)}
.gloss dd .plain{color:var(--ink)}
.alpha{display:flex;flex-wrap:wrap;gap:.3rem;margin:1rem 0 2rem}
.alpha a{font-family:var(--f-mono);font-size:.85rem;padding:.15rem .45rem;
  border:1px solid var(--rule);border-radius:var(--radius);text-decoration:none;background:var(--cloud)}
.alpha a:hover{background:var(--sun-core)}

/* ---------- figures ---------- */
figure{margin:1.8rem 0}
figure svg{width:100%;height:auto;display:block}
figcaption{font-size:.88rem;color:var(--ink-faint);padding-top:.6rem;max-width:var(--measure)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);margin-top:3rem;padding:2rem 0 3rem;
  font-size:.9rem;color:var(--ink-faint);background:var(--sky-low)}
footer a{color:var(--ink-soft)}

/* ---------- utilities ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--sun-core);padding:.5rem .8rem;z-index:99}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
ul.tight li{margin-bottom:.35rem}
.hr-cloud{display:block;width:100%;height:auto;color:var(--cloud-shade)}