/* /learn: the long reads. Loaded after styles.css, only on these pages. The look follows Apple's Newsroom
   (a quiet eyebrow, one big headline, a wide hero band, a narrow reading column, tiles on the index) in the
   site's own tokens, type and widths. Light only, like the rest of the site. */

.learn{padding:40px 0 var(--sec)}
.learn .wrap{max-width:980px}
.learn .reading{max-width:680px;margin:0 auto}

/* Breadcrumb */
.learn .crumbs{display:flex;flex-wrap:wrap;gap:0 6px;margin:0 0 28px;font-size:14px;color:var(--mu)}
.learn .crumbs a{color:var(--mu)}
.learn .crumbs a:hover{color:var(--tx);text-decoration:underline}

/* Article head */
.ahead{text-align:center;margin:0 auto 40px;max-width:820px}
.eyebrow{display:flex;justify-content:center;flex-wrap:wrap;gap:0 10px;margin:0 0 18px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--mu)}
.eyebrow .cat{color:var(--accent,var(--tx))}
.eyebrow time{font-weight:400}
.ahead h1{font-size:clamp(36px,5vw,56px);line-height:1.07;letter-spacing:-.02em;text-wrap:balance}
.ahead .lede{margin:20px auto 0;max-width:34em;font-size:21px;line-height:1.38;color:var(--mu);text-wrap:balance}
.ahead .meta{margin:22px 0 0;font-size:14px;color:var(--mu)}
@media(max-width:734px){.ahead .lede,.lhub-head .lede{font-size:19px}.ahead{margin-bottom:32px}}

/* Hero band: the article's key visual. A soft wash in the article's own accent, bre at the right. */
.ahero{position:relative;overflow:hidden;border-radius:28px;background:var(--soft);aspect-ratio:21/9;margin:0 0 56px;
  display:flex;align-items:center;isolation:isolate}
