/* Proposal layout: grouped, all-visible desktop mega-menu inspired by Stripe's scan pattern.
   Content, logo and Figma default tokens remain local and independently editable. */
.nav-trigger,.nav-direct{font-size:16px;font-weight:500}
.mega-inner--all{display:block;min-height:0;max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;padding:24px 40px 18px}
.mega-utility-links{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px;margin-top:22px;padding-top:12px;border-top:1px solid var(--figma-border-primary)}
.mega-text-link{border:0;background:transparent;padding:0;line-height:1.5;color:var(--figma-text-accent);font-size:14px;font-weight:500;text-align:left}
.mega-text-link:hover{text-decoration:underline;text-underline-offset:3px}
.mega-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;align-items:start}
.mega-columns--resources{grid-template-columns:repeat(2,minmax(0,1fr));max-width:790px;gap:42px}
.mega-column{min-width:0;display:grid;gap:22px;align-content:start}
.mega-list-group{min-width:0}
.mega-list-group h3{margin:0 0 9px;color:var(--figma-text-primary);font-size:15px;font-weight:600;line-height:1.45}
.mega-list-items{display:grid;gap:1px}
.mega-list-items .item-button{width:100%;min-height:34px;border:0;padding:5px 0;color:var(--figma-text-body);font-size:15px;font-weight:500;line-height:1.45;justify-content:flex-start}
.mega-list-items .item-button:hover{color:var(--figma-text-accent)}
.external-arrow{display:inline-block;margin-left:6px;color:var(--figma-text-accent);font-size:12px;line-height:1}
.mega-list-sub{margin-top:13px;padding-top:11px;border-top:1px solid var(--figma-border-primary)}
.mega-list-sub h4{font-size:13px;font-weight:600;color:var(--figma-text-secondary);margin:0 0 10px}
.mega-list-sub .subgroup-items{gap:6px}
.mega-list-sub .pill-button{font-size:13px;padding:5px 8px;border:1px solid var(--figma-border-primary);border-radius:var(--figma-radius-pill);background:#fff;color:var(--figma-text-body)}
.mega-list-sub .pill-button:hover{color:var(--figma-text-accent);border-color:var(--figma-text-accent)}
.mega-topics{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-top:23px;padding:13px 0 0;border-top:1px solid var(--figma-border-primary)}
.mega-utility-links+.mega-topics{margin-top:8px;padding-top:0;border-top:0}
.mega-topics>span{color:var(--figma-text-secondary);font-size:12px;font-weight:600}
.mega-topic-link{border:0;background:transparent;padding:6px 0;color:var(--figma-text-body);font-size:13px;font-weight:400}
.mega-topic-link:hover{color:var(--figma-text-accent)}
@media(max-width:1050px){.mega-inner--all{padding:22px 25px 18px}.mega-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.mega-columns--resources{max-width:none}}
@media(max-width:780px){.mega-inner--mobile{display:block}.mega-inner--mobile .extra-button{border:0;background:transparent;padding:6px 0;color:var(--figma-text-accent);font-size:13px;font-weight:500}.topic-aside .topic-card{font-size:15px;font-weight:500}.topic-aside .topic-card::after{content:none}}

/* Supplementary navigation: separated from the category list. */
.nav-trigger:hover,.nav-trigger.active,.nav-direct:hover{border-bottom-color:transparent}
.mega-list-items .item-button[data-external]{gap:3px;justify-content:flex-start}
.external-arrow{margin-left:0}
.mega-extras-panel{margin-top:24px;padding:16px 20px;background:var(--figma-bg-primary);border:1px solid var(--figma-border-primary);border-radius:var(--figma-radius-card)}
.mega-extras-panel .mega-utility-links{margin:0;padding:0;border:0}
.mega-guide{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mega-utility-links+.mega-guide{margin-top:14px;padding-top:16px;border-top:1px solid var(--figma-border-primary)}
.mega-guide strong{display:block;color:var(--figma-text-primary);font-size:15px;font-weight:600;line-height:1.45}
.mega-guide p>span{display:block;color:var(--figma-text-secondary);font-size:13px;font-weight:400;margin-top:3px}
.mega-guide .mega-text-link{white-space:nowrap}
/* Resources: layout follows Figma node 12649:89973 (3 list columns + tinted topic panel on the right). */
.mega-resource-layout{display:grid;grid-template-columns:minmax(0,1fr) 500px;align-items:start}
.mega-resource-layout .mega-columns--resources{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:24px;padding-right:24px}
.resource-topics{margin:-24px calc(-1 * var(--demo-inner-padding)) -18px 0;padding:32px calc(var(--demo-inner-padding) + 20px) 32px 20px;align-self:stretch}
.resource-topics-label{margin:0 0 12px 12px;color:var(--figma-text-placeholder,#9AA4B2);font-size:14px;font-weight:500}
.topic-rows{display:grid;gap:8px}
.topic-row{display:grid;grid-template-columns:144px minmax(0,1fr);gap:24px;align-items:start;width:100%;padding:12px;border:0;border-radius:var(--figma-radius-control);background:transparent;text-align:left}
.topic-row:hover{background:#fff}
.topic-row img,.topic-row-image{display:block;width:144px;height:80px;border-radius:var(--figma-radius-control);object-fit:cover;background:var(--figma-border-primary)}
.topic-row-copy strong{display:block;color:var(--figma-text-primary);font-size:15px;font-weight:500;line-height:1.3}
.topic-row-copy span{display:block;margin-top:6px;color:var(--figma-text-body);font-size:14px;font-weight:400;line-height:1.5}
.topic-row:hover strong{color:var(--figma-text-accent)}

@media(min-width:1051px){.mega-panel[data-menu="resources"]{background:linear-gradient(to left,var(--figma-bg-primary) calc(max(0px,(100% - var(--figma-container))/2) + 500px + var(--demo-inner-padding)),#fff 0)}}
@media(max-width:1050px){.mega-resource-layout{grid-template-columns:1fr}.mega-resource-layout .mega-columns--resources{padding-right:0}.resource-topics{margin:24px 0 0;padding:16px 8px 12px;background:var(--figma-bg-primary);border-radius:var(--figma-radius-card)}}
@media(max-width:780px){.mega-inner--mobile .resource-topics{margin-top:14px;padding:14px 6px 10px}.mega-inner--mobile .topic-row{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:10px}.mega-inner--mobile .topic-row img,.mega-inner--mobile .topic-row-image{width:96px;height:56px}.mega-inner--mobile .mega-extras-panel{margin-top:14px}.mega-inner--mobile .mega-guide{display:block}.mega-inner--mobile .mega-guide .mega-text-link{margin-top:8px}}

/* Round 6: divider-only bottom row, text links with chevron, product supporting text. */
.mega-extras-panel{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin-top:24px;padding:16px 0 0;background:transparent;border:0;border-top:1px solid var(--figma-border-primary);border-radius:0}
.mega-extras-panel .mega-utility-links{display:flex;flex-wrap:wrap;gap:4px 24px}
.mega-utility-links+.mega-guide{margin-top:0;padding-top:0;border-top:0}
.mega-guide{display:flex;align-items:center;gap:16px;margin-left:auto}
.mega-guide p{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0}
.mega-guide strong{display:inline;font-size:15px;font-weight:600}
.mega-guide p>span{display:inline;margin-top:0;font-size:14px}
.mega-text-link,.mega-inner--mobile .extra-button{display:inline-flex;align-items:center;gap:2px}
.mega-text-link:hover,.mega-text-link:focus-visible{text-decoration:none;color:var(--figma-button-hover)}
.link-chevron{width:14px;height:14px;flex:0 0 auto;transition:transform .15s ease}
.mega-text-link:hover .link-chevron,.extra-button:hover .link-chevron{transform:translateX(2px)}
.item-name{display:inline-flex;align-items:center;gap:3px}
.item-button.has-desc{align-items:flex-start;min-height:0;padding:5px 0}
.item-text{display:grid;gap:1px;text-align:left}
.item-desc{color:var(--figma-text-secondary);font-size:13px;font-weight:400;line-height:1.45}
.item-button.has-desc:hover .item-desc{color:var(--figma-text-body)}
.mega-columns--products .mega-column{gap:16px}
.mega-columns--products+.mega-extras-panel{margin-top:18px}
.resource-topics-label{margin:0 0 9px 12px;color:var(--figma-text-primary);font-size:15px;font-weight:600;line-height:1.45}
@media(max-width:780px){.mega-inner--mobile .mega-extras-panel{display:block}.mega-inner--mobile .mega-guide{display:block}.mega-inner--mobile .mega-guide p{display:block}.mega-inner--mobile .mega-guide p>span{display:block;margin-top:2px}.mega-inner--mobile .mega-guide .mega-text-link{margin-top:6px}}

/* Round 7: left-aligned bottom row (guide first), one colour for every text button. */
.mega-extras-panel{justify-content:flex-start;gap:12px 28px}
.mega-guide{margin-left:0;gap:10px}
.mega-guide+.mega-utility-links{padding-left:28px;border-left:1px solid var(--figma-border-primary)}
.mega-guide strong{font-weight:500;color:var(--figma-text-body)}
.mega-text-link,.mega-inner--mobile .extra-button,.mega-inner--mobile .mega-text-link{color:var(--figma-text-accent);font-size:14px;font-weight:500}
.mega-text-link:hover,.mega-text-link:focus-visible,.mega-inner--mobile .extra-button:hover{color:var(--figma-text-accent);text-decoration:none}
@media(max-width:780px){.mega-guide+.mega-utility-links{padding-left:0;border-left:0;margin-top:10px}}

/* Round 8: links pushed right without divider; product list readability (contrast + group rhythm). */
.mega-guide+.mega-utility-links{margin-left:auto;padding-left:0;border-left:0}
.mega-guide .mega-text-link,.mega-utility-links .mega-text-link{color:var(--figma-text-accent);font-size:14px;font-weight:500;line-height:1.5;padding:0}
.external-arrow{color:var(--figma-primary-500)}
.item-button.has-desc .item-name{color:var(--figma-text-primary);font-weight:500}
.item-button.has-desc:hover .item-name{color:var(--figma-text-accent)}
.item-button.has-desc .item-desc,.item-button.has-desc:hover .item-desc{color:var(--figma-text-secondary);font-size:13px;line-height:1.4}
.item-button.has-desc{padding:3px 0}
.mega-list-items .item-button.has-desc+.item-button.has-desc{margin-top:4px}
.mega-columns--products .mega-column{gap:28px}
.mega-columns--products .mega-list-group h3{margin-bottom:8px}
@media(max-width:780px){.mega-guide+.mega-utility-links{margin-left:0}}

/* Align the topic heading with the list-column headings. */
@media(min-width:1051px){.resource-topics{padding-top:24px}}

/* Round 9: guide prompt reads as body copy; wider primary buttons. */
.mega-guide strong{font-size:14px;font-weight:400;color:var(--figma-text-body)}

/* Round 10: section headings use the same weight as their links; colour carries the distinction. */
.mega-list-group h3,.resource-topics-label{font-weight:400}
.mega-columns--products .mega-list-group h3{font-weight:500}

/* Round 11: Products = category rail + detail (Squarespace-style). */
.product-browser{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
.product-rail{display:grid;gap:2px;align-content:start}
.product-rail-item{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:var(--figma-radius-control);color:var(--figma-text-body);font-size:15px;font-weight:500;line-height:1.45;transition:background .15s ease,color .15s ease}
.product-rail-item:hover{background:var(--figma-bg-primary);color:var(--figma-text-primary)}
.product-rail-item.active{background:var(--figma-bg-primary);color:var(--figma-text-accent);font-weight:500}
.product-detail{min-width:0;padding-top:4px}
.product-detail-head{margin-bottom:20px}
.product-detail-head h3{margin:0 0 6px;color:var(--figma-text-primary);font-size:18px;font-weight:500;line-height:1.4}
.product-detail-head p{margin:0;color:var(--figma-text-secondary);font-size:14px;line-height:1.55}
.product-detail-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 40px}
.product-detail-items .item-button.has-desc+.item-button.has-desc{margin-top:0}
.mega-inner--products .mega-extras-panel{margin-top:24px}
@media(max-width:1050px){.product-browser{grid-template-columns:200px minmax(0,1fr);gap:28px}.product-detail-items{gap:12px 28px}}
/* Light-gray section headings (text-secondary keeps readable contrast). */
.mega-list-group h3,.resource-topics-label,.mega-columns--products .mega-list-group h3{color:var(--figma-text-secondary);font-size:14px;font-weight:400}

/* Round 12: make the rail read as a clickable menu (divider + chevron on hover/active). */
.product-browser{gap:0}
.product-rail{padding-right:20px;border-right:1px solid var(--figma-border-primary)}
.product-detail{padding-left:40px}
.product-rail-item{display:flex;align-items:center;justify-content:space-between;gap:8px}
.product-rail-item .link-chevron{opacity:0;transition:opacity .15s ease,transform .15s ease}
.product-rail-item:hover .link-chevron,.product-rail-item.active .link-chevron{opacity:1}
.product-rail-item:hover .link-chevron{transform:translateX(2px)}
@media(max-width:1050px){.product-detail{padding-left:28px}}

/* Round 13: rail divider meets the bottom bar; category-specific links live in the detail panel. */
.product-browser{align-items:stretch}
.product-rail,.product-detail{padding-bottom:24px}
.mega-inner--products .mega-extras-panel{margin-top:0}
.product-detail-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:16px}

/* Round 14: contextual topic card inside related product categories. */
.product-topic{margin-top:24px;max-width:480px}
.product-topic h4{margin:0 0 8px;color:var(--figma-text-secondary);font-size:14px;font-weight:400}
.product-topic .topic-row{background:var(--figma-bg-primary)}
.product-topic .topic-row:hover{background:#EEF2F6}
@media(max-width:780px){.product-topic{margin-top:16px;max-width:none}.product-topic .topic-row{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:10px}.product-topic .topic-row img{width:96px;height:56px}}

/* Round 15 (updated): one link style across all menus (15px / 500 / text-primary); products only add a grey description line. */
.mega-list-items .item-button .item-name, .mega-list-items .item-button.has-desc .item-name{color:var(--figma-text-primary);font-size:15px;font-weight:500}
.mega-list-items .item-button:hover .item-name{color:var(--figma-text-accent)}

/* Round 16: Stripe-style bottom bar - prompt, then link blocks (title + short description). */
.mega-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 48px;margin-top:24px;padding-top:16px;border-top:1px solid var(--figma-border-primary)}
.mega-inner--products .mega-bar{margin-top:0}
.mega-bar-prompt{margin:0;color:var(--figma-text-body);font-size:14px;font-weight:400}
.mega-bar-links{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 48px}
.mega-bar-link{display:grid;gap:2px;border:0;background:transparent;padding:4px 0;text-align:left}
.mega-bar-title{display:inline-flex;align-items:center;gap:2px;color:var(--figma-text-accent);font-size:14px;font-weight:500;line-height:1.5}
.mega-bar-desc{color:var(--figma-text-secondary);font-size:13px;font-weight:400;line-height:1.45}
.mega-bar-link:hover .link-chevron{transform:translateX(2px)}
@media(max-width:780px){.mega-bar{display:block;margin-top:16px}.mega-bar-links{display:grid;gap:10px;margin-top:8px}}

.mega-bar{justify-content:space-between}
.mega-bar-links{margin-left:auto}
@media(max-width:780px){.mega-bar-links{margin-left:0}}

/* Round 17: Products = rail | list | fixed right column (tinted like Resources, Stripe "More"-style). */
.product-browser{grid-template-columns:240px minmax(0,1fr) 300px}
.product-rail{display:flex;flex-direction:column;gap:0}
.product-rail-more{margin-top:0;padding:0}
.product-detail{padding:4px 32px 24px 40px}
.product-detail-items{gap:12px 32px}
.product-aside{padding:0 0 24px 24px;display:grid;gap:20px;align-content:start}
@media(min-width:1051px){.mega-panel[data-menu="products"]{background:linear-gradient(to left,var(--figma-bg-primary) calc(max(0px,(100% - var(--figma-container))/2) + 300px + var(--demo-inner-padding)),#fff 0)}}
.guide-card{background:#fff;border-radius:var(--figma-radius-card);padding:16px 18px}
.guide-card h4,.feature-card h4{margin:0;color:var(--figma-text-primary);font-size:15px;font-weight:500;line-height:1.45}
.guide-card p,.feature-card p{margin:4px 0 6px;color:var(--figma-text-secondary);font-size:13px;line-height:1.5}
.feature-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--figma-radius-control);margin-bottom:12px;background:var(--figma-border-primary)}
.feature-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1050px){.product-browser{grid-template-columns:200px minmax(0,1fr) 240px}.product-detail{padding:4px 24px 24px 28px}.product-detail-items{grid-template-columns:1fr}.product-aside{padding:16px;background:var(--figma-bg-primary);border-radius:var(--figma-radius-card);align-self:start}}

/* Keep the right column within the rail height so the menu does not resize while switching. */
.feature-card img{aspect-ratio:2/1}
.feature-card h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feature-card p{-webkit-line-clamp:2}

/* Round 18: guide prompt and link on one line; other links are plain text links. */
/* ── 對齊基準：文字＋連結並排 → baseline ──
   參考＝Stripe 選單底部列以文字基線對齊同一列的說明文字與連結
   調整＝align-items: baseline（原為 center）
   理由=center 對齊的是「方框中心」，不同字重（400／500）或行高時兩段字看起來
        一高一低；baseline 對齊字底，中文的字面填滿 em 方框，底緣齊平才讀得出
        「這句是說明、那句是動作」的從屬關係。                       */
.mega-bar-guide{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.mega-bar-guide .mega-bar-prompt{color:var(--figma-text-body);font-size:14px;font-weight:400}

/* Round 19: Guide me card on light brand tint (Primary 50). */
.guide-card{background:var(--figma-primary-50)}
.guide-card p{color:var(--figma-text-body)}

/* Round 20: category-level links sit top-right of the detail header. */
.product-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.product-detail-title{min-width:0}
.product-detail-head .product-detail-links{margin-top:0;flex:0 0 auto}
.product-detail-head .product-detail-links .mega-text-link{padding-top:2px}

/* Round 21: rail items fill the rail width. */
.product-rail-list{display:grid;gap:0}
.product-rail-item{width:100%;box-sizing:border-box}

/* Round 22: more air between the category intro and the list; slightly wider product columns so descriptions stay on one line. */
.product-detail-head{margin-bottom:32px}
.product-detail{padding-right:24px}
.product-detail-items{column-gap:24px}

/* Round 23: rule under the category intro; full-height rail divider; quiet rail states (colour only). */
.product-detail-head{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--figma-border-primary)}
@media(min-width:1051px){.mega-inner--products .product-rail{margin:-24px 0 -18px;padding-top:24px;padding-bottom:42px}}
.product-rail-item,.product-rail-item:hover,.product-rail-item.active{background:transparent}
.product-rail-item:hover{color:var(--figma-text-primary)}
.product-rail-item.active{color:var(--figma-text-accent);font-weight:500}

/* Round 24: card radius everywhere for cards/images; whole cards clickable; chevrons appear on hover only. */
.guide-card,.feature-card,.topic-row,.topic-row img,.topic-row-image,.feature-card img,.product-topic .topic-row img{border-radius:var(--figma-radius-card)}
.guide-card,.feature-card{display:block;width:100%;border:0;text-align:left;cursor:pointer}
.feature-card{background:transparent;padding:0}
.guide-card{padding:16px 18px}
.card-title{display:block;color:var(--figma-text-primary);font-size:15px;font-weight:500;line-height:1.45}
.card-text{display:block;margin:4px 0 6px;color:var(--figma-text-secondary);font-size:13px;line-height:1.5}
.guide-card .card-text{color:var(--figma-text-body)}
.feature-card .card-title,.feature-card .card-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-cta{display:inline-flex;align-items:center;gap:2px;color:var(--figma-text-accent);font-size:14px;font-weight:500;line-height:1.5}
.feature-card:hover .card-title,.guide-card:hover .card-title{color:var(--figma-text-accent)}
.guide-card:hover{background:#CDF1FE}
/* Chevrons: hidden until hover/focus; space reserved so nothing shifts. */
.link-chevron{opacity:0;transform:translateX(-3px)}
.mega-text-link:hover .link-chevron,.mega-text-link:focus-visible .link-chevron,.extra-button:hover .link-chevron,.guide-card:hover .link-chevron,.feature-card:hover .link-chevron,.guide-card:focus-visible .link-chevron,.feature-card:focus-visible .link-chevron{opacity:1;transform:translateX(1px)}
/* "View all" in the rail matches the category items. */
.product-rail-more{margin-top:0;padding:0}
.product-rail-link{color:var(--figma-text-body)}

/* Round 25: one blue accent per menu (Guide me). Other text links are neutral and turn blue on hover. */
.mega-text-link,.mega-guide .mega-text-link,.mega-utility-links .mega-text-link,.mega-inner--mobile .extra-button,.mega-inner--mobile .mega-text-link{color:var(--figma-text-primary)}
.mega-text-link:hover,.mega-text-link:focus-visible,.mega-inner--mobile .extra-button:hover{color:var(--figma-text-accent)}
.mega-bar-guide .mega-text-link,.guide-card .card-cta{color:var(--figma-text-accent)}
.mega-bar-guide .mega-text-link:hover{color:var(--figma-button-hover)}

/* Round 26: one vertical card pattern; cards show a chevron on hover (no colour change); only nav links turn blue. */
@media(min-width:781px){
  .resource-topics .topic-rows{grid-template-columns:1fr 1fr;gap:20px}
  .resource-topics .topic-row{grid-template-columns:1fr;gap:12px;padding:0}
  .resource-topics .topic-row img{width:100%;height:auto;aspect-ratio:2/1}
  .resource-topics .topic-row-copy span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .resource-topics-label{margin-left:0}
}
.topic-row,.topic-row:hover,.resource-topics .topic-row:hover,.product-topic .topic-row:hover{background:transparent}
.product-topic .topic-row{background:var(--figma-bg-primary)}
.product-topic .topic-row:hover{background:var(--figma-bg-primary)}
.topic-row:hover strong,.topic-row-copy strong,.feature-card:hover .card-title,.guide-card:hover .card-title{color:var(--figma-text-primary)}
.guide-card:hover{background:var(--figma-primary-50)}
.topic-row-copy strong,.card-title{display:inline}
.feature-card .card-title{display:-webkit-box}
.topic-row-copy strong .link-chevron,.card-title .link-chevron{display:inline-block;vertical-align:-2px;margin-left:2px}
.topic-row:hover .link-chevron,.topic-row:focus-visible .link-chevron,.product-rail-link:hover .link-chevron,.product-rail-link:focus-visible .link-chevron{opacity:1;transform:translateX(1px)}
/* Rail "view all": same hover as category items + chevron. */
.product-rail-link{justify-content:flex-start;gap:2px}
.product-rail-link:hover{color:var(--figma-text-primary)}
/* Right column: featured on top, Guide me pinned to the bottom. */
.product-aside{display:flex;flex-direction:column;gap:20px}
.product-aside .guide-card{margin-top:auto}
.aside-label{margin:0 0 8px;color:var(--figma-text-secondary);font-size:14px;font-weight:400;line-height:1.45}
.product-aside{padding-top:4px}

/* Round 27: white Guide me card with a hairline border; blue "view all industries"; chevrons nudged 1px to the text's optical centre. */
.guide-card,.guide-card:hover,.product-aside .guide-card{background:#fff;border:1px solid var(--figma-border-primary)}
.guide-card .card-text{color:var(--figma-text-secondary)}
.mega-bar--solutions .mega-bar-links .mega-text-link{color:var(--figma-text-accent)}
.mega-bar--solutions .mega-bar-links .mega-text-link:hover{color:var(--figma-button-hover)}
.link-chevron{transform:translate(-3px,1px)}
.mega-text-link:hover .link-chevron,.mega-text-link:focus-visible .link-chevron,.extra-button:hover .link-chevron,.guide-card:hover .link-chevron,.feature-card:hover .link-chevron,.guide-card:focus-visible .link-chevron,.feature-card:focus-visible .link-chevron,.topic-row:hover .link-chevron,.topic-row:focus-visible .link-chevron,.product-rail-link:hover .link-chevron,.product-rail-link:focus-visible .link-chevron{transform:translate(1px,1px)}
.topic-row-copy strong .link-chevron,.card-title .link-chevron{vertical-align:-3px}

/* Round 28: label-to-content spacing matches the list columns; blue links keep their colour on hover (chevron is the cue);
   "compare" link inline after the category intro; 3:2 card images (homepage card ratio) sit better with the 16px radius. */
.products-topic .aside-label,.resource-topics-label{margin-bottom:20px}
.mega-bar-guide .mega-text-link:hover,.mega-bar-guide .mega-text-link:focus-visible,.mega-bar--solutions .mega-bar-links .mega-text-link:hover,.mega-bar--solutions .mega-bar-links .mega-text-link:focus-visible{color:var(--figma-text-accent)}
.inline-link{display:inline-flex;vertical-align:baseline;padding:0;font-size:14px;line-height:1.55;color:var(--figma-text-primary)}
.inline-link .link-chevron{opacity:1;transform:translate(1px,1px)}
.inline-link:hover{color:var(--figma-text-accent)}
.inline-link:hover .link-chevron{transform:translate(3px,1px)}
.feature-card img{aspect-ratio:3/2}
@media(min-width:781px){.resource-topics .topic-row img{aspect-ratio:3/2}}
.mega-inner--mobile .topic-row{grid-template-columns:84px minmax(0,1fr)}
.mega-inner--mobile .topic-row img,.mega-inner--mobile .product-topic .topic-row img{width:84px;height:56px;border-radius:var(--figma-radius-control)}

/* 16:10 keeps the comfortable card proportion while the right column fits the rail height. */
.feature-card img{aspect-ratio:16/10}
@media(min-width:781px){.resource-topics .topic-row img{aspect-ratio:16/10}}
.guide-card{padding:14px 18px}

/* Round 29: roomier layout; card-title chevron centred with the title; finer 8px image corners with 16:9 images. */
.card-title,.topic-row-copy strong{display:flex;align-items:center;gap:2px}
.feature-card .card-title{display:flex}
.feature-card .card-title-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-title .link-chevron,.topic-row-copy strong .link-chevron{vertical-align:baseline;margin-left:0;flex:0 0 auto}
.feature-card img,.resource-topics .topic-row img,.topic-row img{border-radius:var(--figma-radius-control)}
.feature-card img{aspect-ratio:16/9}
@media(min-width:781px){.resource-topics .topic-row img{aspect-ratio:16/9}}
/* Space */
.mega-inner--all{padding:32px 40px 28px}
@media(min-width:1051px){.mega-inner--products .product-rail{margin:-32px 0 -28px;padding-top:32px;padding-bottom:52px}}
.product-rail-item{padding:10px 12px}
.product-detail-head{margin-bottom:28px;padding-bottom:28px}
.product-detail-head h3{font-size:22px;line-height:1.35;margin-bottom:8px}
.product-detail-head p{font-size:15px;line-height:1.6}
.inline-link{font-size:15px;line-height:1.6}
.product-detail-items{row-gap:16px}
.mega-columns{gap:40px}
.mega-column{gap:28px}
.mega-bar{margin-top:32px;padding-top:20px}
.mega-resource-layout .mega-columns--resources{gap:32px}
@media(min-width:1051px){.resource-topics{margin:-32px calc(-1 * var(--demo-inner-padding)) -28px 0;padding-top:32px;padding-bottom:28px}}

/* Round 30: inline "compare" is a plain blue text link (chevron on hover); Guide me listed as text (no box) aligned with the topic card. */
.inline-link{color:var(--figma-text-accent)}
.inline-link:hover{color:var(--figma-text-accent)}
.inline-link .link-chevron{opacity:0;transform:translate(-3px,1px)}
.inline-link:hover .link-chevron,.inline-link:focus-visible .link-chevron{opacity:1;transform:translate(1px,1px)}
.guide-card,.guide-card:hover,.product-aside .guide-card{background:transparent;border:0;border-radius:0;padding:0}

/* Same bottom breathing room as Solutions (inner padding only). */
.product-detail,.product-aside{padding-bottom:0}
@media(min-width:1051px){.mega-inner--products .product-rail{padding-bottom:28px}}

/* Round 31: Resources topic cards use the same card as Products; "view all topics" is a blue link with more space above. */
@media(min-width:781px){.resource-topics .topic-rows{grid-template-columns:1fr 1fr;gap:24px}}
.resource-topics .feature-card img{margin-bottom:12px}

/* Shared text-link primitive: spacing belongs to the surrounding layout, never link padding. */
#mega-panel .text-link{display:inline-flex;align-items:center;justify-content:flex-start;gap:2px;padding:0;border:0;border-radius:0;background:transparent;min-height:0;width:auto;font-size:14px;font-weight:500;line-height:1.5;letter-spacing:normal;color:var(--figma-text-accent);text-align:left;text-decoration:none}
#mega-panel .text-link .item-name{font:inherit;color:inherit;line-height:inherit}
#mega-panel .text-link:hover,#mega-panel .text-link:focus-visible{color:var(--figma-text-accent);background:transparent;text-decoration:none}
#mega-panel .text-link>.link-chevron{width:14px;height:14px;margin:0;flex:0 0 auto;opacity:0;transform:translate(-3px,1px);transition:opacity .15s ease,transform .15s ease}
#mega-panel .text-link:hover>.link-chevron,#mega-panel .text-link:focus-visible>.link-chevron,#mega-panel .guide-card:hover .text-link>.link-chevron,#mega-panel .guide-card:focus-visible .text-link>.link-chevron{opacity:1;transform:translate(1px,1px)}

/* Topic footer owns spacing; the link itself has neither padding nor offset. */
.resource-topics-footer{margin-top:24px;display:flex;align-items:flex-start}
.resource-topics-footer>.mega-text-link{margin:0;padding:0}

/* Product overview is a destination, not a category switch: permanent adjacent chevron. */
#mega-panel [data-select="瀏覽所有產品"]{justify-content:flex-start;align-items:center;gap:4px}
#mega-panel [data-select="瀏覽所有產品"]>.link-chevron{opacity:1;transform:translate(0,1px)}
#mega-panel [data-select="瀏覽所有產品"]:hover>.link-chevron,#mega-panel [data-select="瀏覽所有產品"]:focus-visible>.link-chevron{opacity:1;transform:translate(2px,1px)}

/* Guide assistance is supporting navigation, not a clickable content card. */
.product-aside .guide-assist{margin-top:auto}
.guide-assist{display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:8px var(--menu-copy-link-gap);padding:0;border:0;background:transparent}
.guide-assist-prompt{margin:0;color:var(--figma-text-secondary);font-size:14px;font-weight:400;line-height:1.5}

/* Consistent spacing between supporting copy and its action; spacing belongs to the row. */
#mega-panel{--menu-copy-link-gap:12px}
.product-detail-intro{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px var(--menu-copy-link-gap)}
.mega-bar-guide{column-gap:var(--menu-copy-link-gap)}
.guide-assist-prompt,.guide-assist>.text-link,.product-detail-intro>.inline-link{flex-shrink:0}

/* Motion viewport. Desktop layers own their backgrounds so they travel with their content. */
@media(min-width:781px){
  #mega-panel{background:#fff}
  .menu-motion-layer{position:relative;width:100%;background:#fff}
  #mega-panel.menu-is-animating{overflow:hidden;will-change:height}
  .menu-is-animating>.menu-motion-layer{will-change:transform,opacity}
  .menu-motion-layer.menu-motion-exit{position:absolute;inset:0 0 auto;pointer-events:none;user-select:none}
}
@media(min-width:1051px){
  .menu-motion-layer[data-menu="products"]{background:linear-gradient(to left,var(--figma-bg-primary) calc(max(0px,(100% - var(--figma-container))/2) + 300px + var(--demo-inner-padding)),#fff 0)}
  .menu-motion-layer[data-menu="resources"]{background:linear-gradient(to left,var(--figma-bg-primary) calc(max(0px,(100% - var(--figma-container))/2) + 500px + var(--demo-inner-padding)),#fff 0)}
}
@media(prefers-reduced-motion:reduce){
  #mega-panel *,#header-zone .chevron{transition:none!important;animation:none!important}
}

/* Compact topic titles follow the same medium-weight clickable text rule. */
.topic-row-copy strong .card-title-text{font-weight:500}

/* One shared inline gutter for every page inner; vertical spacing is unchanged. */
:root{--demo-inner-padding:32px}
.header-inner,.mega-inner,.hero-inner,.section-inner{padding-inline:var(--demo-inner-padding)}
.below-fold{padding-inline:0}
@media(max-width:780px){:root{--demo-inner-padding:16px}}

/* Outward arrow in menus: same line icon as the footer, inherits the link colour. */
.external-arrow.ext-arrow{display:inline-block;flex:none;width:13px;height:13px;margin-left:2px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:inherit;font-size:0}

.external-arrow.ext-arrow{width:16px;height:16px;margin-left:1px;stroke-width:1.6}

.external-arrow.ext-arrow{width:15px;height:15px}