/* Falcon type scale, for the Falcon 5012 and Falcon 6048 product pages. Loaded on those two
   pages only (product_scroll.blade.php), so nothing here reaches any other page. It began
   on Falcon 5012, which is what the audit and the examples below refer to.

   An audit of the page found 25 font sizes at 1440px and 31 at 390px, many within a
   pixel of each other, a subheading (36px) larger than the section titles (31.5px), and
   text down to 8.6px on a phone. This is the scale the page moves onto: eight sizes, all
   in rem so they follow the site's root steps (14px, 13px at 1280px and below, 12px at
   1024px and below).

     token             rem    1440px  1280px  1024px   used for
     --type-display    3.75   52.5    48.8    45       hero product name
     --type-section    2.857  40      37.1    34.3     section titles
     --type-subhead    2.571  36      33.4    30.9     subheadings ("Four elements.", "10 GPUs")
     --type-component  1.857  26      24.1    22.3     titles inside components
     --type-lead       1.571  22      20.4    18.9     section descriptions, lead copy
     --type-title      1.286  18      16.7    15.4     short titles: hero tagline, table group
                                                       headers, document names, scenario notes
     --type-body       1.143  16      14.9    13.7     running copy
     --type-ui         1      14      13      12       tabs, buttons, captions
     --type-small      0.857  12      12      12       labels, legends; the floor

   Nine steps, not eight: an audit of the page put four different short titles at 17.5-18px,
   which is the rule below (an exception needed in three places is a missing step), so
   --type-title joined. --type-small never drops under 12px: max() holds it there, since at
   the 12px root 0.857rem would come out 10.3px.

   Weights come down to three (400 copy, 600 headings and controls, 700 emphasis and
   section titles) and line heights to four (headings 1.2, lead 1.75, body 1.6, UI 1.3).
   Headings of 26px and up take no letter-spacing; running text keeps the site's 0.018em.

   To make one piece of text larger or smaller, move it to another step first. When it
   truly needs a size of its own, override it on that element with a comment saying why;
   an exception needed in three places is a step the scale is missing.

   Both pages are on the scale: every section from the hero to the demo form. The site
   header, footer and cookie bar are shared with every page and stay as they are, as does
   the "related info" line a Google Tag Manager tag writes with an inline style. The one
   deliberate exception on the page is noted where it is set. */
:root {
  --type-display: 3.75rem;
  --type-section: 2.857rem;
  --type-subhead: 2.571rem;
  --type-component: 1.857rem;
  --type-lead: 1.571rem;
  --type-title: 1.286rem;
  --type-body: 1.143rem;
  --type-ui: 1rem;
  --type-small: max(.857rem, 12px);

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-heading: 1.2;
  --leading-lead: 1.75;
  --leading-body: 1.6;
  --leading-ui: 1.3;
}

/* ---- Every section title on the page ---- */
.section-title {
  font-size: var(--type-section);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
/* ---- Overview (#product-lead: subtitle, copy, photo gallery) ---- */
#product-lead .product-lead-subtitle {
  font-size: var(--type-subhead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
#product-lead .product-lead-copy {
  font-size: var(--type-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-lead); }
  #product-lead .product-lead-copy strong {
    font-weight: var(--weight-bold); }
#product-lead .product-gallery-thumb-label {
  font-size: var(--type-ui);
  line-height: var(--leading-ui); }

/* ---- Hero (#product-info) ----
   Sized as the homepage hero (css/page/index.css) rather than on this scale's steps, so
   the dark banners read alike across the site: the product name as its headline
   (clamp(2.3rem, 3.45vw, 3.75rem), 49.7px at 1440px), the subtitle as its lead (20px at
   90% white, line height 1.7) and Order Now as its buttons (16px). On a phone the name
   takes the homepage headline's phone size. The breadcrumb stays at --type-ui, the size of
   the homepage hero's eyebrow in the same place. */
#product-info.product-info-dark .color-product {
  font-size: clamp(2.3rem, 3.45vw, 3.75rem);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
  /* main.css sizes h2 b at 1.25em of the h2; the name is set on the b itself instead,
     so it lands on the size rather than a quarter above it */
  #product-info.product-info-dark .color-product b {
    font-size: clamp(2.3rem, 3.45vw, 3.75rem);
    font-weight: var(--weight-bold); }
#product-info.product-info-dark .color-grey {
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.2rem, 1.4vw, 1.43rem);
  font-weight: var(--weight-semibold);
  line-height: 1.7;
  letter-spacing: .018em; }
#product-info.product-info-dark .breadcrumb a,
#product-info.product-info-dark .breadcrumb li {
  font-size: var(--type-ui); }
#product-info.product-info-dark .order-now-btn {
  min-height: 54px;
  padding: .9rem 1.75rem;
  font-size: 1.143rem; }
@media screen and (max-width: 768px) {
  #product-info.product-info-dark .color-product,
  #product-info.product-info-dark .color-product b {
    font-size: clamp(2.45rem, 11vw, 4rem); } }

/* ---- Sticky tabs ----
   The one exception: the tabs stay at 1.1rem, the header menu's own size (#menu a in
   main.css), matched on purpose so the two bars read as one navigation system. */

/* ---- Benefits ---- */
#product-benefits h3 {
  font-size: var(--type-component);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
#product-benefits p {
  font-size: var(--type-body);
  line-height: var(--leading-body); }

