/* Approved direction C: bright native type, open bands, blue actions.
   Real product marks retain their own identities. No tinted data rows. */
.public-header { background: #fff; color: #303336; border-bottom: 1px solid #e7e9ed; backdrop-filter: none; }
.public-header .nav { width: calc(100% - 48px); max-width: 1380px; min-height: 66px; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
.public-header .corner { color: #202429; text-decoration: none; padding: 0; gap: 12px; }
.public-header .corner:hover { background: none; }
.public-header .word, .public-footer .word { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 650; letter-spacing: -.045em; }
.public-header .mark { width: 28px; height: 28px; }
.public-header .nav-links { gap: 20px; }
.public-header .nav-links a, .public-header .product-toggle { color: #303336; font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: none; border: 0; padding: 12px 5px; min-height: 44px; cursor: pointer; }
.public-header .nav-links .nav-signin { color: #2576eb; margin-left: clamp(24px, 11vw, 190px); }
.product-toggle { display: inline-flex; align-items: center; gap: 6px; }
.product-toggle .chev { width: 12px; height: 12px; }
.public-header .nav-links a:hover, .public-header .product-toggle:hover { color: #1559ba; background: none; }
.public-header .public-products { left: auto; right: 0; width: 460px; max-width: 100%; padding: 12px; border: 1px solid #dfe3e8; border-radius: 12px; background: #fff; box-shadow: 0 12px 36px #1823331a; }
.public-product-link { display: flex; align-items: center; gap: 16px; padding: 14px; color: #303336; border-radius: 6px; text-decoration: none; }
.public-product-link:hover { background: #f5f6f8; }
.public-product-link img { flex-shrink: 0; object-fit: contain; }
.public-product-link span { display: grid; gap: 4px; }
.public-product-link strong { font-size: 15px; font-weight: 600; }
.public-product-link small { color: #626b76; font-size: 13px; line-height: 1.45; }
.public-header .menu-btn { color: #303336; border-color: #dfe3e8; background: #fff; }
@media (min-width: 761px) {
  .public-header .nav-links { display: flex; position: static; flex-direction: row; width: auto; padding: 0; border: 0; box-shadow: none; }
  .public-header .nav-tools { display: none; }
}
.native-public { --bg: #fff; --text: #303336; --text-2: #555f6b; --text-3: #6c7581; --native-blue: #2576eb; background: #fff; color: #303336; font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color-scheme: light; }
.native-public h1, .native-public h2, .native-public h3 { font-family: inherit; color: #171c22; font-weight: 650; margin: 0; max-width: none; letter-spacing: -.035em; }
.native-public p, .native-public figure { margin: 0; }
.native-public a { color: var(--native-blue); text-decoration: none; }
.native-public a:hover { text-decoration: underline; }
.native-public a:focus-visible, .public-header a:focus-visible, .public-header button:focus-visible, .native-public button:focus-visible { outline: 3px solid #2576eb; outline-offset: 4px; }
.native-wrap { width: min(1120px, calc(100% - 160px)); margin-inline: auto; }
.native-hero { padding: 56px 0 4px; text-align: center; }
.native-hero h1 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.12; letter-spacing: -.045em; }
.native-lead { margin: 20px auto 16px !important; max-width: 760px; font-size: 20px; line-height: 1.5; color: #5c6571; }
.native-public .native-button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 10px 24px; border: 1px solid #2576eb; border-radius: 6px; background: #2576eb; color: #fff; font-size: 16px; font-weight: 550; cursor: pointer; text-decoration: none; }
.native-public .native-button:hover { background: #155fca; border-color: #155fca; text-decoration: none; }
.native-public .native-button:disabled { background: #f0f2f5; border-color: #dfe3e8; color: #596472; cursor: default; }
.native-cloud { padding: 46px 0 36px; background: #fafbfc; text-align: center; scroll-margin-top: 90px; }
.native-public h2 { font-size: 28px; line-height: 1.25; }
.native-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
.native-product-grid article { padding: 0 26px; position: relative; scroll-margin-top: 130px; }
.native-product-grid article + article::before { content: ''; position: absolute; left: 0; top: 36px; bottom: 14px; width: 1px; background: #e7e9ee; }
.native-product-icon { display: block; padding: 13px; margin: 0 auto 24px; background: #fff; border-radius: 16px; box-shadow: 0 1px 5px #18233314; }
.native-product-grid h3, .native-mac-product h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
.native-product-grid p { color: #505965; font-size: 14px; line-height: 1.55; margin: 14px 0 20px; }
.native-product-grid a, .native-mac-product a { font-size: 14px; font-weight: 500; display: inline-flex; gap: 7px; align-items: center; min-height: 36px; }
.native-mac { background: #f3f6fa; padding: 64px 0 36px; scroll-margin-top: 70px; }
.native-mac-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: center; gap: 32px; }
.native-sublead { color: #596370; font-size: 14px; line-height: 1.6; margin-top: 16px !important; }
.native-mac-product { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 22px; padding: 32px 0 20px; }
.native-mac-product + .native-mac-product { border-top: 1px solid #dfe3e8; padding-top: 24px; }
.native-mac-product img { width: 72px; height: 72px; object-fit: contain; }
.native-mac-product p { margin: 10px 0 8px; color: #596370; font-size: 13px; line-height: 1.5; }
.native-mac-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 22px #18233322; }
.native-mac-shot figcaption { text-align: center; color: #66717f; font-size: 13px; margin-top: 16px; }
.motion-control { border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; color: #526172; font: inherit; font-size: 12px; padding: 4px 10px; min-height: 32px; margin-left: 14px; cursor: pointer; }
.native-showcase { padding: 0 0 52px; background: #fff; scroll-margin-top: 90px; }
.native-showcase .native-wrap { width: min(1240px, calc(100% - 80px)); position: relative; }
.native-showcase-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; margin: 0 auto 20px; gap: 28px; }
.native-showcase-nav a { display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 82px; padding: 10px 8px 18px; color: #303336; font-size: 22px; font-weight: 550; border-bottom: 2px solid transparent; }
.native-showcase-nav a:hover { text-decoration: none; border-bottom-color: #dfe3e8; }
.native-showcase-nav a[aria-selected="true"] { border-bottom-color: var(--showcase-accent, #773fc0); color: #171c22; }
.native-showcase-nav img { display: inline-block; flex: none; width: 36px; height: 36px; }
.native-showcase-product { scroll-margin-top: 90px; margin-top: 76px; }
.native-showcase-product:first-of-type { margin-top: 0; }
.is-carousel .native-showcase-product { margin: 0; }
.native-showcase-product[hidden] { display: none; }
.native-showcase-head { flex: 1 1 310px; min-width: 0; }
.native-showcase-head h2 { display: flex; align-items: center; gap: 14px; font-size: 21px; line-height: 1.3; }
.native-showcase-head h2 img { display: inline-block; flex: none; width: 28px; height: 28px; }
.native-showcase-head p { max-width: 470px; margin: 8px 0 0 42px; font-size: 14px; color: #555f6b; }
.native-showcase-head > a { margin: 4px 0 0 42px; font-size: 14px; min-height: 36px; display: inline-flex; align-items: center; gap: 8px; }
.showcase-caption { align-items: center; min-height: 130px; padding-right: 180px; }
.showcase-demo-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.demo-data-label { display: inline-flex; gap: 8px; align-items: center; color: #555f6b; font-size: 13px; }
.demo-data-label > span { color: var(--showcase-accent, #773fc0); font-size: 22px; line-height: 1; }
.showcase-pagination { position: absolute; right: 0; bottom: 46px; display: flex; align-items: center; gap: 15px; color: #303336; }
.showcase-pagination[hidden] { display: none; }
.showcase-pagination button { display: grid; place-content: center; width: 44px; height: 44px; border: 1px solid #dfe3e8; border-radius: 50%; background: #fff; color: #303336; cursor: pointer; }
.showcase-pagination button:hover { background: #f5f6f8; }
.showcase-pagination span { min-width: 42px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.demo-viewport { position: relative; width: 100%; aspect-ratio: 1440 / 780; overflow: hidden; border: 1px solid #dfe3e8; border-radius: 12px; background: #f6f7f9; box-shadow: 0 16px 48px #1823330d; }
.demo-viewport > img { display: block; width: 100%; height: auto; }
.demo-viewport iframe { position: absolute; inset: 0 auto auto 0; width: 1440px; height: 780px; border: 0; transform-origin: top left; transform: scale(var(--demo-scale, 1)); opacity: 0; pointer-events: none; }
.demo-ready .demo-viewport iframe { opacity: 1; }
.demo-ready .demo-viewport > img { visibility: hidden; }
.demo-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px !important; color: #616b78; font-size: 13px; line-height: 1.5; text-align: left; }
.demo-caption strong { color: #303336; font-weight: 600; }
.demo-caption .motion-control { flex: none; margin: 0; min-height: 40px; font-size: 13px; padding: 6px 14px; }
.demo-caption .motion-control:disabled { cursor: default; }
.product-shot .demo-caption { padding-inline: 4px; }
.product-shot .demo-viewport > img { height: 100%; border-radius: 0; box-shadow: none; }
.product-shot figcaption.demo-caption { text-align: left; }
.native-readings { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: center; padding: 30px 0; margin: 20px auto 44px; border-block: 1px solid #e7e9ed; }
.native-readings dl { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 56px; margin: 0; }
.native-readings dt { font-size: 13px; color: #616b78; }
.native-readings dd { font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; color: #303336; margin: 4px 0 0; min-width: 105px; }
.native-readings footer { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; color: #616b78; font-size: 12px; }
@media (max-width: 760px) {
  .native-showcase .native-wrap { width: calc(100% - 40px); }
  .native-showcase-nav { gap: 8px; margin-bottom: 18px; }
  .native-showcase-nav a { font-size: 14px; gap: 8px; min-height: 64px; padding-inline: 0; }
  .native-showcase-nav img { width: 22px; height: 22px; }
  .native-showcase-head { flex-basis: 100%; }
  .native-showcase-head h2 { font-size: 20px !important; }
  .native-showcase-head p { font-size: 14px; }
  .native-showcase-head > a { margin-top: 4px; }
  .native-showcase-head h2 img { width: 28px; height: 28px; }
  .native-showcase-product { margin-top: 56px; }
  .showcase-caption { padding: 0; min-height: 0; }
  .showcase-demo-controls { padding-right: 150px; min-height: 48px; }
  .showcase-pagination { bottom: 2px; gap: 8px; }
  .demo-viewport { border-radius: 7px; }
  .demo-caption { font-size: 12px; }
  .native-readings { gap: 18px; }
  .native-readings dl { gap: 16px; }
  .native-readings dd { font-size: 24px; min-width: 78px; }
}
.public-footer { padding: 28px 0 20px; background: #fff; color: #303336; border-top: 1px solid #e7e9ed; }
.public-footer .container { width: min(1120px, calc(100% - 160px)); }
.public-footer .footer-grid { display: grid; grid-template-columns: .7fr 1fr 1.2fr; gap: 44px; }
.public-footer .footer-grid > :first-child { grid-column: 3; grid-row: 1; justify-self: end; padding-top: 15px; }
.public-footer .footer-grid > :nth-child(2) { grid-column: 1; grid-row: 1; }
.public-footer .footer-grid > :nth-child(3) { grid-column: 2; grid-row: 1; border-left: 1px solid #e7e9ed; padding-left: 44px; }
.native-public .public-footer h2, .public-footer h2 { color: #303336; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 650; line-height: 1.5; text-transform: none; letter-spacing: 0; margin: 0 0 3px; }
.public-footer ul { display: block; list-style: none; margin: 0; padding: 0; }
.public-footer li { margin: 4px 0; padding: 0; line-height: 1.5; }
.native-public .public-footer li a, .public-footer li a { color: #2576eb; font-size: 13px; }
.public-footer .brand { color: #202429; gap: 12px; }
.public-footer p { color: #6c7581; font-size: 14px; line-height: 1.5; margin-top: 16px; }
.public-footer .footer-base { margin-top: 20px; border: 0; padding: 0; color: #737c88; font-size: 11px; }
@media (min-width: 1400px) { .native-hero { padding-block: 64px 12px; } .native-cloud { padding-block: 56px 48px; } .native-mac { padding-block: 72px 52px; } }
@media (max-width: 900px) {
  .native-wrap, .public-footer .container { width: calc(100% - 72px); }
  .public-header .nav-links { gap: 12px; } .public-header .nav-links .nav-signin { margin-left: 12px; }
  .native-hero { padding: 56px 0 24px; } .native-hero h1 { font-size: 44px; }
  .native-mac-grid { grid-template-columns: 1fr 1.2fr; gap: 24px; }
  .native-mac-product { gap: 14px; grid-template-columns: 56px 1fr; } .native-mac-product img { width: 56px; height: 56px; }
  .public-footer .footer-grid { gap: 24px; } .public-footer .footer-grid > :nth-child(3) { padding-left: 24px; }
  .public-footer .word { font-size: 13px; }
}
@media (max-width: 760px) {
  .public-header .nav { min-height: 64px; width: calc(100% - 32px); }
  .public-header .corner .word { display: inline; font-size: 14px; }
  .public-header .nav-links { background: #fff; border-color: #e7e9ed; gap: 4px; }
  .public-header .nav-links a, .public-header .product-toggle { width: 100%; justify-content: flex-start; padding: 12px 14px; margin: 0 !important; text-align: left; }
  .public-header .public-products { top: 230px; max-height: calc(100dvh - 310px); }
  .native-wrap, .public-footer .container { width: calc(100% - 40px); }
  .native-hero { padding: 44px 0 20px; } .native-hero h1 { font-size: clamp(34px, 7.8vw, 48px); }
  .native-lead { font-size: 18px; } .desktop-break { display: none; }
  .native-cloud { padding: 40px 0 20px; } .native-public h2 { font-size: 27px; }
  .native-product-grid { grid-template-columns: 1fr; margin-top: 20px; }
  .native-product-grid article { padding: 24px 10px; }
  .native-product-grid article + article::before { top: 0; bottom: auto; left: 20%; width: 60%; height: 1px; }
  .native-product-icon { margin-bottom: 16px; width: 66px; height: 66px; }
  .native-product-grid p { margin: 10px 0; }
  .native-mac { padding: 48px 0 32px; } .native-mac-grid { grid-template-columns: 1fr; gap: 32px; }
  .native-mac-product { grid-template-columns: 64px 1fr; gap: 20px; } .native-mac-product img { width: 64px; height: 64px; }
  .public-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .public-footer .footer-grid > :first-child { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .public-footer .word { font-size: 16px; }
}