/* Professional article / guide page v1
   Loaded after the legacy page styles so this file can progressively refine the layout. */

.article-hero{
  position:relative;
  padding:46px 0 30px;
  overflow:hidden;
}
.article-hero:before,
.article-hero:after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(8px);
  pointer-events:none;
  opacity:.9;
}
.article-hero:before{
  width:430px;height:430px;left:-230px;top:-180px;
  background:radial-gradient(circle,rgba(255,95,159,.15),rgba(255,95,159,0) 70%);
}
.article-hero:after{
  width:390px;height:390px;right:-210px;bottom:-150px;
  background:radial-gradient(circle,rgba(66,223,196,.15),rgba(66,223,196,0) 70%);
}
.article-hero>.container{position:relative;z-index:1}
.article-breadcrumb{margin-bottom:14px;align-items:center}
.article-breadcrumb a{color:#7b1646;font-weight:800}
.article-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.article-hero-shell{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(290px,.45fr);
  gap:18px;
  align-items:stretch;
}
.article-hero-copy{
  position:relative;
  min-width:0;
  padding:clamp(28px,4.5vw,54px);
  border-radius:34px;
  border:1px solid rgba(123,22,70,.11);
  background:
    radial-gradient(circle at 90% 0%,rgba(66,223,196,.12),transparent 20rem),
    linear-gradient(145deg,#fff 0%,#fff9fc 62%,#fff4f8 100%);
  box-shadow:0 28px 70px rgba(83,19,49,.10);
  overflow:hidden;
}
.article-hero-copy:after{
  content:"";
  position:absolute;
  right:-40px;bottom:-70px;
  width:230px;height:230px;
  border-radius:50%;
  border:44px solid rgba(255,95,159,.045);
  pointer-events:none;
}
.article-hero-copy .kicker{
  position:relative;z-index:1;
  border:1px solid #f4d3e1;
  box-shadow:0 8px 20px rgba(123,22,70,.06);
}
.article-hero-copy h1{
  position:relative;z-index:1;
  margin:16px 0 14px;
  max-width:920px;
  color:#451025;
  font-size:clamp(2.05rem,4.35vw,4.05rem);
  line-height:1.11;
  letter-spacing:-.025em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
.article-hero-copy .lead{
  position:relative;z-index:1;
  max-width:880px;
  color:#6d5360;
  font-size:clamp(.99rem,1.4vw,1.11rem);
  line-height:1.82;
}
.article-meta-row{
  position:relative;z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #f2dfe7;
  color:#806773;
  font-size:.76rem;
}
.article-meta-row span{display:inline-flex;gap:5px;align-items:center}
.article-meta-row b{color:#5e1c3b}
.article-hero-copy .chips{position:relative;z-index:1;margin-top:15px}
.article-hero-copy .chip{font-size:.69rem;box-shadow:0 5px 14px rgba(83,19,49,.04)}
.article-hero-copy .primary-chip{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#8b1d50,#ff5f9f);
}
.article-hero-cta{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  padding:28px;
  border-radius:34px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,203,58,.22),transparent 15rem),
    radial-gradient(circle at 0% 100%,rgba(66,223,196,.16),transparent 17rem),
    linear-gradient(155deg,#49112d 0%,#771844 55%,#50102f 100%);
  box-shadow:0 24px 62px rgba(80,16,47,.21);
}
.article-hero-cta:before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:24px;
  pointer-events:none;
}
.article-hero-cta-label{
  position:relative;z-index:1;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#ffdbe9;
  font-size:.64rem;
  font-weight:950;
  letter-spacing:.12em;
}
.article-hero-cta-icon{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:58px;height:58px;
  margin:28px 0 16px;
  border-radius:19px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  font-size:1.7rem;
  transform:rotate(-8deg);
}
.article-hero-cta h2{position:relative;z-index:1;margin:0;color:#fff;font-size:1.55rem;line-height:1.3}
.article-hero-cta p{position:relative;z-index:1;margin:9px 0 18px;color:#eed5df;font-size:.84rem;line-height:1.72}
.article-hero-cta-actions{position:relative;z-index:1;display:grid;gap:9px}
.article-hero-cta .btn{min-height:46px;border:0}
.article-hero-cta .btn.light{background:#fff;color:#5b1537}

.article-hero-media{
  position:relative;
  margin:18px 0 0;
  overflow:hidden;
  border-radius:30px;
  background:#f8e9ef;
  border:1px solid #ecd3dd;
  box-shadow:0 24px 65px rgba(84,22,49,.11);
}
.article-hero-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.article-hero-media figcaption{
  position:absolute;
  left:16px;right:16px;bottom:14px;
  width:max-content;max-width:calc(100% - 32px);
  padding:8px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(45,9,29,.76);
  border:1px solid rgba(255,255,255,.19);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:.69rem;
  font-weight:800;
  line-height:1.35;
}

.article-stage{padding:18px 0 68px}
.article-pro-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:24px;
  align-items:start;
}
.article-pro{
  min-width:0;
  padding:clamp(22px,4vw,46px);
  border-radius:30px;
  background:#fff;
  border:1px solid #efd8e2;
  box-shadow:0 20px 54px rgba(92,23,56,.075);
}
.article-summary-card{
  position:relative;
  margin-bottom:34px;
  padding:22px 22px 21px 24px;
  overflow:hidden;
  border-radius:22px;
  border:1px solid #f0d8e2;
  background:
    radial-gradient(circle at 100% 0%,rgba(66,223,196,.11),transparent 18rem),
    linear-gradient(135deg,#fff7fb,#fff 58%,#f3fffb);
}
.article-summary-card:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:linear-gradient(#ff5f9f,#8f35d6,#42dfc4);
}
.article-summary-eyebrow,
.section-heading-pro>span,
.contact-band-copy>span,
.related-head>div>span,
.share-copy>span,
.sidebar-kicker{
  display:block;
  color:#b22d67;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.article-summary-card h2{margin:5px 0 7px!important;color:#4a102d!important;font-size:1.18rem!important}
.article-summary-card p{margin:0!important;color:#6b5360!important;font-size:.91rem;line-height:1.78}
.article-summary-keyword{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid #efdee5;
  font-size:.75rem;
}
.article-summary-keyword span{color:#8a6b79}
.article-summary-keyword strong{color:#721843}

.article-body{font-size:1rem;line-height:1.88;color:#57454f}
.article-body>*:first-child{margin-top:0}
.article-body p{margin:0 0 1.08rem;color:#5f4c56}
.article-body h2{
  scroll-margin-top:100px;
  position:relative;
  margin:2.65rem 0 .9rem;
  padding:0 0 0 17px;
  color:#5c1438;
  font-size:clamp(1.43rem,2.2vw,1.96rem);
  line-height:1.38;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.article-body h2:before{
  content:"";
  position:absolute;
  left:0;top:.18em;bottom:.16em;
  width:5px;
  border-radius:999px;
  background:linear-gradient(#ff5f9f,#7d2bc2);
}
.article-body h3{
  scroll-margin-top:100px;
  margin:1.85rem 0 .62rem;
  color:#3f1730;
  font-size:clamp(1.08rem,1.55vw,1.27rem);
  line-height:1.46;
}
.article-body h4{margin:1.45rem 0 .5rem;color:#5f1d3e;font-size:1.02rem}
.article-body strong{color:#4e1935}
.article-body a{color:#9c2158;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#e9a5c1;text-underline-offset:3px;overflow-wrap:anywhere}
.article-body a:hover{color:#6d103d;text-decoration-color:#6d103d}
.article-body ul,
.article-body ol{margin:1rem 0 1.35rem;padding-left:1.45rem}
.article-body li{margin:.42rem 0;color:#5f4c56;padding-left:.16rem}
.article-body li::marker{color:#d4387a;font-weight:900}
.article-body blockquote{
  margin:1.55rem 0;
  padding:18px 20px;
  border-left:4px solid #ff69a6;
  border-radius:0 18px 18px 0;
  background:#fff6fa;
  color:#63364a;
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body hr{border:0;height:1px;margin:2.2rem 0;background:linear-gradient(90deg,transparent,#eccedb,transparent)}
.article-body img{display:block;max-width:100%;height:auto;margin:1.6rem auto;border-radius:18px;box-shadow:0 14px 35px rgba(80,16,47,.08)}
.article-body figure{margin:1.7rem 0}
.article-body figcaption{margin-top:8px;text-align:center;color:#876f7a;font-size:.75rem}
.article-body table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:1.45rem 0;
  display:block;
  overflow-x:auto;
  border:1px solid #ecd5df;
  border-radius:16px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
.article-body table tbody{display:table;width:100%;min-width:640px}
.article-body th,.article-body td{padding:12px 14px;border:0;border-bottom:1px solid #f0e1e7;vertical-align:top;text-align:left}
.article-body tr:last-child td{border-bottom:0}
.article-body th{color:#6e1742;background:#fff3f8;font-weight:900}
.article-body tr:nth-child(even) td{background:#fffafb}

.page-faq-pro{margin-top:46px;padding-top:34px;border-top:1px solid #efdee5}
.section-heading-pro{margin-bottom:18px}
.section-heading-pro h2{margin:5px 0 4px;color:#4e1230;font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.35}
.section-heading-pro p{margin:0;max-width:760px;color:#7c6571;font-size:.84rem;line-height:1.7}
.section-heading-pro.compact{margin-bottom:11px}
.section-heading-pro.compact h2{font-size:1.18rem}
.faq-list-pro{display:grid;gap:10px}
.faq-item-pro{overflow:hidden;border:1px solid #eed7e1;border-radius:17px;background:#fffdfd}
.faq-item-pro summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px;
  gap:12px;
  align-items:center;
  padding:15px 16px;
  color:#4e1732;
  font-weight:900;
  line-height:1.55;
}
.faq-item-pro summary::-webkit-details-marker{display:none}
.faq-item-pro summary span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#fff0f6;color:#8e1f52;font-size:1rem;transition:transform .2s ease}
.faq-item-pro[open] summary span{transform:rotate(45deg)}
.faq-item-pro>div{padding:0 16px 15px}
.faq-item-pro p{margin:0;color:#6f5964;font-size:.88rem;line-height:1.78}

.page-sources-pro{
  margin-top:34px;
  padding:19px 20px;
  border-radius:18px;
  border:1px solid #ead9e0;
  background:#fbf8fa;
}
.page-sources-pro ol{margin:0;padding-left:1.3rem}
.page-sources-pro li{margin:.38rem 0;color:#6c5862;font-size:.79rem}
.page-sources-pro a{color:#7b1646;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

.contact-band-pro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  margin-top:34px;
  padding:24px;
  border-radius:24px;
  border:1px solid #efcedb;
  background:
    radial-gradient(circle at 95% 0%,rgba(66,223,196,.13),transparent 18rem),
    linear-gradient(135deg,#fff0f6,#fff 60%,#f2fffb);
}
.contact-band-copy h2{margin:4px 0;color:#511331;font-size:1.25rem;line-height:1.35}
.contact-band-copy p{margin:0;color:#765f6a;font-size:.84rem;line-height:1.68}
.contact-band-pro .contact-actions{justify-content:flex-end}

.article-sidebar{position:sticky;top:92px;display:grid;gap:14px;min-width:0}
.sidebar-card{
  min-width:0;
  padding:19px;
  border-radius:21px;
  border:1px solid #efd9e2;
  background:#fff;
  box-shadow:0 12px 32px rgba(92,23,56,.055);
}
.sidebar-card h2{margin:4px 0 12px;color:#4b1731;font-size:1.02rem;line-height:1.4}
.toc-links{display:grid;gap:5px;max-height:48vh;overflow:auto;padding-right:3px;scrollbar-width:thin}
.toc-link{
  display:block;
  padding:8px 9px;
  border-radius:10px;
  color:#715764;
  font-size:.74rem;
  line-height:1.45;
  border-left:3px solid transparent;
  transition:.18s ease;
}
.toc-link:hover,.toc-link.is-active{color:#7b1646;background:#fff3f8;border-left-color:#ff5f9f}
.toc-level-3{padding-left:17px;font-size:.7rem;color:#89717d}
.seller-check-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.seller-check-card li{position:relative;padding-left:20px;color:#725d67;font-size:.77rem;line-height:1.55}
.seller-check-card li:before{content:"✓";position:absolute;left:0;top:0;color:#24af94;font-weight:950}
.sidebar-line-btn{display:block;margin-top:14px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,#5f163a,#94255b);color:#fff!important;text-align:center;font-size:.76rem;font-weight:900;text-decoration:none!important}
.sidebar-related>div:last-child{display:grid;gap:7px}
.sidebar-related a{display:block;padding:10px 11px;border-radius:11px;background:#fff7fa;color:#5e2540;font-size:.75rem;line-height:1.45;transition:.18s ease}
.sidebar-related a:hover{background:#fff0f6;transform:translateX(2px)}
.sidebar-related a span{display:block;margin-bottom:2px;color:#c43372;font-size:.61rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}

.share-zone{padding:0 0 24px}
.share-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:26px;
  align-items:center;
  padding:24px 26px;
  overflow:hidden;
  border-radius:26px;
  color:#fff;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,202,58,.13),transparent 16rem),
    radial-gradient(circle at 0% 100%,rgba(66,223,196,.11),transparent 16rem),
    linear-gradient(135deg,#321020,#5c1438 65%,#42112a);
  box-shadow:0 18px 50px rgba(71,14,42,.16);
}
.share-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.share-copy,.share-actions,.share-status{position:relative;z-index:1}
.share-copy>span{color:#ffb5d2}
.share-copy h2{margin:5px 0 3px;color:#fff;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.35}
.share-copy p{margin:0;color:#dec4d0;font-size:.79rem}
.share-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.share-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:43px;
  padding:8px 12px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.08);
  color:#fff;
  font:inherit;
  font-size:.74rem;
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.share-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.22)}
.share-btn span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:rgba(255,255,255,.10);font-size:.85rem;font-weight:950}
.share-btn b{font-weight:900}
.share-btn.copy.is-copied{background:rgba(66,223,196,.18);border-color:rgba(123,241,220,.35)}
.share-btn.facebook span{background:#1877f2}
.share-btn.line span{background:#06c755}
.share-btn.x span{background:#111}
.share-status{grid-column:1/-1;min-height:0;color:#b8f4e9;font-size:.7rem;font-weight:800;text-align:right}
.share-status:empty{display:none}

.related-pro{padding:18px 0 72px}
.related-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:16px}
.related-head>div>span{color:#b52f68}
.related-head h2{margin:4px 0 0;color:#4d1531;font-size:clamp(1.38rem,2.2vw,1.82rem)}
.related-head>a{color:#7b1646;font-size:.78rem;font-weight:900;text-decoration:underline;text-underline-offset:4px}
.related-pro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.related-pro-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:13px;
  min-width:0;
  padding:18px;
  border-radius:21px;
  border:1px solid #ecd5df;
  background:linear-gradient(160deg,#fff,#fff9fb);
  box-shadow:0 12px 30px rgba(92,23,56,.05);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.related-pro-card:hover{transform:translateY(-4px);border-color:#e9bcd0;box-shadow:0 20px 40px rgba(92,23,56,.09)}
.related-number{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#fff0f6;color:#9a2459;font-size:.76rem;font-weight:950;border:1px solid #f0d1df}
.related-content{min-width:0}
.related-content small{display:block;color:#ca3776;font-weight:900;font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-content h3{margin:4px 0 5px;color:#4c1731;font-size:.98rem;line-height:1.48}
.related-content p{margin:0 0 9px;color:#7a6470;font-size:.72rem;line-height:1.58;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related-content>span{color:#7c1848;font-size:.7rem;font-weight:950}

@media(max-width:980px){
  .article-hero-shell,.article-pro-layout{grid-template-columns:1fr}
  .article-hero-cta{min-height:290px}
  .article-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc-card{grid-column:1/-1}
  .toc-links{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .related-pro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related-pro-card:last-child{grid-column:1/-1}
  .share-panel{grid-template-columns:1fr;gap:16px}
  .share-actions{justify-content:flex-start}
  .share-status{text-align:left}
}

@media(max-width:700px){
  .article-hero{padding:30px 0 22px}
  .article-hero-shell{gap:12px}
  .article-hero-copy,.article-hero-cta{border-radius:24px;padding:20px}
  .article-hero-copy h1{font-size:clamp(1.85rem,9.5vw,2.65rem)}
  .article-meta-row{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}
  .article-hero-cta{min-height:0}
  .article-hero-cta-icon{margin:21px 0 13px}
  .article-hero-media{border-radius:21px;margin-top:12px}
  .article-hero-media figcaption{display:none}
  .article-stage{padding:8px 0 48px}
  .article-pro{border-radius:22px;padding:19px 17px}
  .article-summary-card{border-radius:18px;padding:18px 16px 17px 19px}
  .article-body{font-size:.96rem;line-height:1.86}
  .article-body h2{font-size:1.38rem;margin-top:2.25rem}
  .article-body h3{font-size:1.09rem}
  .article-sidebar{grid-template-columns:1fr}
  .toc-card{grid-column:auto}
  .toc-links{grid-template-columns:1fr}
  .contact-band-pro{grid-template-columns:1fr;padding:19px;border-radius:20px}
  .contact-band-pro .contact-actions{display:grid;grid-template-columns:1fr;width:100%;justify-content:stretch}
  .page-sources-pro{padding:16px}
  .share-panel{padding:20px;border-radius:21px}
  .share-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .share-btn{justify-content:flex-start;min-width:0}
  .related-head{display:block}
  .related-head>a{display:inline-block;margin-top:7px}
  .related-pro-grid{grid-template-columns:1fr}
  .related-pro-card:last-child{grid-column:auto}
}

@media(max-width:430px){
  .article-meta-row{grid-template-columns:1fr}
  .article-hero-copy .chips{gap:6px}
  .article-hero-copy .chip{font-size:.64rem}
  .article-hero-cta-actions{grid-template-columns:1fr}
  .share-actions{grid-template-columns:1fr 1fr}
  .share-btn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .related-pro-card{grid-template-columns:40px minmax(0,1fr);padding:15px;gap:11px}
  .related-number{width:40px;height:40px;border-radius:12px}
}

@media(prefers-reduced-motion:reduce){
  .related-pro-card,.share-btn,.toc-link,.sidebar-related a{transition:none!important}
}