/* ---- Architecture (the platform-elements component) ---- */
#platform-elements .h3-platform-elements .h3pe-platform-tabs button {
  font-size: var(--type-ui);
  line-height: var(--leading-ui); }
  /* the tab's arrow and the link's arrow are glyphs sized to their text */
  #platform-elements .h3-platform-elements .h3pe-platform-tabs button > span:last-child {
    font-size: 1.2em; }
#platform-elements .h3-platform-elements .h3pe-eyebrow,
#platform-elements .h3-platform-elements .h3pe-element-takeaway > span {
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
  letter-spacing: .08em; }
#platform-elements .h3-platform-elements .h3pe-element-content h3 {
  font-size: var(--type-component);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
#platform-elements .h3-platform-elements .h3pe-element-content > p,
#platform-elements .h3-platform-elements .h3pe-element-takeaway p {
  font-size: var(--type-body);
  line-height: var(--leading-body); }
#platform-elements .h3-platform-elements .h3pe-text-link {
  font-size: var(--type-ui);
  line-height: var(--leading-ui); }
  #platform-elements .h3-platform-elements .h3pe-text-link span {
    font-size: 1.4em; }
/* Diagram labels. They were set at 1.3x their first size on request; each goes to the
   nearest step at or above that, so none gets smaller. */
#platform-elements .h3-platform-elements .h3pe-mini-label,
#platform-elements .h3-platform-elements .h3pe-mini-caption,
#platform-elements .h3-platform-elements .h3pe-mini-chassis-label,
#platform-elements .h3-platform-elements .h3pe-mini-host,
#platform-elements .h3-platform-elements .h3pe-mini-gpus span,
#platform-elements .h3-platform-elements .h3pe-mini-manager {
  font-size: var(--type-ui);
  line-height: var(--leading-body); }
#platform-elements .h3-platform-elements .h3pe-mini-fabric {
  font-size: var(--type-body);
  line-height: var(--leading-body); }

/* ---- Topology (the connectivity component) ---- */
#connectivity .conn-scenario-heading h3 {
  font-size: var(--type-subhead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
#connectivity .conn-scenario-heading p {
  font-size: var(--type-title);
  line-height: var(--leading-body); }
#connectivity .conn-tab-group-name {
  font-size: var(--type-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui); }
#connectivity .conn-tab-config {
  font-size: var(--type-ui);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui); }
#connectivity .conn-tab-badge {
  font-size: var(--type-small);
  line-height: var(--leading-ui); }
#connectivity .conn-tab-group-note {
  font-size: var(--type-ui);
  line-height: var(--leading-body); }
#connectivity .conn-summary {
  font-size: var(--type-small);
  line-height: var(--leading-body); }
  #connectivity .conn-summary .conn-config-total {
    font-size: var(--type-ui);
    font-weight: var(--weight-semibold); }
#connectivity .conn-topology-heading {
  font-size: var(--type-small);
  letter-spacing: .08em; }
/* the diagram's nodes, slot numbers and legend stay at the floor, as they were */
#connectivity .conn-node,
#connectivity .conn-switch,
#connectivity .conn-host-endpoint,
#connectivity .conn-slot-label,
#connectivity .conn-management-strip small,
#connectivity .conn-key,
#connectivity .conn-selection,
#connectivity .conn-caption {
  font-size: var(--type-small); }
#connectivity .conn-management-strip button {
  font-size: var(--type-ui); }
#connectivity .conn-step-number {
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
  letter-spacing: .08em; }
#connectivity .conn-step-title {
  font-size: var(--type-component);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
#connectivity .conn-step-description {
  font-size: var(--type-body);
  line-height: var(--leading-body); }
#connectivity .conn-step-fact {
  font-size: var(--type-ui);
  line-height: var(--leading-body); }
#connectivity .conn-mode-note {
  font-size: var(--type-body);
  line-height: var(--leading-body); }

/* ---- Specifications ---- */
#specification .spec-tablist button {
  font-size: var(--type-ui);
  line-height: var(--leading-ui); }
#specification .spec-table thead th {
  font-size: var(--type-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui); }
#specification .spec-table tbody th {
  font-size: var(--type-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body); }
#specification .spec-table tbody td {
  font-size: var(--type-body);
  line-height: var(--leading-body); }

/* ---- Resources ---- */
#resources h5 {
  font-size: var(--type-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui); }
#resources .color-primary {
  font-size: var(--type-body);
  line-height: var(--leading-body); }

/* ---- Request a Demo (#sec-demo) ---- */
#sec-demo .title-deco {
  font-size: var(--type-subhead);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
#sec-demo .title p {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body); }
/* the floating labels; the required-field asterisk keeps main.css's 1.3x of its label */
#sec-demo .form-container .label-title,
#sec-demo .form-container .label-title.move {
  font-size: var(--type-small); }
#sec-demo .btn {
  font-size: var(--type-body); }

/* ---- CMS custom sections (Falcon 6048's Topology) ----
   Their copy is pasted into the CMS from a word processor and arrives with inline font
   sizes on every span (11pt, 14.67px), so only !important can put it on the scale; it is
   the one place in this file that needs it. Weights are left as pasted, so bold stays bold. */
.scroll-section .editor-content,
.scroll-section .editor-content p,
.scroll-section .editor-content span,
.scroll-section .editor-content li {
  font-size: var(--type-body) !important;
  line-height: var(--leading-body) !important; }