/* ============================================================================
   Guardian Robotics — Learning Center
   Editorial reading layout: generous measure, real typographic hierarchy,
   sticky sidebar, and answer-first blocks that AI crawlers can lift cleanly.
   ========================================================================= */

/* ---------------------------------------------------------------- hero/head */
.l-hero{
  background-color:var(--bg2);
  background-image:
    radial-gradient(rgba(22,104,184,.10) 1px,transparent 1.2px),
    radial-gradient(780px 360px at 12% -120px,rgba(46,144,222,.15),transparent 70%),
    radial-gradient(520px 300px at 92% -60px,rgba(108,99,216,.09),transparent 72%);
  background-size:30px 30px,auto,auto;
  border-bottom:1px solid var(--border);
  padding:calc(74px + 46px) 0 42px
}
.l-hero .container{max-width:1180px}
.l-hero h1{
  font-family:var(--grotesk);font-weight:700;letter-spacing:-.04em;line-height:1.06;
  font-size:clamp(1.95rem,4.2vw,3.15rem);max-width:22ch;margin-bottom:1.1rem
}
.l-hero-main h1,.l-hero-hub h1{max-width:26ch}
.l-hero-main{padding:calc(74px + 62px) 0 58px}
.l-hub-blurb{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--text2);line-height:1.75;max-width:62ch}
.l-eyebrow{
  display:inline-block;font-family:var(--grotesk);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--blue-mid)
}

/* breadcrumb */
.l-crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.79rem;color:var(--text3);margin-bottom:1.3rem}
.l-crumb a{color:var(--text3);transition:color .15s}
.l-crumb a:hover{color:var(--blue)}
.l-crumb span{opacity:.45}

/* answer-first block — the passage search engines and LLMs quote */
.l-answer{
  background:#fff;border:1px solid var(--border2);border-left:3px solid var(--blue);
  border-radius:12px;padding:1.25rem 1.5rem;margin:0 0 1.4rem;max-width:74ch;
  box-shadow:0 2px 6px rgba(10,47,82,.05),0 8px 24px rgba(10,47,82,.06)
}
.l-answer-lbl{
  display:block;font-family:var(--grotesk);font-size:.64rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:.5rem
}
.l-answer p{font-size:1.01rem;line-height:1.72;color:var(--text)}

.l-meta{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.5rem}
.l-meta span{
  font-family:var(--mono);font-size:.74rem;color:var(--text3);
  display:inline-flex;align-items:center;gap:.5rem
}
.l-meta span+span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--border3);margin-right:.4rem}

/* ------------------------------------------------------------ article shell */
.l-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:4rem;padding:3.5rem 2rem 4.5rem;align-items:start}

.l-body{max-width:none;min-width:0}
.l-body h2{
  font-family:var(--grotesk);font-size:clamp(1.4rem,2.5vw,1.85rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.18;margin:3rem 0 1rem;scroll-margin-top:100px
}
.l-body h2:first-of-type{margin-top:0}
.l-body h3{
  font-family:var(--grotesk);font-size:clamp(1.08rem,1.8vw,1.26rem);font-weight:600;
  letter-spacing:-.018em;line-height:1.3;margin:2.1rem 0 .7rem;scroll-margin-top:100px
}
.l-body p{font-size:1.045rem;line-height:1.82;color:var(--text2);margin-bottom:1.15rem;max-width:72ch}
.l-body p strong{color:var(--text);font-weight:600}
.l-body a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--blue-mid);text-underline-offset:2px;transition:text-decoration-color .15s}
.l-body a:hover{text-decoration-color:var(--blue)}
.l-body code{
  font-family:var(--mono);font-size:.86em;background:var(--bg3);
  border:1px solid var(--border);border-radius:5px;padding:.12em .42em;color:var(--blue-dark)
}

.l-ul,.l-ol{margin:0 0 1.4rem 0;padding-left:0;list-style:none;max-width:72ch}
.l-ul li,.l-ol li{position:relative;padding-left:1.7rem;margin-bottom:.62rem;font-size:1.02rem;line-height:1.75;color:var(--text2)}
.l-ul li::before{
  content:'';position:absolute;left:.35rem;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--blue);opacity:.65
}
.l-ol{counter-reset:lol}
.l-ol li{counter-increment:lol;padding-left:2.1rem}
.l-ol li::before{
  content:counter(lol);position:absolute;left:0;top:.08em;
  font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--blue);
  background:var(--blue-light);border:1px solid var(--border2);border-radius:5px;
  width:1.45rem;height:1.45rem;display:flex;align-items:center;justify-content:center
}
.l-ul li strong,.l-ol li strong{color:var(--text);font-weight:600}

