/* Single-article reading experience. Deliberately isolated from magazine archives. */
body.article-experience {
  --reader-ink:#18343d; --reader-muted:#5c7179; --reader-brand:#075b6d;
  --reader-paper:#fff; --reader-soft:#f3f7f7; --reader-line:#dde7e8;
  --reader-tint:#e9f3f3; --reader-offset:132px; --reader-font:14px;
  background:var(--reader-paper); color:var(--reader-ink);
}
body.article-experience.theme-dark {
  --reader-ink:#e4edef; --reader-muted:#adc2c9; --reader-brand:#86d8df;
  --reader-paper:#12252d; --reader-soft:#182f38; --reader-line:#34505a; --reader-tint:#1e3b44;
}
body.article-experience [hidden] { display:none!important; }
body.article-experience .blog-single-dynamic-page .container-xxl { max-width:1440px!important; padding-inline:24px; }
body.article-experience :is(a,button,summary,input,textarea):focus-visible { outline:3px solid #2999a9; outline-offset:4px; }
body.article-experience :is(#article-start,#article-author,#comments,.article-section) { scroll-margin-top:calc(var(--reader-offset) + 24px); }
body.article-experience .reading-progress { height:3px; background:transparent; pointer-events:none; z-index:1040; }
body.article-experience .reading-progress span { background:#1aabba; transition:none; }
body.article-experience .product-breadcrumb-wrap { padding:22px 0 16px; background:transparent!important; }
body.article-experience .product-breadcrumb { font-size:12px; margin:0; }
body.article-experience .blog-hero-section { padding:0 0 28px; }
body.article-experience.blog-article-page .blog-hero {
  position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(24px,4vw,64px); padding:clamp(26px,4vw,56px); min-height:0;
  border:1px solid #245766!important; border-radius:28px;
  background:linear-gradient(120deg,#123d4b,#082c38)!important; box-shadow:none!important;
}
body.article-experience .article-kicker { display:flex; flex-wrap:wrap; gap:9px; color:#b7cfd4; font-size:11px; line-height:1.9; margin-bottom:20px; }
body.article-experience .blog-hero .blog-category { color:#e4f4d1!important; background:#214b45!important; border:1px solid #42694e!important; border-radius:7px; font-size:12px; padding:5px 10px; margin-bottom:12px; }
body.article-experience .blog-hero h1 { font-size:clamp(29px,3.1vw,46px)!important; font-weight:900; line-height:1.65!important; letter-spacing:-.6px; color:#fff!important; margin:0 0 18px; text-wrap:balance; overflow-wrap:anywhere; }
body.article-experience .blog-hero .article-deck { font-size:15px!important; line-height:2.05; color:#c8dce1!important; margin:0 0 25px; }
body.article-experience .article-byline { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
body.article-experience .article-byline img { width:44px; height:44px; object-fit:cover; border-radius:50%; background:#30505b; }
body.article-experience .article-byline>div { display:grid; gap:3px; }
body.article-experience .article-byline>div>span { font-size:10px; color:#c3d9df; }
body.article-experience .article-byline a { color:#fff; font-size:13px; font-weight:700; }
body.article-experience .article-read-time { margin-inline-start:auto; display:inline-flex; gap:7px; font-size:12px; color:#d4e7eb; }
body.article-experience .blog-meta { margin:16px 0 24px; gap:8px 16px; }
body.article-experience .blog-hero .blog-meta span { border:0; border-radius:0; padding:0; background:none; color:#b9d1d8!important; font-size:11px; }
body.article-experience .article-start-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
body.article-experience .article-start-link { display:inline-flex; align-items:center; gap:24px; min-height:46px; padding:10px 18px; border-radius:10px; background:#e5f2c9; color:#163f3e; font-size:14px; font-weight:800; }
body.article-experience .article-start-link:hover { background:#d2eaa6; }
body.article-experience .article-resume { min-height:44px; background:none; border:1px solid #62838b; color:#e8f4f5; padding:8px 12px; border-radius:10px; font-size:12px; }
body.article-experience .blog-hero .blog-hero-actions { gap:8px; }
body.article-experience .blog-hero .blog-hero-actions :is(button,a) { min-height:40px; font-size:11px; padding:8px 10px; background:transparent!important; border:1px solid #54717a!important; color:#d9e9ed!important; border-radius:9px; box-shadow:none!important; }
body.article-experience .blog-hero .blog-hero-actions :is(button,a):hover,
body.article-experience .blog-hero .blog-hero-actions button.is-active { background:#31555f!important; color:#fff!important; border-color:#9bbec4!important; }
body.article-experience .blog-hero-media { width:100%; aspect-ratio:1/1; display:grid; place-items:center; margin:0; border-radius:18px; overflow:hidden; background:#193f4b; border:1px solid #345661; }
body.article-experience .blog-hero .blog-hero-media img { width:100%!important; height:100%!important; max-height:none; object-fit:contain!important; border-radius:0; box-shadow:none!important; }

body.article-experience .article-reading-section { padding-bottom:36px; }
body.article-experience .blog-layout { grid-template-columns:minmax(0,1fr) 300px!important; grid-template-areas:"prose reader"; align-items:start; gap:24px!important; padding-inline:0; }
body.article-experience .blog-article { grid-area:prose; min-width:0; width:100%; padding:28px 32px!important; max-width:none!important; margin:0; border:1px solid var(--reader-line)!important; border-radius:18px!important; background:var(--reader-paper)!important; box-shadow:none!important; color:var(--reader-ink)!important; }
body.article-experience .article-reading-sidebar { grid-area:reader; min-width:0; position:static; max-height:none; overflow:visible; padding:0; }
body.article-experience .article-reader-card { border:1px solid var(--reader-line); border-radius:18px; background:var(--reader-paper); overflow:hidden; }
body.article-experience .article-reader-heading { display:flex; align-items:center; gap:9px; padding:14px 16px; color:var(--reader-brand); font-size:12px; font-weight:800; }
body.article-experience .article-reader-heading>a { margin-inline-start:auto; display:grid; place-items:center; min-height:32px; min-width:32px; color:var(--reader-muted); }
body.article-experience .article-toc { border-block:1px solid var(--reader-line); }
body.article-experience .article-toc summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; min-height:52px; cursor:pointer; list-style:none; font-size:14px; font-weight:800; color:var(--reader-ink); background:var(--reader-soft); }
body.article-experience .article-toc summary::-webkit-details-marker { display:none; }
body.article-experience .article-toc summary>span { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
body.article-experience .article-toc summary small { font-size:10px; font-weight:500; color:var(--reader-muted); }
body.article-experience .article-toc-chevron { transition:transform .18s ease; font-size:12px; }
body.article-experience .article-toc[open] .article-toc-chevron { transform:rotate(180deg); }
body.article-experience .article-toc-links { display:grid; gap:4px; padding:12px; max-height:min(400px,42dvh); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
body.article-experience .article-toc-links a { display:flex; align-items:baseline; gap:9px; padding:10px 12px; border-inline-start:2px solid transparent; border-radius:4px 9px 9px 4px; font-size:12px; line-height:1.9; color:var(--reader-muted); overflow-wrap:anywhere; }
body.article-experience .article-toc-links a::before { content:""; flex:0 0 5px; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55; }
body.article-experience .article-toc-links a.article-toc-subsection { padding-inline-start:28px; font-size:11px; }
body.article-experience .article-toc-links a:hover,
body.article-experience .article-toc-links a[aria-current="location"] { background:var(--reader-tint); color:var(--reader-brand); border-inline-start-color:var(--reader-brand); }
body.article-experience .article-reader-progress { padding:14px 16px; }
body.article-experience .article-reader-progress>div { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--reader-muted); }
body.article-experience .article-reader-progress b { color:var(--reader-brand); font-variant-numeric:tabular-nums; }
body.article-experience .article-reader-progress progress { display:block; width:100%; height:5px; margin:12px 0; border:0; border-radius:10px; accent-color:var(--reader-brand); background:var(--reader-soft); overflow:hidden; }
body.article-experience .article-reader-progress progress::-webkit-progress-bar { background:var(--reader-soft); }
body.article-experience .article-reader-progress progress::-webkit-progress-value { background:var(--reader-brand); border-radius:10px; }
body.article-experience .article-reader-progress progress::-moz-progress-bar { background:var(--reader-brand); border-radius:10px; }
body.article-experience .article-reader-progress p { font-size:11px; line-height:1.9; margin:0; color:var(--reader-muted)!important; overflow-wrap:anywhere; }
body.article-experience .article-sidebar-discover { padding:18px 0 0; }
body.article-experience .article-sidebar-products { border:1px solid var(--reader-line); border-radius:16px; background:var(--reader-paper); margin-bottom:16px; overflow:hidden; }
body.article-experience .article-sidebar-products-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px; border-bottom:1px solid var(--reader-line); }
body.article-experience .article-sidebar-products-heading h2 { font-size:14px!important; font-weight:800; margin:0!important; }
body.article-experience .article-sidebar-products-heading>a { display:inline-flex; align-items:center; gap:6px; color:var(--reader-brand); font-size:11px; white-space:nowrap; padding:5px 0; }
body.article-experience .article-sidebar-products-list { padding:0 14px; }
body.article-experience .article-sidebar-product { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; padding:14px 0; color:var(--reader-ink); text-decoration:none; border-bottom:1px solid var(--reader-line); }
body.article-experience .article-sidebar-product:last-child { border-bottom:0; }
body.article-experience .article-sidebar-product:hover .article-sidebar-product-title { color:var(--reader-brand); }
body.article-experience .article-sidebar-product-image { display:grid; place-items:center; width:64px; height:72px; padding:5px; background:var(--reader-soft); border-radius:10px; }
body.article-experience .article-sidebar-product-image img { width:100%; height:100%; object-fit:contain; border-radius:6px; }
body.article-experience .article-sidebar-product-info { display:grid; gap:5px; min-width:0; }
body.article-experience .article-sidebar-product-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; font-weight:650; line-height:1.85; }
body.article-experience .article-sidebar-product-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; color:var(--reader-brand); }
body.article-experience .article-sidebar-product-price b { font-size:13px; font-variant-numeric:tabular-nums; }
body.article-experience .article-sidebar-product-price small { font-size:10px; }
body.article-experience .article-sidebar-product-discount { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:10px; }
body.article-experience .article-sidebar-product-discount del { color:var(--reader-muted); }
body.article-experience .article-sidebar-product-discount>span { color:#a32e32; background:#fff0ef; border-radius:5px; padding:2px 5px; }
body.article-experience .article-sidebar-products-empty { font-size:12px; line-height:1.9; padding:16px 0; margin:0; color:var(--reader-muted); }
body.article-experience .article-sidebar-articles { padding:4px 4px 0; }
body.article-experience .article-sidebar-discover h2 { font-size:16px; color:var(--reader-ink)!important; margin:8px 0 15px; }
body.article-experience .article-sidebar-discover .popular-article-link { display:grid; grid-template-columns:58px minmax(0,1fr) 12px; align-items:center; gap:10px; margin:0!important; padding:10px 0!important; border:0!important; border-bottom:1px solid var(--reader-line)!important; border-radius:0!important; background:none!important; }
body.article-experience .article-sidebar-discover .popular-article-link img { width:58px; height:58px; object-fit:cover; border-radius:10px; }
body.article-experience .article-sidebar-discover .popular-article-link span { color:var(--reader-ink)!important; font-size:12px; line-height:1.9; }
body.article-experience .article-sidebar-discover .popular-article-link i { color:var(--reader-muted); font-size:11px; }

body.article-experience .article-eyebrow { font-size:11px; font-weight:700; color:var(--reader-brand); }
body.article-experience .article-section { margin-bottom:24px!important; }
body.article-experience .article-prose>.article-section:last-child { margin-bottom:0!important; }
body.article-experience .article-prose>.article-section:first-child>h2 { margin-top:0!important; }
body.article-experience .article-section>:is(h2,h3):first-child { margin-top:0!important; }
body.article-experience .blog-article .article-section :is(h2,h3,h4) { color:var(--reader-ink)!important; letter-spacing:0; line-height:1.85!important; scroll-margin-top:calc(var(--reader-offset) + 24px); }
body.article-experience .blog-article .article-section h2 { font-size:22px!important; font-weight:850; margin:24px 0 12px!important; }
body.article-experience .blog-article .article-section h2::after { display:none; }
body.article-experience .blog-article .article-section h3 { font-size:18px!important; margin:20px 0 10px!important; }
body.article-experience .blog-article .template-dynamic-html { min-width:0; max-width:100%; overflow-wrap:anywhere; overflow-x:auto; overscroll-behavior-x:contain; font-size:var(--reader-font); line-height:2; }
body.article-experience .blog-article .template-dynamic-html :is(p,li,ul,ol) { font-size:var(--reader-font)!important; color:var(--reader-ink)!important; line-height:2!important; }
body.article-experience .blog-article .template-dynamic-html p { margin-bottom:12px!important; }
body.article-experience .blog-article .template-dynamic-html :is(ul,ol) { padding-inline-start:22px; margin-bottom:16px; }
body.article-experience .blog-article .template-dynamic-html li { margin-bottom:5px; padding-inline-start:4px; }
body.article-experience .blog-article .template-dynamic-html a { color:var(--reader-brand)!important; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
body.article-experience .blog-article .template-dynamic-html :is(strong,b) { color:var(--reader-ink)!important; font-weight:800; }
body.article-experience .blog-article .template-dynamic-html img { display:block; width:auto; height:auto; max-width:100%; margin:18px auto; border-radius:12px; box-shadow:none; }
body.article-experience .blog-article .template-dynamic-html figure { max-width:100%; margin:18px 0; }
body.article-experience .blog-article .template-dynamic-html figcaption { font-size:12px; text-align:center; color:var(--reader-muted); padding-top:8px; }
body.article-experience .blog-article .template-dynamic-html blockquote { margin:18px 0; border-inline-start:3px solid var(--reader-brand); padding:20px 26px; background:var(--reader-soft); border-radius:12px; }
body.article-experience .blog-article .template-dynamic-html blockquote p:last-child { margin-bottom:0!important; }
body.article-experience .blog-article .template-dynamic-html pre { padding:20px; border-radius:12px; background:var(--reader-soft); max-width:100%; overflow:auto; direction:ltr; text-align:left; }
body.article-experience .blog-article :is(.template-dynamic-html table,.article-table) { display:table!important; width:100%!important; min-width:100%; max-width:none; table-layout:auto; border-collapse:collapse!important; margin:16px 0; box-shadow:none; }
body.article-experience .blog-article .table-responsive { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
body.article-experience .blog-article .table-responsive>.article-table { margin:0; }
body.article-experience .blog-article :is(.template-dynamic-html table,.article-table) :is(th,td) { padding:12px 14px!important; border:1px solid var(--reader-line); color:var(--reader-ink); background:var(--reader-paper); font-size:14px; line-height:1.9; min-width:120px; }
body.article-experience .blog-article :is(.template-dynamic-html table,.article-table) th { background:var(--reader-soft); font-weight:800; }
body.article-experience .blog-article :is(.author-box,.consultation-box,.article-cta,.article-checklist,.comment-form-box,.review-comment-card,.related-blog-section,.blog-comments-section) { background:var(--reader-soft)!important; color:var(--reader-ink); border:1px solid var(--reader-line)!important; box-shadow:none!important; border-radius:18px; }
body.article-experience .blog-article :is(.author-box,.consultation-box,.article-cta,.article-checklist) { padding:26px; gap:20px; }
body.article-experience .blog-article :is(.author-box,.consultation-box,.article-cta,.article-checklist,.comment-form-box,.review-comment-card,.related-blog-section,.blog-comments-section) :is(h2,h3,strong,b) { color:var(--reader-ink)!important; }
body.article-experience .blog-article :is(.author-box,.consultation-box,.article-cta,.article-checklist,.comment-form-box,.review-comment-card) :is(p,li,span,small) { color:var(--reader-muted)!important; }
body.article-experience .blog-article .author-box { margin:28px 0; display:flex; align-items:flex-start; }
body.article-experience .author-box img { width:64px; height:64px; flex:0 0 64px; border-radius:50%; object-fit:cover; }
body.article-experience .author-box h2 { font-size:18px!important; margin:8px 0; }
body.article-experience .author-box p { font-size:13px!important; line-height:2; margin:0; }
body.article-experience .blog-article .related-blog-section { padding:24px; margin:0 0 28px; }
body.article-experience .blog-article .blog-comments-section { padding:0; border:0!important; background:var(--reader-paper)!important; }
body.article-experience .blog-comments-section .comment-form-box { padding:24px; }
body.article-experience .blog-comments-section :is(input.form-control,textarea.form-control) { background:var(--reader-paper)!important; color:var(--reader-ink)!important; border-color:var(--reader-line)!important; border-radius:10px; font-size:14px; min-height:48px; }
body.article-experience .blog-comments-section .form-control::placeholder { color:var(--reader-muted)!important; }
body.article-experience .blog-comments-section .article-rating-stars label:focus-within { outline:2px solid var(--reader-brand); outline-offset:4px; border-radius:6px; }
body.article-experience .blog-comments-section .article-rating-stars label { position:relative; }
body.article-experience .blog-comments-section .article-rating-stars input { display:block!important; position:absolute; opacity:0; width:100%; height:100%; inset:0; cursor:pointer; }
body.article-experience .related-articles-swiper .article-card { background:var(--reader-paper)!important; border-color:var(--reader-line)!important; box-shadow:none!important; border-radius:14px; }
body.article-experience .related-articles-swiper .article-card :is(h3,p,small) { color:var(--reader-ink)!important; }
body.article-experience .article-action-status { position:fixed; inset-inline-start:24px; bottom:max(28px,env(safe-area-inset-bottom)); z-index:1060; max-width:calc(100% - 48px); background:#123d4b; color:#fff; box-shadow:0 12px 40px #062b3826; border-radius:12px; padding:0; font-size:13px; pointer-events:none; }
body.article-experience .article-action-status:not(:empty) { padding:15px 22px; }
body.article-experience .article-copy-fallback { position:fixed; bottom:92px; inset-inline:16px; max-width:560px; margin:auto; z-index:1050; border:1px solid var(--reader-line); background:var(--reader-paper); color:var(--reader-ink); padding:20px; border-radius:16px; box-shadow:0 12px 40px #062b3826; }
body.article-experience .article-copy-fallback label { display:block; font-size:12px; margin-bottom:10px; }
body.article-experience .article-copy-fallback input { direction:ltr; width:100%; padding:12px; background:var(--reader-soft); border:1px solid var(--reader-line); border-radius:8px; color:var(--reader-ink); }
body.article-experience .article-copy-fallback button { position:absolute; inset-inline-end:12px; top:8px; border:0; background:none; color:var(--reader-ink); width:36px; height:36px; }

@media(max-width:1199.98px) {
  body.article-experience .blog-layout { grid-template-columns:minmax(0,1fr) 280px!important; gap:24px!important; padding-inline:0; }
  body.article-experience .blog-hero { gap:28px; }
}
@media(max-width:991.98px) {
  body.article-experience { --reader-font:15px; }
  body.article-experience .blog-article { padding:22px!important; }
  body.article-experience .blog-layout { grid-template-columns:minmax(0,1fr)!important; grid-template-areas:"reader" "prose"; gap:18px!important; max-width:790px; margin:auto; }
  body.article-experience .article-reading-sidebar { position:static; max-height:none; padding:0; overflow:visible; }
  body.article-experience .article-sidebar-discover { display:none; }
  body.article-experience .article-reader-heading { display:none; }
  body.article-experience .article-toc { border-top:0; }
  body.article-experience .article-reader-progress { padding:16px 18px; }
  body.article-experience .blog-hero { grid-template-columns:1fr!important; }
  body.article-experience .blog-hero-media { aspect-ratio:16/9; }
  body.article-experience .blog-hero-section { padding-bottom:30px; }
}
@media(max-width:575.98px) {
  body.article-experience .blog-single-dynamic-page .container-xxl { padding-inline:14px; }
  body.article-experience .blog-article { padding:18px!important; border-radius:14px!important; }
  body.article-experience .product-breadcrumb-wrap { padding:16px 0; }
  body.article-experience .blog-hero { padding:24px 20px!important; border-radius:20px; gap:28px; }
  body.article-experience .blog-hero h1 { font-size:28px!important; line-height:1.75!important; letter-spacing:0; }
  body.article-experience .blog-hero .article-deck { font-size:14px!important; }
  body.article-experience .article-kicker { font-size:10px; gap:6px; margin-bottom:18px; }
  body.article-experience .article-read-time { font-size:11px; }
  body.article-experience .blog-article :is(.author-box,.consultation-box,.article-cta,.article-checklist,.comment-form-box,.related-blog-section) { padding:20px; }
  body.article-experience .blog-article .author-box { gap:14px; }
  body.article-experience .author-box img { width:48px; height:48px; flex-basis:48px; }
  body.article-experience .blog-hero .blog-hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.article-experience .blog-hero .blog-hero-actions :is(button,a) { justify-content:center; min-height:42px; }
  body.article-experience .article-action-status { inset-inline:16px; max-width:none; text-align:center; }
}
@media(prefers-reduced-motion:reduce) {
  body.article-experience .article-toc-chevron { transition:none; }
  body.article-experience :is(.article-start-link,.popular-article-link,.article-card) { transition:none!important; transform:none!important; }
}
@media print {
  body.article-experience .blog-hero { background:#fff!important; border:0!important; padding:0!important; display:block; }
  body.article-experience .blog-hero :is(h1,p,span,a) { color:#000!important; }
  body.article-experience :is(.article-reading-sidebar,.article-start-actions,.blog-hero-actions,.article-kicker,.reading-progress,.article-action-status,.article-copy-fallback,.blog-hero-media) { display:none!important; }
  body.article-experience .blog-layout { display:block; }
  body.article-experience .blog-article { max-width:none!important; }
}