/* classify.ai/learn: the guides, on the homepage's chrome.

   Loads AFTER home.css, which supplies every token, the header, the footer,
   the buttons and the view pill. This sheet adds only the reading column: a
   guide is one measure of prose, so the type steps down from the homepage's
   display scale (the h1 takes the section step, the h2 the card step). */

.learn main{padding:56px 0 110px}
.learn .guide,.learn .hub{max-width:820px}

.crumbs{margin-bottom:28px; font:400 12px/1.4 var(--mono); color:var(--label)}
.crumbs a{color:var(--leaf-link)}

.learn h1{font-size:var(--type-section); line-height:var(--type-section-leading); letter-spacing:var(--type-display-tracking)}
.learn .lede{max-width:none; margin:28px 0 0; font-size:20px; line-height:1.55}
.learn .guide > p,.learn section p{max-width:none; margin-top:18px; font-size:17px; line-height:1.7}

.learn section{margin-top:64px}
/* a link inside prose reads as one: the house link inherits ink, so take
   .textlink's pine and underline at body size (Oct 25 2026) */
.learn section p a{color:var(--pine); border-bottom:1px solid currentColor}
.learn section p a:hover{text-decoration:none; border-bottom-width:2px}
.learn section h2{font-size:var(--type-card); line-height:var(--type-card-leading); letter-spacing:var(--type-card-tracking)}

.learn ul{margin:20px 0 0; padding-left:22px; font-size:17px; line-height:1.7}
.learn li + li{margin-top:6px}

.table-scroll{margin-top:24px; overflow-x:auto}
.learn table{width:100%; min-width:520px; border-collapse:collapse; font-size:15px; line-height:1.5}
.learn th,.learn td{padding:14px 16px 14px 0; border-bottom:1px solid var(--hair); text-align:left; vertical-align:top}
.learn thead th{font:400 12px/1.4 var(--mono); color:var(--label)}
.learn tbody th{font-weight:500}

.learn .next{padding:40px; border-radius:var(--r-card); background:var(--paper)}
.learn .next .actions{margin-top:28px}

/* the hub: one card per published guide */
.guides{list-style:none; margin:48px 0 0; padding:0}
.guides li + li{margin-top:16px}
.guides a{display:block; padding:32px; border-radius:var(--r-card); background:var(--paper)}
.guides a:hover{text-decoration:none; box-shadow:var(--sh-card)}
.guides a:hover h2{text-decoration:underline; text-underline-offset:5px}
.guides h2{font-size:var(--type-card); line-height:var(--type-card-leading); letter-spacing:var(--type-card-tracking)}
.guides p{margin-top:14px; font-size:15px; line-height:1.6; color:var(--muted)}

@media (max-width:760px){
  .learn main{padding:36px 0 90px}
  .learn .lede{font-size:18px}
  .learn section{margin-top:48px}
  .learn .next,.guides a{padding:26px 22px}
}