.l-note{
  margin:1.9rem 0;padding:1.2rem 1.5rem;max-width:72ch;
  background:linear-gradient(135deg,var(--blue-light),#fff 70%);
  border:1px solid var(--border2);border-left:3px solid var(--blue);border-radius:12px;
  font-size:1rem;line-height:1.75;color:var(--text2)
}
.l-note strong{color:var(--blue-deep)}

.l-rule{border:none;border-top:1px solid var(--border);margin:2.8rem 0;max-width:72ch}

/* tables */
.tbl-wrap{overflow-x:auto;margin:1.9rem 0;max-width:72ch;border-radius:12px;border:1px solid var(--border);box-shadow:0 2px 8px rgba(10,47,82,.05)}
.l-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.l-table th{
  text-align:left;font-family:var(--grotesk);font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text3);
  padding:.85rem 1.1rem;background:var(--bg3);border-bottom:1px solid var(--border2);white-space:nowrap
}
.l-table td{padding:.85rem 1.1rem;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:top}
.l-table tr:last-child td{border-bottom:none}
.l-table tr:hover td{background:var(--bg2)}
.l-table td strong{color:var(--text)}

/* FAQ headings read as questions */
.l-body h3.faq-q{
  font-size:1.08rem;padding-left:1.6rem;position:relative;color:var(--text)
}
.l-body h3.faq-q::before{
  content:'?';position:absolute;left:0;top:.05em;font-family:var(--mono);font-size:.9rem;
  color:var(--blue);font-weight:500
}

/* ------------------------------------------------------------ table of contents */
.l-toc{
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:1.3rem 1.5rem;margin-bottom:2.6rem
}
.l-toc-lbl{
  display:block;font-family:var(--grotesk);font-size:.64rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text3);margin-bottom:.85rem
}
.l-toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:.1rem}
.l-toc li{counter-increment:toc}
.l-toc a{
  display:flex;gap:.7rem;font-size:.9rem;color:var(--text2);padding:.32rem 0;
  transition:color .15s,transform .15s
}
.l-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;color:var(--blue);opacity:.6;flex-shrink:0;padding-top:.15em}
.l-toc a:hover{color:var(--blue);transform:translateX(2px)}

/* -------------------------------------------------------------------- sidebar */
.l-side{position:sticky;top:98px;display:flex;flex-direction:column;gap:1.1rem}
.l-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.5rem;
  box-shadow:0 1px 3px rgba(10,47,82,.06),0 2px 8px rgba(10,47,82,.05),inset 0 1px 0 #fff
}
.l-card h3{font-family:var(--grotesk);font-size:.95rem;font-weight:700;letter-spacing:-.015em;margin-bottom:.7rem}
.l-card p{font-size:.87rem;color:var(--text2);line-height:1.68;margin-bottom:1.2rem}
.l-card-cta{
  background:linear-gradient(160deg,var(--blue-light),#fff 65%);
  border-color:var(--border2);
  box-shadow:0 4px 12px rgba(10,47,82,.07),0 18px 44px rgba(10,47,82,.1),inset 0 1px 0 #fff
}
.l-rel{list-style:none;display:flex;flex-direction:column}
.l-rel li{border-bottom:1px solid var(--border)}
.l-rel li:last-child{border-bottom:none}
.l-rel a{display:block;font-size:.88rem;color:var(--text);line-height:1.5;padding:.72rem 0 .2rem;transition:color .15s}
.l-rel a:hover{color:var(--blue)}
.l-rel span{display:block;font-family:var(--mono);font-size:.7rem;color:var(--text3);padding-bottom:.72rem}
.l-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.l-tags a{
  font-size:.77rem;color:var(--text2);background:var(--bg2);border:1px solid var(--border);
  border-radius:100px;padding:5px 12px;transition:all .18s
}
.l-tags a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.l-tags a.on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ------------------------------------------------------------------ hub grids */
.l-hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.3rem;padding:3.5rem 0 1rem}
.l-hub{
  display:block;background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:1.8rem 1.8rem 1.5rem;
  box-shadow:0 1px 3px rgba(10,47,82,.06),0 2px 8px rgba(10,47,82,.05),inset 0 1px 0 #fff;
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1),border-color .25s
}
.l-hub:hover{transform:translateY(-5px);border-color:var(--border2);box-shadow:0 4px 12px rgba(10,47,82,.07),0 18px 48px rgba(10,47,82,.11),inset 0 1px 0 #fff}
.l-hub-eyebrow{
  display:block;font-family:var(--grotesk);font-size:.63rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:.8rem
}
.l-hub h2{font-family:var(--grotesk);font-size:1.22rem;font-weight:700;letter-spacing:-.022em;line-height:1.25;margin-bottom:.65rem}
.l-hub p{font-size:.9rem;color:var(--text2);line-height:1.7;margin-bottom:1.2rem}
.l-hub-count{font-family:var(--mono);font-size:.75rem;color:var(--text3);display:inline-flex;align-items:center;gap:.5rem}
.l-hub-count em{font-style:normal;color:var(--blue);transition:transform .22s}
.l-hub:hover .l-hub-count em{transform:translateX(4px)}

.l-allttl{
  font-family:var(--grotesk);font-size:clamp(1.4rem,2.6vw,1.95rem);font-weight:700;
  letter-spacing:-.03em;margin:4rem 0 1.8rem;padding-top:3rem;border-top:1px solid var(--border)
}

.l-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem;padding-bottom:3rem}
.l-tile{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:1.5rem 1.6rem 1.3rem;
  box-shadow:0 1px 3px rgba(10,47,82,.06),inset 0 1px 0 #fff;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .25s
}
.l-tile:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:0 4px 12px rgba(10,47,82,.07),0 16px 40px rgba(10,47,82,.1),inset 0 1px 0 #fff}
.l-tile-cluster{font-family:var(--grotesk);font-size:.61rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:.75rem}
.l-tile h2{font-family:var(--grotesk);font-size:1.06rem;font-weight:600;letter-spacing:-.018em;line-height:1.32;margin-bottom:.6rem}
.l-tile p{font-size:.87rem;color:var(--text2);line-height:1.65;margin-bottom:1.1rem;flex:1}
.l-tile-foot{font-family:var(--mono);font-size:.72rem;color:var(--text3);display:inline-flex;align-items:center;gap:.5rem}
.l-tile-foot em{font-style:normal;color:var(--blue);transition:transform .22s}
.l-tile:hover .l-tile-foot em{transform:translateX(4px)}

