/* Devices use the same quiet technical register as the approved globe hero. */
#platforms.platform-section{
  background:var(--bg);
  border-block:0;
  overflow:hidden;
}
#platforms .section-heading.centered{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.6fr);
  align-items:end;
  column-gap:70px;
  max-width:none;
  text-align:start;
}
#platforms .section-heading>.eyebrow{display:none}
#platforms .section-heading h2{
  font-size:clamp(44px,4.45vw,64px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
  margin:0;
}
#platforms .section-heading h2 span{color:var(--accent)}
#platforms .section-heading>p:not(.eyebrow){
  font-size:15px;
  color:#aeb5b8;
  line-height:1.85;
  max-width:260px;
  margin:0 0 5px;
}
#platforms .platform-layout{margin-top:48px}
#platforms .platform-picker{
  border:0;
  border-bottom:1px solid #ffffff18;
  gap:30px;
}
#platforms .device-tab{
  padding:19px 0 21px;
  gap:11px;
  min-height:80px;
  color:#9fa8ad;
  background:transparent;
}
#platforms .device-tab:not(:last-child){border-inline-end:0}
#platforms .device-tab:hover,
#platforms .device-tab[aria-pressed=true]{background:transparent;color:var(--ink)}
#platforms .device-tab:after{
  inset-inline:0 auto;
  width:72px;
  background:var(--accent);
  height:2px;
  transform-origin:0 center;
}
[dir=rtl] #platforms .device-tab:after{
  inset-inline:0 auto;
  transform-origin:100% center;
}
#platforms .device-tab strong{font-size:16px;font-weight:400}
#platforms .device-tab small{font-size:10px;color:var(--muted);margin-top:6px}
#platforms .device-tab-symbol{width:29px;height:30px}
#platforms .device-tab-symbol .icon{width:23px;height:23px}
#platforms .device-tab[aria-pressed=true] strong{color:#cebdff}
#platforms .device-tab>.icon{margin-inline-end:12px}
#platforms .device-scene{
  min-height:480px;
  gap:clamp(34px,5.3vw,76px);
  padding-block:40px 10px;
  padding-inline:0;
}
#platforms .device-preview{
  isolation:isolate;
  min-width:0;
}
#platforms .device-preview:before{
  content:'';
  position:absolute;
  inset:-21% -11%;
  z-index:-1;
  background:url('/assets/editorial-dots.svg') center/contain no-repeat;
  opacity:.6;
  pointer-events:none;
  transform:rotate(-9deg);
  mask-image:radial-gradient(ellipse,#000 32%,#000b 48%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse,#000 32%,#000b 48%,transparent 75%);
}
#platforms .device-phone-preview:before{inset:-15% -5%;opacity:.72;transform:rotate(9deg)}
#platforms .device-copy{max-width:370px}
#platforms .device-copy h3{
  font-size:34px;
  font-weight:400;
  line-height:1.23;
  letter-spacing:-.022em;
  color:var(--ink);
}
#platforms .device-copy>p{font-size:14px;line-height:1.85;color:#b0b8bc;margin-top:18px}
#platforms .device-task-steps{gap:18px;margin-top:24px}
#platforms .device-task-steps strong{font-size:13px;font-weight:400;color:#e0e5e4}
#platforms .device-task-steps small{font-size:11px;color:#adb6bb}
#platforms .device-task-steps li>span{color:var(--accent)}
#platforms .device-text-action{color:#cbb9ff;font-size:12px;margin-top:19px}
#platforms .device-text-action:hover{color:#eee7ff}
#platforms .device-scope-note{color:#9fa9ad;line-height:1.8}
#platforms .device-desktop-frame,
#platforms .device-browser-frame{
  background:#0b1012;
  border-color:#b9b1d34a;
  box-shadow:none;
}
#platforms .device-phone-frame{
  background:#0b1012;
  border-color:#697078;
  box-shadow:none;
}
#platforms .device-windowbar,
#platforms .device-browser-toolbar{background:#111719;border-color:#ffffff14}
#platforms .device-windowdots i{background:#a096b7}
#platforms .device-appbar{border-color:#ffffff12}
#platforms .device-account{background:#22282d;color:#c9b9ec}
#platforms .device-paste-field{background:#070b0c;border-color:#ffffff29}
#platforms .device-content-tabs>button{font-size:10px}
#platforms .device-primary{border-radius:5px;min-height:36px}
#platforms .device-browser-action{border-radius:5px}
#platforms .device-warning-brand>small{color:#bec2ca}
#platforms .device-browser-scope{gap:19px;margin-top:23px}
#platforms .device-browser-scope small{color:#adb6bb}
#platforms .example-label{
  font-size:10px;
  color:#9da7ab;
  margin-top:20px;
  text-align:start;
}
@media(max-width:1150px){
  #platforms .section-heading.centered{column-gap:45px;grid-template-columns:minmax(0,1.55fr) minmax(0,.65fr)}
  #platforms .section-heading h2{font-size:clamp(42px,4.7vw,58px)}
  #platforms .section-heading>p:not(.eyebrow){font-size:14px}
  #platforms .device-copy h3{font-size:30px}
  #platforms .device-copy>p{font-size:13px}
  #platforms .device-preview:before{inset:-15% -4%;opacity:.55}
}
@media(max-width:900px){
  #platforms .section-heading.centered{display:block;max-width:700px}
  #platforms .section-heading h2{font-size:48px}
  #platforms .section-heading>p:not(.eyebrow){max-width:430px;margin-top:22px;font-size:14px}
  #platforms .platform-layout{margin-top:31px}
  #platforms .platform-picker{gap:21px}
  #platforms .device-tab strong{font-size:14px}
  #platforms .device-tab small{font-size:9px}
  #platforms .device-tab-symbol{width:24px}
  #platforms .device-scene{min-height:480px;gap:30px;padding-top:30px}
  #platforms .device-copy h3{font-size:27px}
  #platforms .device-copy>p{font-size:12px}
}
@media(max-width:660px){
  #platforms .section-heading h2{font-size:38px;line-height:1.16;letter-spacing:-.022em}
  #platforms .section-heading>p:not(.eyebrow){font-size:14px;line-height:1.8;margin-top:19px}
  #platforms .platform-layout{margin-top:25px}
  #platforms .platform-picker{gap:13px}
  #platforms .device-tab{padding:16px 0 19px;gap:7px;min-height:65px;justify-content:flex-start}
  #platforms .device-tab strong{font-size:12px;line-height:1.4}
  #platforms .device-tab small{display:none}
  #platforms .device-tab-symbol{width:21px;height:25px}
  #platforms .device-tab-symbol .icon{width:19px;height:19px}
  #platforms .device-tab:after{width:38px}
  #platforms .device-scene{min-height:0;gap:25px;padding-top:32px;padding-bottom:0}
  #platforms .device-preview:before{inset:-8% -3%;opacity:.4;transform:rotate(-6deg)}
  #platforms .device-phone-preview:before{inset:-3% -12%;opacity:.6;transform:rotate(8deg)}
  #platforms .device-copy{max-width:440px}
  #platforms .device-copy h3{font-size:27px;line-height:1.25}
  #platforms .device-copy>p{font-size:13px;line-height:1.85;margin-top:13px}
  #platforms .device-text-action{font-size:12px;margin-top:13px}
  #platforms .device-scope-note{font-size:10px;margin-top:16px}
  #platforms .example-label{font-size:9px;line-height:1.8;margin-top:18px}
}
@media(max-width:350px){
  #platforms .section-heading h2{font-size:32px}
  #platforms .section-heading>p:not(.eyebrow){font-size:13px}
  #platforms .platform-picker{gap:9px}
  #platforms .device-tab{gap:5px}
  #platforms .device-tab strong{font-size:11px}
  #platforms .device-tab-symbol{width:19px}
  #platforms .device-tab-symbol .icon{width:17px;height:17px}
  #platforms .device-copy h3{font-size:25px}
}