.ahero::before{content:"";position:absolute;inset:-20%;z-index:0;
  background:
    radial-gradient(42% 60% at 78% 50%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),
    radial-gradient(50% 70% at 18% 80%,color-mix(in srgb,var(--accent2,var(--b)) 22%,transparent),transparent 70%),
    linear-gradient(180deg,#fff,var(--soft))}
.ahero .claim{position:relative;z-index:1;padding:0 clamp(28px,6%,72px);width:min(56%,560px);font-size:clamp(22px,3vw,34px);line-height:1.18;letter-spacing:-.016em;font-weight:600;color:var(--tx);text-wrap:balance}
.ahero img{position:absolute;right:4%;bottom:-4%;z-index:1;height:112%;width:auto;max-width:none;filter:drop-shadow(0 24px 40px rgba(29,29,31,.14))}
@media(max-width:734px){
  .ahero{aspect-ratio:auto;min-height:300px;border-radius:22px;align-items:flex-start;margin-bottom:40px}
  .ahero .claim{width:100%;padding:28px 24px 0;font-size:22px}
  .ahero img{height:58%;right:-6%;bottom:-3%}
}

/* Body copy: the reading column */
.learn .reading p,.learn .reading li{font-size:19px;line-height:1.5;color:var(--tx)}
.learn .reading p{margin:0 0 22px}
.learn .reading h2{font-size:28px;line-height:1.14;letter-spacing:-.016em;margin:52px 0 16px;text-wrap:balance}
.learn .reading h3{font-size:21px;line-height:1.19;margin:32px 0 10px}
.learn .reading ul,.learn .reading ol{margin:0 0 22px;padding-left:24px}
.learn .reading li{margin:0 0 10px}
.learn .reading li::marker{color:var(--mu)}
.learn .reading a:not(.btn){color:var(--tx);text-decoration:underline;text-decoration-color:rgba(29,29,31,.35);text-underline-offset:3px}
.learn .reading a:not(.btn):hover{text-decoration-color:currentColor}
.learn .reading strong{font-weight:600}

/* A pulled line, the way Newsroom lifts a quote: large, left bar in the accent */
.pull{margin:36px 0;padding:6px 0 6px 24px;border-left:3px solid var(--accent,var(--p));font-size:24px;line-height:1.3;letter-spacing:-.012em;font-weight:600;color:var(--tx);text-wrap:balance}
.pull p{font-size:inherit!important;line-height:inherit!important;margin:0!important}

/* A box of steps or a worked example */
.box{margin:32px 0;padding:24px 28px;border-radius:22px;background:var(--soft)}
.box h3{margin:0 0 10px;font-size:17px;line-height:1.3}
.box p,.box li{font-size:17px!important;line-height:1.47!important}
.box p:last-child,.box ol:last-child,.box ul:last-child{margin-bottom:0}
.box ol,.box ul{margin:0 0 12px;padding-left:22px}
.box li{margin:0 0 6px}

/* Side-by-side: two short columns, used for "before / with bre" or "fits / doesn't fit" */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0}
.pair>div{padding:22px 24px;border-radius:22px;border:1px solid var(--bd)}
.pair h3{margin:0 0 8px!important;font-size:17px!important}
.pair p,.pair li{font-size:16px!important;line-height:1.45!important;color:var(--mu)!important}
.pair p:last-child,.pair ul:last-child{margin-bottom:0}
.pair ul{padding-left:20px;margin:0 0 10px}
@media(max-width:600px){.pair{grid-template-columns:1fr}}

/* The one call to action */
.learn-cta{margin:56px 0 0;padding:40px 32px 44px;border-radius:28px;background:var(--soft);text-align:center;position:relative;overflow:hidden}
.learn-cta::before{content:"";position:absolute;inset:-30% -10%;z-index:0;background:radial-gradient(40% 55% at 50% 100%,color-mix(in srgb,var(--accent,var(--p)) 20%,transparent),transparent 70%)}
.learn-cta>*{position:relative;z-index:1}
.learn-cta h2{margin:0 0 10px!important;font-size:32px!important;letter-spacing:-.018em}
.learn-cta p{margin:0 auto 24px!important;max-width:44em;font-size:17px!important;line-height:1.47!important;color:var(--mu)!important}
.learn-cta .btn{margin:0}
.learn-cta .joinform{margin:0 auto}
.learn-cta .hint{margin:14px 0 0!important;max-width:none!important;font-size:12px!important;line-height:1.33!important}
.learn-cta .joined p{margin:10px auto 0!important;font-size:17px!important}
.learn-cta .share-lead{margin:0 0 12px!important;max-width:none!important;font-size:14px!important;line-height:1.43!important}
.learn-cta .tiny{margin:18px 0 0!important;font-size:13px!important;color:var(--mu)!important}

/* Questions people ask */
.learn .faq{margin:0;border-top:1px solid var(--bd)}
.learn .faq .qa{padding:18px 0;border-bottom:1px solid var(--bd)}
.learn .faq dt{font-weight:600;font-size:19px;line-height:1.3;margin:0 0 8px}
.learn .faq dd{margin:0;font-size:17px;line-height:1.47;color:var(--mu)}

/* The standing line at the end */
.learn .fine{margin:40px 0 0;font-size:14px;line-height:1.43;color:var(--mu)}
.learn .fine a{color:var(--mu)}

/* More from Learn: tiles, as on the index */
.more{margin:64px 0 0}
.more h2{font-size:24px;margin:0 0 20px;letter-spacing:-.016em}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none}
.tiles li{margin:0}
.tile-a{display:flex;flex-direction:column;gap:10px;height:100%;padding:24px 24px 26px;border-radius:22px;background:var(--soft);color:var(--tx);transition:transform .3s var(--ease),background .3s var(--ease)}
.tile-a:hover{background:#ebebef;transform:translateY(-2px)}
.tile-a .k2{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--accent,var(--mu))}
.tile-a h3{font-size:19px;line-height:1.24;letter-spacing:-.012em;margin:0}
.tile-a p{margin:0;font-size:15px;line-height:1.45;color:var(--mu)}
.tile-a .when{margin-top:auto;padding-top:6px;font-size:13px;color:var(--mu)}
@media(max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}
.more .also{margin:20px 0 0;font-size:15px;color:var(--mu)}
.more .also a{color:var(--tx);text-decoration:underline}

