/* Shared product-page presentation, loaded only by preview templates. */
/* Keep Banner transforms/z-10 artwork below the existing #header (z-index: 2).
 * Standard pages put product-page on body, so isolate their content sections instead. */
.product-page:not(body), body.product-page > section { position:relative; z-index:0; isolation:isolate; }
/* Typography follows the existing public CN2 page (cn2.css / cn2-tailwind.css). */
body.product-page > section > .container { width:calc(100% - 40px); max-width:1200px; margin-left:auto; margin-right:auto; }
.product-page [hidden] { display:none !important; }
/* Bandwidth reference 1.html: Banner bottom 48px + plan top 32px, title margin 16px. */
.product-list { padding:32px 0 48px; background:#f8f9fb; scroll-margin-top:90px; }
.product-list h2 { margin:0 0 16px; }
.product-regions,.product-lines { display:flex; gap:8px; overflow-x:auto; padding:8px; border-radius:12px; background:#f3f4f6; margin-bottom:32px; }
.product-lines { background:transparent; padding-left:0; }
.product-multi-ip-lines { margin-bottom:16px; }
.product-region { flex-shrink:0; padding:8px 24px; line-height:20px; border-radius:8px; color:#564337; background:transparent; cursor:pointer; border:0; font-size:14px; font-weight:500; }
.product-region.active { background:#ff8f32; color:#fff; font-weight:600; }
.product-region:focus-visible,.product-order:focus-visible,.product-expand:focus-visible { outline:2px solid #0353da; outline-offset:3px; }
.product-status { color:#564337; min-height:0; }
.product-status:not(:empty) { margin:12px 0; }
.product-status button { color:#b85000; margin-left:16px; text-decoration:underline; cursor:pointer; }
.product-table-shell { position:relative; }
.product-table-scroll { overflow-x:auto; background:#f8f9fb; border:1px solid #ddc1b2; border-radius:12px; }
.product-table { width:100%; border-collapse:collapse; text-align:left; }
.product-table th { background:#e7e8ea; font-size:14px; font-weight:600; line-height:20px; padding:16px 24px; white-space:nowrap; }
.product-table td { border-top:1px solid #ddc1b2; padding:20px 16px; font-size:16px; line-height:24px; white-space:nowrap; }
.product-table th:last-child,.product-table td:last-child { text-align:center; }
.product-table td:first-child { font-weight:700; text-wrap: auto;}
.product-table td.product-cpu { box-sizing:border-box; width:180px; min-width:180px; max-width:180px; white-space:normal; overflow-wrap:normal; }
.product-table tbody tr:hover { background:#f3f4f6; }
.product-price { display:flex; flex-direction:column; gap:0; white-space:nowrap; }
.product-current { color:#ff8f32; font-size:16px; line-height:24px; font-weight:700; }
.product-price small { margin-left:4px; font-size:12px; line-height:16px; color:#7b8088; }
.product-original { color:#9aa0a6; font-size:12px; line-height:16px; }
.product-order { display:inline-flex; justify-content:center; align-items:center; padding:8px 20px; line-height:20px; background:#ff8f32; border-radius:8px; color:#fff; font-size:14px; font-weight:700; white-space:nowrap; }
.product-order:hover { background:#f47f22; }
.product-order[aria-disabled=true] { opacity:.5; cursor:default; }
.product-defense { min-width:135px; border:1px solid #d8dadd; border-radius:8px; background:#fff; padding:9px 12px; font:inherit; cursor:pointer; }
.product-defense[hidden],.product-defense-menu[hidden] { display:none; }
.product-defense-table th { padding:16px 24px; }
.product-defense-table td { padding:20px 16px; white-space:nowrap; }
.product-defense-table th:last-child,.product-defense-table td:last-child { text-align:center; }
.product-defense-dropdown { width:156px; min-width:156px; }
.product-defense-trigger { width:100%; height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 11px 0 12px; border:1px solid #d8dadd; border-radius:8px; background:#fff; color:#191c1e; font-size:16px; line-height:24px; font-weight:600; white-space:nowrap; cursor:pointer; }
.product-defense-trigger:hover { border-color:#b9bdc3; background:#fcfcfd; }
.product-defense-trigger[aria-expanded=true],.product-defense-trigger:focus-visible { outline:none; border-color:#ff8f32; background:#fff; }
.product-defense-trigger::after { content:""; flex:0 0 7px; height:7px; border-right:2px solid #8b9097; border-bottom:2px solid #8b9097; transform:translateY(-2px) rotate(45deg); transition:transform .16s ease; }
.product-defense-trigger[aria-expanded=true]::after { transform:translateY(2px) rotate(225deg); }
/* Fixed menu sits outside the table's overflow container. */
.product-defense-menu { position:fixed; z-index:60; width:max-content; min-width:156px; max-width:calc(100vw - 16px); padding:5px; overflow-y:auto; border:1px solid #e1e3e6; border-radius:9px; background:#fff; box-shadow:0 8px 22px rgba(25,28,30,.1); font-family:Inter,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; }
.product-defense-option { width:100%; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 9px; border:0; border-radius:6px; background:transparent; text-align:left; cursor:pointer; }
.product-defense-option:hover,.product-defense-option:focus-visible { outline:none; background:#f5f6f7; }
.product-defense-option[aria-selected=true] { background:#fff6ee; }
.product-defense-option-label { color:#272a2f; font-size:16px; line-height:24px; font-weight:600; white-space:nowrap; }
.product-defense-option-price { flex:0 0 auto; color:#8c9198; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; }
.product-defense-option[aria-selected=true] > span { color:#c95800; }
.product-bandwidth-table { min-width:0; table-layout:auto; }
.product-bandwidth-table th { padding:16px; }
.product-bandwidth-table td { padding:20px 16px; font-size:16px; white-space:nowrap; }
.product-bandwidth-table th:not(:nth-child(4)) { width:1%; }
.product-bandwidth-table td { vertical-align:top; }
.product-bandwidth-table td:first-child { width:144px; min-width:144px; max-width:144px; font-size:14px; white-space:normal; overflow-wrap:normal; }
.product-bandwidth-table td:nth-child(4) { width:100%; padding:16px 8px 16px 16px; white-space:normal; }
.product-bandwidth-table td:last-child { text-align:center; }
.product-bandwidth-columns { display:grid; grid-template-columns:repeat(var(--product-columns,2), minmax(0,1fr)); gap:8px; align-items:start; }
.product-bandwidth-columns[data-cols="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.product-bandwidth-columns[data-cols="1"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.product-bandwidth-column { min-width:0; display:flex; flex-direction:column; gap:8px; }
.product-bandwidth-option { width:100%; min-width:0; min-height:64px; padding:9px; border:1px solid #e1e2e4; border-radius:8px; background:#fff; text-align:left; cursor:pointer; overflow:hidden; }
.product-bandwidth-option:hover { border-color:#efb487; }
.product-bandwidth-option.active { border-color:#ff8f32; background:#fff7f0; }
.product-bandwidth-option:focus-visible { outline:2px solid #0353da; outline-offset:2px; }
.product-bandwidth-name { display:block; height:auto; overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:break-word; margin-bottom:6px; color:#191c1e; font-size:16px; line-height:18px; font-weight:400; }
.product-list:lang(en) .product-bandwidth-name { height:36px; }
.product-bandwidth-option .product-price { flex-direction:row; align-items:baseline; gap:4px; min-width:0; }
.product-bandwidth-option .product-price > span { flex:0 0 auto; }
.product-bandwidth-option .product-current { font-size:16px; line-height:21px; }
.product-bandwidth-option .product-price small { margin-left:1px; font-size:12px; line-height:16px; }
.product-bandwidth-option .product-original { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; line-height:16px; }
.product-bandwidth-table .product-order { padding:8px 20px; line-height:20px; }
.product-expand { display:inline-flex; margin-top:8px; padding:0; color:#b85000; border:0; background:transparent; font-size:14px; line-height:20px; font-weight:600; cursor:pointer; }
.product-empty { padding:32px 0; text-align:center; color:#6b7280; }
.product-bandwidth-columns[data-cols="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.product-bandwidth-columns[data-cols="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* Stack table rows on narrow screens to keep configurations readable without scrolling. */
@media(max-width:1199px) {
    .product-bandwidth-table,.product-bandwidth-table tbody { display:block; width:100%; }
    .product-bandwidth-table thead { display:none; }
    .product-bandwidth-table .product-bandwidth-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #edeef0; }
    .product-bandwidth-table .product-bandwidth-row:first-child { border-top:0; }
    .product-bandwidth-table td { display:block; min-width:0; border-top:0; padding:12px; }
    .product-bandwidth-table td[data-label]::before { content:attr(data-label); display:block; margin-bottom:6px; color:#6b7280; font-size:12px; font-weight:500; }
    .product-bandwidth-table td:nth-child(4),.product-bandwidth-table td:last-child { grid-column:1 / -1; width:auto; }
    .product-bandwidth-table .product-order { width:100%; }
}
@media(max-width:767px) {
    .product-bandwidth-table .product-bandwidth-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .product-bandwidth-table td:first-child { grid-column:1 / -1; width:auto; min-width:0; max-width:none; }
}
@media(max-width:359px) { .product-bandwidth-table td[data-label] { grid-column:1 / -1; } }
@media(max-width:639px) { .product-table th,.product-table td { padding:12px; } }
@media(prefers-reduced-motion:reduce) { .product-page * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }




/* Shared FAQ */
.product-page .product-faq-section {
    background: #f8f9fb;
    padding: 64px 0 72px;
  }.product-page .product-faq-shell {
    width: 100%;
    max-width: 1040px !important;
  }.product-page .product-faq-heading {
    margin: 0 0 10px;
    color: #191c1e;
    font-family: "Plus Jakarta Sans";
    /* The legacy site stylesheet forces a smaller h2 at tablet widths. */
    font-size: 32px !important;
    line-height: 40px;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.45px;
  }.product-page .product-faq-subtitle {
    margin: 0 auto 32px;
    color: #6b7280;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }.product-page .product-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }.product-page .product-faq-item {
    overflow: hidden;
    border: 1px solid #e7e9ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(25, 28, 30, 0.02);
    transition: border-color .18s ease, box-shadow .18s ease;
  }.product-page .product-faq-item:hover {
    border-color: #dde1e5;
  }.product-page .product-faq-item[open] {
    border-color: #e5e7ea;
    box-shadow: 0 7px 22px rgba(25, 28, 30, 0.035);
  }.product-page .product-faq-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px;
    padding: 19px 24px;
    color: #202326;
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
  }.product-page .product-faq-summary::-webkit-details-marker { display: none; }.product-page .product-faq-summary::marker { content: ""; }.product-page .product-faq-summary:hover { background: #fdfdfd; }.product-page .product-faq-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    height: 20px;
    color: #9aa1aa;
    font-size: 22px;
    line-height: 1;
    transition: transform .2s ease, color .18s ease;
  }.product-page .product-faq-chevron::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }.product-page .product-faq-item[open] .product-faq-chevron {
    transform: rotate(180deg);
    color: #7e8792;
  }.product-page .product-faq-answer {
    padding: 0 24px 22px;
    color: #626a75;
    font-size: 16px;
    line-height: 24px;
  }.product-page .product-faq-answer p {
    margin: 0 0 12px;
  }.product-page .product-faq-answer p:last-child,.product-page .product-faq-answer ul:last-child {
    margin-bottom: 0;
  }.product-page .product-faq-answer strong {
    color: #40464d;
    font-weight: 600;
  }.product-page .product-faq-answer ul {
    margin: -2px 0 12px 20px;
    padding: 0;
    list-style: disc;
  }.product-page .product-faq-answer li {
    margin: 2px 0;
    padding-left: 2px;
  }
  @media (max-width: 767px) {.product-page .product-faq-section { padding: 52px 0 60px; }.product-page .product-faq-heading {
      margin-bottom: 8px;
      /* Override the legacy global mobile h2 size without changing other pages. */
      font-size: 32px !important;
      line-height: 40px;
    }.product-page .product-faq-subtitle {
      margin-bottom: 26px;
      padding: 0 4px;
      font-size: 16px;
      line-height: 24px;
    }.product-page .product-faq-list { gap: 10px; }.product-page .product-faq-summary {
      min-height: 64px;
      padding: 17px 18px;
      font-size: 16px;
      line-height: 24px;
    }.product-page .product-faq-chevron { font-size: 21px; }.product-page .product-faq-answer {
      padding: 0 18px 19px;
      font-size: 16px;
      line-height: 24px;
    }.product-page .product-faq-answer p { margin-bottom: 10px; }
  }

.product-page .product-icon { display:inline-block; font-size:24px; }
.product-page svg.product-icon { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* Match dedicated/index.html: pt-32 plus the content block's mt-10. */
.product-page > section.hero-pattern { padding-top:168px; padding-bottom:48px; }
.product-page .product-hero-actions { display:flex; flex-wrap:wrap; }
.product-page .product-hero-actions > a { display:inline-flex; align-items:center; justify-content:center; }
.product-page .product-cta-actions { display:flex; flex-wrap:wrap; justify-content:center; }
.product-page .product-cta-actions > a { justify-content:center; padding:16px 32px; }
.product-page .rounded-bl-lg { border-bottom-left-radius:8px; }


/* Overlay only the table, leaving region/line switches available for a newer request. */
.product-table-loading { position:absolute; inset:0; z-index:2; display:flex; align-items:flex-start; justify-content:center; padding:24px; border-radius:12px; background:rgba(248,249,251,.88); color:#564337; font-size:14px; }
.product-table-loading-indicator { position:sticky; top:calc(50vh - 20px); display:flex; align-items:center; gap:12px; }
.product-loading-spinner { flex:0 0 24px; width:24px; height:24px; border:3px solid #ffe2cc; border-top-color:#ff8f32; border-radius:50%; animation:product-loading-spin .8s linear infinite; }
@keyframes product-loading-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .product-loading-spinner { animation:none; } }