/* Shared styling for Learn articles (matches the Day Manual's editorial look). */
.art-wrap { max-width: 780px; margin: 0 auto; padding: 34px 16px 70px; }
.art-wrap .crumb { font-size: .82rem; color: var(--muted); text-decoration: none; }
.art-wrap .eyebrow { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .13em;
                     text-transform: uppercase; color: var(--accent); margin: .5rem 0 .6rem; }
.art-wrap h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; margin-bottom: .7rem; }
.art-wrap h1 em { color: var(--primary); font-style: normal; }
.art-wrap .lede { color: var(--text-2); font-size: 1rem; line-height: 1.7; margin-bottom: 2.2rem; }
.art-wrap section { margin-bottom: 2.6rem; }
.art-wrap .g-art { float: right; width: clamp(90px, 16vw, 140px); margin: 0 0 .6rem 1.2rem;
                   opacity: .92; }
:root[data-theme="light"] .art-wrap .g-art { filter: invert(.85) hue-rotate(180deg); }
.art-wrap section::after { content: ""; display: block; clear: both; }
.art-wrap section .n { font-family: var(--font-mono); color: var(--primary); font-size: .78rem;
                       letter-spacing: .1em; margin-bottom: .3rem; }
.art-wrap section h2 { font-size: 1.25rem; margin-bottom: .7rem; }
.art-wrap section p, .art-wrap section li { color: var(--text-2); font-size: .93rem;
                                            line-height: 1.75; }
.art-wrap section p { margin-bottom: .7rem; }
.art-wrap section ul, .art-wrap section ol { margin: 0 0 .7rem 1.25rem; padding: 0; }
.art-wrap section li { margin-bottom: .4rem; }
.art-wrap .rule { border-left: 3px solid var(--primary); background: var(--primary-light);
                  border-radius: 0 10px 10px 0; padding: .8rem 1rem; margin: .9rem 0; }
.art-wrap .rule b { color: var(--primary); }
.art-wrap .rule p { margin: 0; font-size: .9rem; }
.art-wrap .fact { font-size: .8rem; color: var(--muted); border-left: 3px solid var(--accent);
                  padding: .3rem 0 .3rem .8rem; margin: .8rem 0; }
.art-wrap .fact a { color: var(--accent); }
/* "Read the science" — plain claims up top, the rigorous version one click away */
.art-wrap .sci { margin: .7rem 0 1rem; border-left: 3px solid var(--accent); }
.art-wrap .sci summary { cursor: pointer; list-style: none; padding: .25rem 0 .25rem .8rem;
                         font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
                         letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
                         user-select: none; }
.art-wrap .sci summary::-webkit-details-marker { display: none; }
.art-wrap .sci summary::before { content: "▸ "; }
.art-wrap .sci[open] summary::before { content: "▾ "; }
.art-wrap .sci .sci-body { padding: .15rem .2rem .5rem .8rem; font-size: .8rem;
                           color: var(--muted); line-height: 1.75; }
.art-wrap .sci .sci-body a { color: var(--accent); }
.art-wrap table { width: 100%; border-collapse: collapse; font-size: .82rem; margin: .8rem 0 1rem; }
.art-wrap th, .art-wrap td { text-align: left; padding: .45rem .6rem; border: 1px solid var(--border);
                             color: var(--text-2); line-height: 1.5; vertical-align: top; }
.art-wrap th { color: var(--text); background: var(--surface); font-size: .74rem;
               text-transform: uppercase; letter-spacing: .04em; }
.art-wrap .tablebox { overflow-x: auto; }
.art-wrap .stat { display: inline-block; background: var(--surface); border: 1px solid var(--border);
                  border-radius: 10px; padding: .55rem .9rem; margin: 0 .5rem .5rem 0; }
.art-wrap .stat b { display: block; font-size: 1.25rem; color: var(--primary); }
.art-wrap .stat span { font-size: .72rem; color: var(--muted); }
.art-wrap .sources { border-top: 1px solid var(--border); padding-top: 1rem; font-size: .76rem;
                     color: var(--muted); line-height: 1.7; }
.art-wrap .sources a { color: var(--muted); }
.art-wrap .cta { text-align: center; padding: 2rem 0 0; }
.art-wrap .cta h2 { font-size: 1.3rem; margin-bottom: .4rem; }
.art-wrap .cta p { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }

/* ── product shots on the feature pages ─────────────────────────────────────
   Real screenshots of the running app. They sit full-width under the section
   they illustrate, framed so they read as a screen rather than as decoration. */
.art-wrap .shot { display: block; width: 100%; margin: 1.1rem 0 .4rem;
                  border: 1px solid var(--border); border-radius: 12px;
                  box-shadow: var(--shadow-md); background: var(--surface); }
.art-wrap .shot.narrow { max-width: 420px; }
.art-wrap figure { margin: 1.4rem 0 1.8rem; }
.art-wrap figcaption { font-size: .78rem; color: var(--muted); line-height: 1.5;
                       margin-top: .5rem; }
.art-wrap figcaption b { color: var(--text-2); }