/* Dropbox brand tokens, from unfairly.ai/brand-guidelines/dropbox (checked 2026-10-28).
   Sizes, spacing and components were measured on https://www.dropbox.com/ (computed styles, bounding boxes and pixel scans at 1440 and 390 px wide, on 2026-10-28 and 2026-10-29).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Dropbox's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F7F5F2;
  --color-ink: #1E1919;
  --color-ink-muted: #736C64;
  --color-accent: #0061FE;
  --color-on-accent: #F7F5F2;
  --color-night: #1E1919;
  --color-on-night: #F7F5F2;
  --color-azalea: #CD2F7B;
  --color-pink: #FFAFA5;
  --color-crimson: #9B0032;
  --color-sunset: #FA551E;
  --color-rust: #BE4B0A;
  --color-tangerine: #FF8C19;
  --color-gold: #9B6400;
  --color-vivid-vargas: #FAD24B;
  --color-canopy: #0F503C;
  --color-lime: #B4DC19;
  --color-ocean: #007891;
  --color-zen: #14C8EB;
  --color-navy: #283750;
  --color-cloud: #B4C8E1;
  --color-plum: #78286E;
  --color-orchid: #C8AFF0;
  --color-pink-dark: #892055;
  --color-sunset-dark: #4E0119;
  --color-vivid-vargas-dark: #684505;
  --color-lime-dark: #175641;
  --color-orchid-dark: #682760;
  --color-blue-hover: #0057E5;
  --color-focus-ring: #428BFF;
  --color-announcement: #DEEBFF;
  --color-announcement-text: #0044AF;
  --color-hairline: #EDE9E3;
  --color-media-placeholder: #EEE9E2;
  --color-muted-on-dark: #A09D9B;
  --color-panel-top: #292C31;
  --color-card-dark: #1C1D21;
  --color-footer: #000000;
  --color-hairline-on-black: #474644;
  --color-card-dark-fill: #1C1D21;
  --color-announcement-bar-fill: #DEEBFF;
  --color-announcement-bar-text: #0044AF;
  --color-media-frame-fill: #FFFFFF;
  --color-file-card-fill: #FFFFFF;
  --font-display: Archivo, Arial, Helvetica, sans-serif;
  --font-display-original: "DB Sharp Grotesk", Archivo, Arial, Helvetica, sans-serif;
  --font-body: "Public Sans", -apple-system, Arial, Helvetica, sans-serif;
  --font-body-original: "Atlas Grotesk", "Public Sans", -apple-system, Arial, Helvetica, sans-serif;
  --page-margin: 48px;
  --section-padding: 72px;
  --container-max: 1344px;
  --hero-text-max: 513px;
  --nav-height: 72px;
  --grid-gutter: 24px;
  --grid-columns: 24;
  --text-hero-headline-size: 40px;
  --text-hero-headline-line: 1.2;
  --text-hero-headline-weight: 650;
  --text-hero-headline-tracking: -0.8px;
  --text-hero-headline-width: 112;
  --text-section-headline-wide-cut-size: 34px;
  --text-section-headline-wide-cut-line: 1.13;
  --text-section-headline-wide-cut-weight: 400;
  --text-section-headline-wide-cut-tracking: 0.3px;
  --text-section-headline-wide-cut-width: 125;
  --text-feature-headline-size: 26px;
  --text-feature-headline-line: 1.3;
  --text-feature-headline-weight: 650;
  --text-feature-headline-tracking: -0.52px;
  --text-feature-headline-width: 112;
  --text-card-title-size: 18px;
  --text-card-title-line: 1.2;
  --text-card-title-weight: 650;
  --text-card-title-tracking: -0.36px;
  --text-card-title-width: 112;
  --text-small-heading-size: 20px;
  --text-small-heading-line: 1.2;
  --text-small-heading-weight: 650;
  --text-small-heading-tracking: 0.2px;
  --text-lead-size: 20px;
  --text-lead-line: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: 0.2px;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-body-tracking: 0.16px;
  --text-eyebrow-and-button-label-size: 16px;
  --text-eyebrow-and-button-label-line: 1.2;
  --text-eyebrow-and-button-label-weight: 650;
  --text-eyebrow-and-button-label-tracking: 0.16px;
  --text-nav-link-size: 14px;
  --text-nav-link-line: 1.43;
  --text-nav-link-weight: 650;
  --text-nav-link-tracking: 0.14px;
  --text-pill-label-size: 14px;
  --text-pill-label-line: 1.2;
  --text-pill-label-weight: 400;
  --text-pill-label-tracking: 0.14px;
  --text-overline-size: 12px;
  --text-overline-line: 1.2;
  --text-overline-weight: 700;
  --text-overline-tracking: 0.12px;
  --text-footer-link-size: 14px;
  --text-footer-link-line: 1.57;
  --text-footer-link-weight: 400;
  --text-footer-link-tracking: 0.14px;
  --radius-button-primary: 16px;
  --radius-button-secondary: 16px;
  --radius-button-nav: 12px;
  --radius-pill-label: 999px;
  --radius-card: 12px;
  --radius-card-dark: 16px;
  --radius-button-secondary-on-dark: 16px;
  --radius-media-frame: 28px;
  --radius-file-card: 12px;
  --radius-security-panel: 20px;
  --ease-brand: cubic-bezier(0.65, 0, 0.45, 1);
  --ease-button-state: cubic-bezier(0.4, 0, 0.6, 1);
  --duration-button-state: 100ms;
  --icon-spot: 120px;
  --icon-pictogram: 64px;
  --icon-ui: 24px;
}
/* Phone values measured at 390px; Dropbox's CSS switches at 479px. */
@media (max-width: 479px) {
  :root {
    --page-margin: 24px;
    --section-padding: 72px;
    --text-hero-headline-size: 32px;
    --text-section-headline-wide-cut-size: 26px;
    --text-lead-size: 16px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 71px; padding: 0 24px; border-radius: 16px;
  background: var(--color-accent); color: var(--color-on-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent);
  font: 650 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #0057E5; } /* observed */
.button-primary:focus-visible { box-shadow: 0 0 0 3px #428BFF; outline-offset: 1px; } /* observed */
.button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 55px; padding: 0 24px; border-radius: 16px;
  background: transparent; color: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-ink);
  font: 650 16px/1 var(--font-body);
}
.button-secondary:hover { background-color: rgba(0, 0, 0, 0.08); } /* observed */
.button-secondary:focus-visible { box-shadow: 0 0 0 3px #428BFF; outline-offset: 1px; } /* observed */
.button-nav {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 12px; border-radius: 12px;
  background: var(--color-accent); color: var(--color-on-accent);
  font: 650 16px/1 var(--font-body);
}
.button-secondary-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 55px; padding: 0 24px; border-radius: 16px;
  background: transparent; color: var(--color-on-night);
  box-shadow: inset 0 0 0 2px var(--color-on-night);
  font: 650 16px/1 var(--font-body);
}