.l-otherhubs{padding:2.5rem 0 3.5rem;border-top:1px solid var(--border)}
.l-otherhubs .l-tags{margin-top:.9rem}

/* -------------------------------------------------------------------- end cta */
.l-endcta{
  background:linear-gradient(165deg,var(--blue-deep),#06192E);
  padding:clamp(60px,7vw,92px) 0;text-align:center;position:relative;overflow:hidden
}
.l-endcta::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(125,211,252,.1) 1px,transparent 1.2px);
  background-size:30px 30px;
  mask-image:radial-gradient(640px 320px at 50% 30%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(640px 320px at 50% 30%,#000,transparent 72%)
}
.l-endcta .container{position:relative;z-index:2}
.l-endcta h2{
  font-family:var(--grotesk);font-size:clamp(1.55rem,3.2vw,2.35rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.12;color:#fff;margin-bottom:1rem;max-width:22ch;
  margin-left:auto;margin-right:auto
}
.l-endcta p{font-size:1rem;color:rgba(255,255,255,.62);line-height:1.75;max-width:60ch;margin:0 auto 2rem}
.l-endcta-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.l-endcta .btn-g{background:rgba(255,255,255,.06);color:#BFDBF4;border-color:rgba(255,255,255,.2)}
.l-endcta .btn-g:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34)}

/* ------------------------------------------------------------------ responsive */
@media(max-width:1040px){
  .l-wrap{grid-template-columns:1fr;gap:2.5rem;padding:2.5rem 2rem 3.5rem}
  .l-side{position:static;flex-direction:row;flex-wrap:wrap}
  .l-side .l-card{flex:1;min-width:270px}
}
@media(max-width:900px){
  .l-hero{padding:calc(66px + 34px) 0 34px}
  .l-hero-main{padding:calc(66px + 44px) 0 44px}
}
@media(max-width:640px){
  .l-wrap{padding:2rem 1.25rem 3rem}
  .l-hero .container,.l-endcta .container{padding:0 1.25rem}
  .l-body p,.l-ul li,.l-ol li{font-size:1rem}
  .l-side{flex-direction:column}
  .l-side .l-card{min-width:0}
  .l-meta{gap:.5rem 1rem}
  .l-meta span+span::before{display:none}
}

@media print{
  .l-side,.l-endcta,.l-toc,.l-crumb{display:none}
  .l-wrap{grid-template-columns:1fr;padding:0}
  .l-hero{background:#fff;padding:1rem 0}
  .l-body p{color:#000;max-width:none}
}

/* Small viewports: auto-fit minmax() floors (310px / 290px) exceed the
   available width below ~360px and push the document wider than the screen.
   These live here rather than in guardian.css because learn.css loads later
   and would otherwise win the cascade. */
@media(max-width:520px){
  .l-hubs,.l-grid{grid-template-columns:1fr}
  .l-hub,.l-tile{min-width:0}
}