/* ----- The index ----- */
.lhub .wrap{max-width:1100px}
.lhub-head{text-align:center;max-width:760px;margin:0 auto 48px}
.lhub-head h1{font-size:clamp(40px,5.6vw,64px);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.lhub-head .lede{margin:20px auto 0;max-width:30em;font-size:21px;line-height:1.38;color:var(--mu);text-wrap:balance}
.lhub-head .note{margin:16px auto 0;font-size:14px;color:var(--mu)}

/* The featured story: a wide tile with the hero wash and bre */
.feature{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:380px;border-radius:28px;overflow:hidden;background:var(--soft);position:relative;isolation:isolate;color:var(--tx);margin:0 0 16px}
.feature::before{content:"";position:absolute;inset:-20%;z-index:0;
  background:radial-gradient(40% 60% at 80% 50%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),linear-gradient(180deg,#fff,var(--soft))}
.feature .ftext{position:relative;z-index:1;padding:clamp(28px,5%,56px)}
.feature .k2{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.feature h2{margin:12px 0 14px;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.02em}
.feature p{margin:0;font-size:17px;line-height:1.47;color:var(--mu);max-width:36em}
.feature .when{display:block;margin:18px 0 0;font-size:13px;color:var(--mu)}
.feature .fart{position:relative;z-index:1;align-self:stretch;overflow:hidden}
.feature .fart img{position:absolute;right:8%;bottom:0;height:96%;width:auto;max-width:none;filter:drop-shadow(0 24px 40px rgba(29,29,31,.14))}
.feature:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:734px){
  .feature{grid-template-columns:1fr;min-height:0;border-radius:22px}
  .feature .fart{height:220px;order:-1}
  .feature .fart img{right:50%;transform:translateX(50%);height:120%;bottom:-10%}
}

.lhub .tiles{grid-template-columns:repeat(4,1fr);margin:0 0 16px}
.lhub .tile-a{min-height:250px;padding:26px 24px 26px}
.lhub .tile-a h3{font-size:20px}
@media(max-width:1000px){.lhub .tiles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.lhub .tiles{grid-template-columns:1fr}.lhub .tile-a{min-height:0}}

/* The topics tile: the one spot of ink on the page */
.tile-a.dark{background:var(--ink);color:#fff}
.tile-a.dark:hover{background:#000}
.tile-a.dark .k2{color:var(--y)}
.tile-a.dark p{color:rgba(255,255,255,.72)}
.tile-a.dark .when{color:#fff;font-weight:600}

.lhub .learn-cta{margin-top:48px}

/* ----- Pages from the SEO engine (scripts/seo): a comparison table, the episode outline and sample exchange, sources ----- */
.ctable-wrap{margin:32px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctable{width:100%;min-width:520px;border-collapse:collapse;font-size:16px;line-height:1.4}
.ctable caption{caption-side:top;text-align:left;font-size:14px;color:var(--mu);margin:0 0 10px}
.ctable th,.ctable td{padding:12px 14px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
.ctable thead th{font-size:14px;font-weight:600;color:var(--mu);border-bottom:2px solid var(--bd)}
.ctable tbody th{font-weight:600;color:var(--tx)}
.learn .reading .note{font-size:15px;line-height:1.45;color:var(--mu);margin:0 0 18px}
.learn .reading .chapters{margin:0 0 28px;padding:0;list-style:none;counter-reset:ch;border-top:1px solid var(--bd)}
.learn .reading .chapters li{display:grid;grid-template-columns:36px 1fr;gap:4px 10px;padding:14px 0;border-bottom:1px solid var(--bd);margin:0;font-size:17px}
.learn .reading .chapters li::before{counter-increment:ch;content:counter(ch);grid-row:1/3;font-weight:600;color:var(--mu);font-size:14px;line-height:1.6}
.learn .reading .chapters li span{color:var(--mu);font-size:15px;line-height:1.47}
.learn .reading .exchange{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.learn .reading .exchange li{margin:0;max-width:92%;padding:14px 18px;border-radius:22px;background:var(--soft);font-size:17px;line-height:1.47}
.learn .reading .exchange li.is-bre{align-self:flex-start;border-bottom-left-radius:8px}
.learn .reading .exchange li.is-guest{align-self:flex-end;border-bottom-right-radius:8px;background:#fff;border:1px solid var(--bd)}
.learn .reading .exchange .who{display:flex;align-items:baseline;gap:8px;font-weight:600;font-size:14px;margin-bottom:4px}
.learn .reading .exchange .who small{font-weight:400;font-size:12px;color:var(--mu);letter-spacing:.02em;text-transform:uppercase}
.learn .reading .exchange li p{margin:0;font-size:17px}
.learn .reading .also-topics{font-size:15px;color:var(--mu)}
.learn .reading .sources li{font-size:15px;line-height:1.45;color:var(--mu);overflow-wrap:anywhere}
.lsec{margin:56px 0 0}
.lsec h2{font-size:28px;letter-spacing:-.016em;margin:0 0 6px}
.lsec>p{margin:0 0 20px;color:var(--mu);font-size:17px}
.learn .reading .tpath{margin:0 0 22px}
.learn .reading .tpath li{font-size:17px}
.learn .reading .made{margin-top:18px}

/* the suggestion box inside an article keeps its own sizes (the reading column sets sizes with !important) */
.suggestbox .sg-h{margin:0 0 14px!important;font-size:22px!important;letter-spacing:-.012em!important}
.suggestbox .hint{margin:4px 0 0!important;max-width:none!important;font-size:12px!important;line-height:1.33!important;color:var(--mu)!important}
.suggestbox .suggested p{margin:8px auto 16px!important;font-size:15px!important;line-height:1.47!important;color:var(--mu)!important}
@media(max-width:734px){.suggestbox .sg-h{font-size:19px!important;margin-bottom:12px!important}}