/* DropSend marketing chrome. Header and footer of the marketing site, on the same
   design language as the app. */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root {
  --ds-surface: #ffffff;
  --ds-surface-2: #faf8f4;
  --ds-surface-3: #f1efea;
  --ds-border: #ebe8e1;
  --ds-text: #211f1c;
  --ds-text-2: #56534c;
  --ds-text-3: #7d7a72;
  --ds-text-4: #a8a49b;
  --ds-brand: #f79321;
  --ds-brand-strong: #c2740f;
  --ds-brand-tint: #fdf1e1;
  --ds-brand-tint-2: #fbe6cc;
  --ds-warn-fg: #d93025;
  --ds-field-bg: #ffffff;
  --ds-field-border: #e7e3db;
  --ds-shadow-pop: 0 12px 40px rgba(40, 38, 33, .16);

  /* Home page. The warm paper ground the app uses behind its screens, and the
     deep ink the security band is set on -- the one dark moment on the page. */
  --ds-bg-warm: #f6f4f0;
  --ds-deep: #1b1a16;
  --ds-deep-2: #262420;
  --ds-deep-border: #322e27;
  --ds-deep-text: #f3f0ea;
  --ds-deep-text-2: #a8a49b;

  --ds-font: 'Figtree', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif;
  --ds-caption: 12px;   --ds-caption-lh: 18px;
  --ds-body: 16px;      --ds-body-lh: 24px;
  --ds-subtitle: 20px;  --ds-subtitle-lh: 28px;

  --ds-space-xxs: 4px;
  --ds-space-xs: 6px;
  --ds-space-sm: 8px;
  --ds-space-md: 10px;
  --ds-space-lg: 12px;
  --ds-space-xl: 14px;
  --ds-space-2xl: 16px;
  --ds-space-3xl: 24px;

  /* spacing.screen-x and size.touchTarget from the shared token set
     (dropsend-app/src/theme/tokens.json). */
  --ds-screen-x: 20px;
  --ds-touch: 44px;

  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-pill: 999px;
  --ds-border-hairline: 1px;
}

/* -- header ---------------------------------------------------------------- */

.top-header,
.top-bar-bg-white,
.top-header .top-bar-bg,
.top-header .top-bar,
.top-header .title-area {
  background: var(--ds-surface);
  font-family: var(--ds-font);
}

/* A hairline drawn as a shadow rather than a border, so it costs no layout. */
.top-header.mobile-view-header,
.top-bar-bg-white {
  box-shadow: 0 1px 0 var(--ds-border);
}

/* Foundation top-bar: rows are held together by floats and by Foundation's own link padding. */
.top-header .top-bar-section li:not(.has-form) a:not(.button) {
  font-family: var(--ds-font);
  font-weight: 500;
  color: var(--ds-text-2);
}

.top-header .top-bar-section li:not(.has-form) a:not(.button):hover { color: var(--ds-brand-strong); }

.top-header .top-bar .top-bar-section .right.login-register-nav li a.home-login-link:not(.button) {
  color: var(--ds-text-2);
  font-weight: 500;
}

.top-header .top-bar .top-bar-section .right.login-register-nav li a.home-login-link:not(.button):hover { color: var(--ds-text); }

/* Register is the primary action, so it is a filled pill rather than a third link.
   Selectors are long deliberately: they have to beat mystyle.css. */
.top-header .try-login.try-register .register-link-text {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-lg);
  line-height: normal;
  margin-bottom: 0;
  /* An inline-flex box reports a low baseline; align its top so the links share a line. */
  vertical-align: top;
}

/* The pipe was separating two links. There is one link and one button now. */
.top-header .lr-bar-separator { display: none; }

.top-header .top-bar .top-bar-section .right.login-register-nav li a.home-register-link:not(.button) {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  /* Cancels the padding the pill adds to the line box, so it matches the plain links. */
  margin-top: -7px;
  margin-bottom: -7px;
  /* The plain links show 50px of empty space between them; the button's fill
     starts before its label, so it needs the space measured to its edge. */
  margin-left: 38px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand);
  color: #fff;
  font-weight: 700;
  transition: background-color .15s ease;
}

.top-header .top-bar .top-bar-section .right.login-register-nav li a.home-register-link:not(.button):hover {
  background: var(--ds-brand-strong);
  color: #fff;
  text-decoration: none;
}

.top-header .top-bar-section li a:not(.button):focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

/* -- footer ---------------------------------------------------------------- */

section#footer-php {
  padding: var(--ds-space-2xl) 0;
  background: var(--ds-brand);
}

section#footer-php p,
section#footer-php a,
section#footer-php a:link,
section#footer-php a:visited {
  font-family: var(--ds-font);
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  color: #fff;
}

section#footer-php a u { text-decoration: none; }
section#footer-php a:hover { color: #fff; text-decoration: underline; }
section#footer-php .footer-social-media img { padding-right: var(--ds-space-lg); }

section#footer-php a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Home send card (guestUser/components/uploading-files.php) */

.upload-files-box {
  position: relative;
  max-width: 400px;
  width: 100%;
  margin-top: 50px;
  border: var(--ds-border-hairline) solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface);
  box-shadow: 0 1px 2px rgba(76, 58, 32, .05), 0 12px 28px rgba(76, 58, 32, .08);
  font-family: var(--ds-font);
  color: var(--ds-text);
  overflow: hidden;
}

/* -- heading --------------------------------------------------------------- */

.upload-files-box .free-send-container {
  gap: var(--ds-space-xxs);
  padding: var(--ds-space-3xl) var(--ds-space-3xl) 0;
  line-height: inherit;
}

.upload-files-box .free-send-container h4 {
  margin: 0;
  font-family: var(--ds-font);
  font-size: var(--ds-subtitle);
  line-height: var(--ds-subtitle-lh);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ds-text);
}

/* Was italic #0056b3 -- a colour from no part of the brand, set in italics on the
   one line that has to read as reassurance rather than as a link. */
.upload-files-box .free-send-container p {
  margin: 0;
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  color: var(--ds-text-3);
}

.upload-files-box .free-send-container p em { font-style: normal; }

/* -- drop zone ------------------------------------------------------------- */

.upload-files-box .upload-files-box-header { padding: var(--ds-space-3xl); }

.upload-files-box .upload-file-input-container { margin-bottom: var(--ds-space-2xl); }

.upload-files-box .upload-file-input {
  position: relative;
  margin-right: 0;
  padding: var(--ds-space-3xl) var(--ds-space-2xl);
  border: 1.5px dashed var(--ds-brand-tint-2);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-2);
  transition: background-color .15s ease, border-color .15s ease;
}

.upload-files-box .upload-file-input:hover,
.upload-files-box .upload-file-input-container.is-dragging .upload-file-input {
  border-color: var(--ds-brand);
  background: var(--ds-brand-tint);
}

.upload-files-box .upload-file-input-container.is-dragging .upload-file-input {
  border-style: solid;
  box-shadow: 0 0 0 4px var(--ds-brand-tint-2);
}

.upload-files-box .upload-file-input img {
  width: 28px;
  height: 28px;
  margin-bottom: var(--ds-space-md);
}

.upload-files-box .upload-file-input p { margin: 0 0 var(--ds-space-xxs); }

.upload-files-box .upload-file-input .primary-text {
  font-size: var(--ds-body);
  line-height: var(--ds-body-lh);
  color: var(--ds-brand-strong);
}

.upload-files-box .upload-file-input .grey-text {
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  color: var(--ds-text-3);
}

.upload-files-box .uploaded-file-container:not(:empty) {
  margin-bottom: var(--ds-space-2xl);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2);
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  color: var(--ds-text-2);
}

/* -- fields ---------------------------------------------------------------- */

/* Label above a filled well, the same treatment the app's forms get. The label
   follows its input in the markup, so order moves it rather than markup. */
.upload-files-box .form-md .form-group {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: var(--ds-space-2xl);
}

.upload-files-box .form-md .form-group > label {
  order: -1;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  height: auto;
  margin: 0 0 var(--ds-space-sm);
  font-family: var(--ds-font);
  font-size: var(--ds-body);
  line-height: var(--ds-body-lh);
  font-weight: 600;
  color: var(--ds-text);
  pointer-events: auto;
}

.upload-files-box .form-md input:focus + label,
.upload-files-box .form-md input.has-value + label,
.upload-files-box .form-md textarea:focus + label,
.upload-files-box .form-md textarea.has-value + label {
  top: auto;
  font-size: var(--ds-body);
  background: transparent;
  color: var(--ds-text);
}

.upload-files-box .form-md input,
.upload-files-box .form-md textarea {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 11px 14px;
  border: var(--ds-border-hairline) solid var(--ds-field-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-field-bg);
  font-family: var(--ds-font);
  font-size: var(--ds-body);
  line-height: var(--ds-body-lh);
  font-weight: 400;
  color: var(--ds-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.upload-files-box .form-md input:focus,
.upload-files-box .form-md textarea:focus {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px var(--ds-brand-tint);
  outline: none;
}

.upload-files-box .form-md textarea { min-height: 84px; resize: vertical; }
.upload-files-box .form-md ::placeholder { color: var(--ds-text-4); }

.upload-files-box .chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs);
  padding: 0;
  order: -1;
  margin-bottom: var(--ds-space-sm);
}

.upload-files-box .chip-container:empty { margin: 0; }

.upload-files-box .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-sm);
  margin: 0;
  padding: var(--ds-space-xxs) var(--ds-space-md);
  border: var(--ds-border-hairline) solid var(--ds-brand-tint-2);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-tint);
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  font-weight: 600;
  color: var(--ds-brand-strong);
}

.upload-files-box .chip .close-button { cursor: pointer; color: var(--ds-text-3); }
.upload-files-box .chip .close-button:hover { color: var(--ds-warn-fg); }

.upload-files-box .error-text,
.upload-files-box .form-group .error-text {
  margin-top: var(--ds-space-xs);
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  color: var(--ds-warn-fg);
}

/* -- footer ---------------------------------------------------------------- */

.upload-files-box .footer-block {
  padding: var(--ds-space-3xl);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
  background: var(--ds-surface-2);
}

/* The row carries the touch minimum rather than the box: a 44px checkbox would
   dwarf the line it sits on, and the label makes the text part of the target. */
/* Left-aligned, not centred: the checkbox lines up with the left edge of the
   Cloudflare box above it and the Upload button below. */
.upload-files-box .remember-check {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: var(--ds-space-sm);
  min-height: var(--ds-touch);
  margin-bottom: var(--ds-space-lg);
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  color: var(--ds-text-2);
}

/* _guest-user.css absolutely positions every label for the floating-label fields, so
   this one has to opt out or it jumps to the card's top-left corner. */
.upload-files-box .remember-check label {
  position: static;
  /* inline, like the link beside it: an inline-block box sits on a different line
     box and the two texts stop sharing a baseline. */
  display: inline;
  margin: 0;
  cursor: pointer;
  /* _guest-user.css sets 14px/14px for the floating-label fields. The row is 12px/18px,
     and a label on a different scale cannot share a baseline with the link beside it. */
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.upload-files-box .remember-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ds-brand);
}

@media (max-width: 991px) {
  .upload-files-box .remember-check input[type="checkbox"] { width: 20px; height: 20px; }
}

.upload-files-box .remember-check a { font-weight: 600; color: var(--ds-brand-strong); }

.upload-files-box #send-uploaded-files {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand);
  font-family: var(--ds-font);
  font-size: var(--ds-body);
  line-height: var(--ds-body-lh);
  font-weight: 700;
  color: #fff;
  transition: background-color .15s ease;
}

.upload-files-box #send-uploaded-files:hover { background: var(--ds-brand-strong); color: #fff; }

.upload-files-box #send-uploaded-files:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

.upload-files-box .signup-links {
  padding: var(--ds-space-3xl);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
}

.upload-files-box .signup-links .title { font-size: var(--ds-caption); color: var(--ds-text-3); }
.upload-files-box .signup-links a { color: var(--ds-brand-strong); }

/* The heading block: a real hierarchy rather than an <h4> with an italic line
   under it. The italic was the only italic on the page. */
.upload-files-box .free-send-container h4 {
  font-size: var(--ds-subtitle);
  line-height: var(--ds-subtitle-lh);
  font-weight: 800;
  letter-spacing: -.02em;
}

.upload-files-box .free-send-container p {
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  color: var(--ds-text-3);
}

/* A tinted disc gives the cloud the same treatment as the app's drop zones, without
   a second icon asset in another colour. */
.upload-files-box .upload-file-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--ds-space-lg);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-tint);
  box-shadow: inset 0 0 0 1px var(--ds-brand-tint-2);
}

.upload-files-box .upload-file-tile img {
  width: 22px;
  height: 22px;
  margin: 0;
}

.upload-files-box .upload-file-input .grey-text { color: var(--ds-text-3); }

/* The two supporting lines were the same size and weight as each other and as
   the call to action, so the box read as four competing lines. */
.upload-files-box .upload-file-input p + .grey-text { margin-top: var(--ds-space-xxs); }

/* -- footer ---------------------------------------------------------------- */

.upload-files-box .terms-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-files-box .footer-block .remember-check {
  margin-bottom: var(--ds-space-2xl) !important;
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  color: var(--ds-text-2);
}

.upload-files-box #cf-turnstile { margin-bottom: var(--ds-space-2xl) !important; }

/* The primary action carries the same weight it does inside the app: filled,
   full width, with the brand's own lift under it. */
.upload-files-box #send-uploaded-files {
  height: 52px;
  box-shadow: 0 6px 16px rgba(247, 147, 33, .28);
}

.upload-files-box #send-uploaded-files:hover { box-shadow: 0 8px 20px rgba(247, 147, 33, .34); }

@media (prefers-reduced-motion: reduce) {
  .upload-files-box #send-uploaded-files { transition: none; }
}

/* -- the headline beside it ------------------------------------------------ */

.over-backbg .over-100-millon,
h1.over-100-millon {
  font-family: var(--ds-font);
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .upload-files-box .upload-file-input,
  .upload-files-box .form-md input,
  .upload-files-box .form-md textarea,
  .upload-files-box #send-uploaded-files { transition: none; }
}

/* Home page */

.ds-home-hero,
.ds-band,
.ds-deep,
.ds-closer {
  font-family: var(--ds-font);
  color: var(--ds-text);
}

.ds-home-hero h1, .ds-home-hero h2, .ds-home-hero h3,
.ds-band h2, .ds-band h3,
.ds-deep h2, .ds-deep h3,
.ds-closer h2 {
  margin: 0;
  font-family: var(--ds-font);
  font-weight: 800;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.ds-eyebrow {
  margin: 0;
  font-size: var(--ds-caption);
  line-height: var(--ds-caption-lh);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-text-3);
}

/* -- buttons --------------------------------------------------------------- */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font);
  font-size: var(--ds-body);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ds-btn--primary { background: var(--ds-brand); color: #fff; }
.ds-btn--primary:hover,
.ds-btn--primary:focus { background: var(--ds-brand-strong); color: #fff; text-decoration: none; }

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-text);
  box-shadow: inset 0 0 0 1px var(--ds-border);
}
.ds-btn--ghost:hover,
.ds-btn--ghost:focus {
  background: var(--ds-surface);
  box-shadow: inset 0 0 0 1px var(--ds-text-3);
  color: var(--ds-text);
  text-decoration: none;
}

.ds-btn:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 3px; }

/* -- hero ------------------------------------------------------------------ */

/* Two layers, radial first so it paints on top: a soft bloom centred above the top
   edge, then the wash beneath it. */
.ds-home-hero {
  position: relative;
  /* NO overflow:hidden here while the negative margin above exists - it makes this a
   block formatting context, which cannot overlap Foundation's floated top bar. */
  margin-top: calc(var(--ds-header-h) * -1);
  padding-top: var(--ds-header-h);
  background:
    radial-gradient(880px 440px at 50% -10%, rgba(247, 147, 33, .12) 0%, rgba(247, 147, 33, 0) 68%),
    linear-gradient(180deg, var(--ds-brand-tint) 0%, var(--ds-bg-warm) 60%);
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
}

.ds-hero-in {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 68px;
}

/* The title inherits centre from the legacy h1 rule; the rest of the block follows it. */
.ds-hero-copy { text-align: center; }
.ds-hero-copy .ds-hero-sub { margin-left: auto; margin-right: auto; }
.ds-hero-copy .ds-hero-cta { justify-content: center; }

.ds-hero-title {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.04;
}
.ds-hero-title em { font-style: normal; color: var(--ds-brand-strong); }

.ds-hero-sub {
  margin: 20px 0 0;
  max-width: 30em;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ds-text-2);
}

.ds-hero-cta { display: flex; flex-wrap: wrap; gap: var(--ds-space-lg); margin-top: var(--ds-space-3xl); }
.ds-hero-note { margin: var(--ds-space-2xl) 0 0; font-size: 14px; color: var(--ds-text-3); }

.ds-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 34px;
  margin-top: 42px;
  padding-top: var(--ds-space-3xl);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
}
.ds-proof div { min-width: 0; }
.ds-proof b {
  display: block;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}
.ds-proof span { font-size: 13px; line-height: 1.4; color: var(--ds-text-3); }

/* The card is sized and styled in the "Home send card" section below. Here it
   only has to sit in the grid column rather than float in a full-height hero. */
.ds-hero-card { min-width: 0; }

/* -- gradient hero under a header that clears only at the top -------------- */

/* The margin and padding below are a SWAP, not padding added to a spacer.
   Delete either half alone and the hero moves. */

:root {
  /* Fallback only. js/header-scroll.js measures the bar and overwrites this. */
  --ds-header-h: 70px;
}

/* Pages running a gradient under the bar paint their ground its starting tint, so a
   measurement a pixel out shows no seam. */
body#homepage,
body#featurespage,
body#downloadpage,
body#price {
  background-color: var(--ds-brand-tint);
}

.top-header {
  transition: background-color .2s ease, box-shadow .2s ease;
}

/* Desktop only: below 768px mystyle.css paints the bar solid with !important. */
@media (min-width: 768px) {
  .top-header.is-top,
  .top-header.is-top .top-bar-bg,
  .top-header.is-top .top-bar-bg-white,
  .top-header.is-top .top-bar {
    background-color: transparent;
    box-shadow: none;
  }

  /* The wordmark strip carries its own bitmap. Longhand only, so the float
     layout keeps every other background property it was given. */
  .top-header.is-top .title-area {
    background-color: transparent;
    background-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-header { transition: none; }
}

/* -- the expanded mobile menu --------------------------------------------- */

/* mystyle.css fills the panel with the accent blue. That blue marks state; at full
   height it reads as a different product. The panel is a surface dropping out of the
   header, so it takes the header's. */
@media (max-width: 767px) {
  .contain-to-grid .top-bar { background: var(--ds-surface) !important; }

  /* The hero is pulled up under the header, so an expanded menu has to own the
     stacking order and size to its content or the page paints over its lower half. */
  .top-header { z-index: 20; }

  .top-bar.expanded,
  .top-bar.expanded .top-bar-section {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* mystyle.css sets these white with !important for the blue panel. */
  .top-bar-section .right li > a,
  .top-bar-section .right li a.home-login-link:not(.button) {
    color: var(--ds-text) !important;
  }

  .top-bar-section .right li {
    border-bottom: var(--ds-border-hairline) solid var(--ds-border);
  }

  /* Stacked, Login and Register are two more rows, not a footnote in the corner.
     The desktop pill and its offsets do not belong here. */
  .top-header .try-login.try-register .register-link-text {
    display: flex;
    gap: var(--ds-space-lg);
    margin: 0;
  }

  .top-header .top-bar .top-bar-section .right.login-register-nav li a.home-register-link:not(.button) {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--ds-brand-strong) !important;
    font-weight: 700;
  }


  /* mystyle.css shrinks these to 17px and hangs 135px of padding under the row, which
     pushed it clean out of the panel. They are nav items like the rest. */
  .top-bar-section li.m-menu-pb { padding-bottom: 0 !important; }
  .top-bar-section li.m-menu-pt { padding-top: 0 !important; }

  .top-bar-section li.m-menu-pb.try-register a,
  .top-bar-section li.m-menu-pt.try-login a {
    font-size: 24px !important;
  }

  /* mystyle.css hangs 34px under each link, so the label sat against the rule above it
     with a gap below. Even padding centres each label between its rules instead. */
  .top-bar-section .right li > a,
  .top-bar-section li.m-menu-pb.try-register a,
  .top-bar-section li.m-menu-pt.try-login a {
    display: inline-block;
    margin-bottom: 0 !important;
    padding: var(--ds-space-2xl) 0 !important;
  }
  .top-header .lr-bar-separator { display: inline; color: var(--ds-text-4); }
}

/* -- fitting the hero to the screen ---------------------------------------- */

/* The hero fills the first screen; the card is the tallest thing in it. */

/* The hero fills the first screen. Measured header height, not a second copy
   of it -- 68px was hardcoded here while the swap above used 70px. */
/* Filling the first screen is a desktop idea: stacked on a phone the content is
   already taller, and the floor only adds empty space under it. */
.ds-home-hero .ds-hero-in { min-height: calc(100vh - var(--ds-header-h)); }

.ds-hero-card { max-height: none !important; }

.ds-hero-card .upload-files-box {
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  max-width: min(420px, 100%);
  margin-left: auto;
}

/* A 1080p screen leaves about 940px of viewport and the header takes 68px, so the
   card and hero tighten together to keep the button above the fold. */
@media (min-width: 992px) and (max-height: 1000px) {
  .ds-hero-in { padding-top: 40px; padding-bottom: 40px; }

  .ds-hero-card .upload-files-box .free-send-container { padding: 16px 20px 0; }
  .ds-hero-card .upload-files-box .upload-files-box-header { padding: 14px 20px; }
  .ds-hero-card .upload-files-box .upload-file-input { padding: 14px 16px; }
  .ds-hero-card .upload-files-box .upload-file-tile { width: 40px; height: 40px; margin-bottom: 8px; }
  .ds-hero-card .upload-files-box .form-md .form-group { margin-bottom: 10px; }
  .ds-hero-card .upload-files-box .form-md textarea { min-height: 56px; }
  .ds-hero-card .upload-files-box .footer-block { padding: 14px 20px; }
  .ds-hero-card .upload-files-box .footer-block .remember-check { margin-bottom: 10px !important; }
  .ds-hero-card .upload-files-box #cf-turnstile { margin-bottom: 10px !important; }
  .ds-hero-card .upload-files-box #send-uploaded-files { height: 46px; }
  .ds-hero-card .upload-files-box .signup-links { padding: 12px 20px; }

  .ds-hero-title { font-size: clamp(34px, 3.6vw, 46px); }
  .ds-hero-sub { margin-top: 14px; font-size: 17px; }
  .ds-hero-cta { margin-top: 20px; }
  .ds-proof { margin-top: 26px; padding-top: 18px; gap: 26px; }
  .ds-proof b { font-size: 23px; }
}

@media (min-width: 992px) and (max-height: 820px) {
  .ds-hero-in { padding-top: 28px; padding-bottom: 28px; }
  .ds-hero-card .upload-files-box .upload-file-input { padding: 10px 16px; }
  .ds-hero-card .upload-files-box .upload-file-tile { width: 34px; height: 34px; margin-bottom: 6px; }
  .ds-hero-card .upload-files-box .form-md .form-group { margin-bottom: 8px; }
  .ds-hero-card .upload-files-box .form-md textarea { min-height: 46px; }
  .ds-proof { display: none; }
}

/* -- bands ----------------------------------------------------------------- */

.ds-band { padding: 78px 0; background: var(--ds-surface); }
.ds-band--tint { background: var(--ds-bg-warm); border-top: var(--ds-border-hairline) solid var(--ds-border); border-bottom: var(--ds-border-hairline) solid var(--ds-border); }

.ds-band-head { max-width: 33em; }
.ds-band-head h2,
.ds-band-title { margin-top: var(--ds-space-lg); font-size: clamp(27px, 3vw, 37px); line-height: 1.13; }
.ds-band-head p,
.ds-band-lede { margin: var(--ds-space-xl) 0 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--ds-text-2); }

.ds-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-3xl); margin-top: 46px; }
.ds-step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-tint);
  color: var(--ds-brand-strong);
  font-size: 20px;
}

.ds-step {
  padding: 26px 24px;
  border: var(--ds-border-hairline) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}
.ds-step-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--ds-space-2xl);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-tint);
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-brand-strong);
  font-variant-numeric: tabular-nums;
}
.ds-step h3 { font-size: 18px; font-weight: 700; }
.ds-step p { margin: var(--ds-space-sm) 0 0; font-size: 15px; line-height: 1.55; color: var(--ds-text-2); }

/* -- document viewer ------------------------------------------------------- */

.ds-viewer { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }

.ds-ticks { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--ds-space-xl); }
.ds-ticks li { display: flex; gap: var(--ds-space-lg); font-size: 15px; line-height: 1.5; color: var(--ds-text-2); }
.ds-ticks svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ds-brand); }

.ds-shot {
  border: var(--ds-border-hairline) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: 0 1px 2px rgba(33, 31, 28, .05), 0 8px 24px rgba(33, 31, 28, .06);
  overflow: hidden;
}
.ds-shot-bar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-lg) var(--ds-space-2xl);
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
  background: var(--ds-surface-2);
}
.ds-shot-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-tint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ds-brand-strong);
}
.ds-shot-nm { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-shot-sz { font-size: 13px; color: var(--ds-text-3); font-variant-numeric: tabular-nums; }

.ds-shot-page { padding: 26px 30px 30px; background: var(--ds-surface); }
.ds-ln { height: 9px; margin-bottom: 11px; border-radius: 4px; background: var(--ds-surface-3); }
.ds-ln--t { height: 15px; width: 52%; margin-bottom: 20px; background: var(--ds-brand-tint-2); }
.ds-ln--s { width: 84%; }
.ds-ln--m { width: 93%; }
.ds-ln--e { width: 41%; margin-bottom: 22px; }

.ds-shot-foot {
  display: flex;
  align-items: center;
  padding: 13px var(--ds-space-2xl);
  border-top: var(--ds-border-hairline) solid var(--ds-border);
  background: var(--ds-surface-2);
}
.ds-pagepill {
  padding: 4px 11px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-3);
  font-size: var(--ds-caption);
  font-weight: 600;
  color: var(--ds-text-2);
  font-variant-numeric: tabular-nums;
}

/* -- security -------------------------------------------------------------- */

/* The one dark moment on the page, and it earns it: this is the section about
   files you would not put in an email. */
.ds-deep { padding: 82px 0; background: var(--ds-deep); color: var(--ds-deep-text); }
.ds-deep .ds-eyebrow { color: var(--ds-brand); }
.ds-deep h2, .ds-deep h3 { color: var(--ds-deep-text); }
.ds-deep .ds-band-lede { color: var(--ds-deep-text-2); }

.ds-secgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-3xl); margin-top: 46px; }
.ds-steps--4 { grid-template-columns: repeat(4, 1fr); }
.ds-sec {
  padding: 24px;
  border: var(--ds-border-hairline) solid var(--ds-deep-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-deep-2);
}
.ds-sec svg { width: 22px; height: 22px; color: var(--ds-brand); }
.ds-sec h3 { margin-top: 15px; font-size: 17px; font-weight: 700; }
.ds-sec p { margin: var(--ds-space-xs) 0 0; font-size: 15px; line-height: 1.55; color: var(--ds-deep-text-2); }

/* -- plans ----------------------------------------------------------------- */

.ds-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px; }
.ds-plan {
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  border: var(--ds-border-hairline) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}
.ds-plan--hot { position: relative; border-color: var(--ds-brand); box-shadow: 0 0 0 1px var(--ds-brand); }
.ds-plan--hot::after {
  content: "Most popular";
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 3px 11px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.ds-plan-n { font-size: 15px; font-weight: 700; color: var(--ds-text); }
.ds-plan-p {
  margin-top: var(--ds-space-md);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}
.ds-plan-p small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ds-text-3); }
.ds-plan ul { margin: 12px 0 0; padding: 0; list-style: none; flex: 1 1 auto; }
.ds-plan li { margin-bottom: 9px; font-size: 14px; color: var(--ds-text-2); font-variant-numeric: tabular-nums; }
.ds-plan .ds-btn { margin-top: 22px; width: 100%; height: 42px; font-size: 15px; }

/* -- plan type and billing controls ---------------------------------------- */

.ds-plan-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2xl);
  margin-top: var(--ds-space-3xl);
}

/* Segmented rather than a switch: a switch implies an off state, and neither
   "Personal or Business" nor "Monthly or Yearly" has one. */
.ds-seg {
  display: inline-flex;
  padding: 4px;
  border: var(--ds-border-hairline) solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
}

.ds-seg-btn {
  appearance: none;
  border: 0;
  padding: 9px 20px;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  font-family: var(--ds-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--ds-text-2);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

/* Foundation styles bare buttons teal, and its button:hover outranks a lone class. */
.ds-seg-btn:hover,
.ds-seg-btn:focus {
  background: var(--ds-brand-tint);
  color: var(--ds-brand-strong);
}

.ds-seg-btn.is-on,
.ds-seg-btn.is-on:hover,
.ds-seg-btn.is-on:focus {
  background: var(--ds-brand);
  color: #fff;
}

.ds-seg-btn:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 2px; }

/* Both card sets are in the markup; only one is shown. */
.ds-plans.hide { display: none; }

.ds-plans--4 { grid-template-columns: repeat(4, 1fr); }
.ds-plans--3 { grid-template-columns: repeat(3, 1fr); }
/* Business has two plans, so the pair is centred rather than hugging the left. */
.ds-plans--2 {
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  max-width: 780px;
  margin-inline: auto;
}

/* The saving only applies to the yearly price, so it is empty on monthly. Height
   is reserved either way so the cards do not jump when the period changes. */
.ds-plan-save {
  display: block;
  min-height: 20px;
  margin-top: var(--ds-space-xxs);
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-brand-strong);
}

/* The badge is per card now -- "Best value" on personal, "Most popular" on the
   business tiers -- so it is read from the attribute rather than hardcoded. */
.ds-plan--hot::after { content: attr(data-badge); }

.ds-seg-badge {
  margin-left: var(--ds-space-sm);
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-tint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ds-brand-strong);
}

.ds-seg-btn.is-on .ds-seg-badge { background: rgba(255, 255, 255, .22); color: #fff; }

@media (max-width: 991px) {
  .ds-plans--4, .ds-plans--3, .ds-plans--2 { grid-template-columns: repeat(2, 1fr); }
  .ds-plan-controls { justify-content: flex-start; }
}

@media (max-width: 575px) {
  .ds-plans--4, .ds-plans--3, .ds-plans--2 { grid-template-columns: 1fr; }
  .ds-seg { width: 100%; }
  .ds-seg-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-seg-btn { transition: none; }
}

/* -- closer ---------------------------------------------------------------- */

.ds-closer { padding: 84px 0; text-align: center; background: var(--ds-surface); }
.ds-closer h2 { font-size: clamp(29px, 3.3vw, 41px); line-height: 1.1; }
.ds-closer p { margin: var(--ds-space-xl) auto 0; max-width: 32em; font-size: 17px; color: var(--ds-text-2); }
.ds-closer-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ds-space-lg); margin-top: var(--ds-space-3xl); }

/* -- responsive ------------------------------------------------------------ */

@media (max-width: 991px) {
  .ds-hero-in,
  .ds-viewer { grid-template-columns: 1fr; gap: 40px; }
  /* Stacked, the copy runs the full width, so it needs the gutter the grid used
     to provide. Filling the screen is a desktop idea: the stack is taller anyway
     and the floor only adds empty space beneath it. */
  .ds-hero-in { padding-left: var(--ds-screen-x); padding-right: var(--ds-screen-x); }
  .ds-home-hero .ds-hero-in { min-height: auto; }
  .ds-hero-card .upload-files-box { margin-left: 0; }
  .ds-steps,
  .ds-secgrid,
  .ds-steps--4 { grid-template-columns: 1fr; }
  .ds-plans { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .ds-hero-in { padding-top: 40px; padding-bottom: 44px; }
  .ds-band, .ds-deep, .ds-closer { padding: 52px 0; }
  .ds-plans { grid-template-columns: 1fr; }
  .ds-proof { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn { transition: none; }
}

.footer-privacy-ploicy-section p { text-align: center; }

/* Guest send details panel (guestUser/success-page.php) */

.file-detail-info-section .ds-panel-eyebrow {
  margin: 0 0 var(--ds-space-xs);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-text-3);
}

.file-detail-info-section .message-title { margin-bottom: var(--ds-space-sm); }

.file-detail-info-section .message-title .h4 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ds-text);
  word-break: break-word;
}

.file-detail-info-section .ds-panel-label {
  margin: 0 0 var(--ds-space-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-text-3);
}

.file-detail-info-section .ds-panel-meta {
  margin: 0;
  font-size: 14px;
  color: var(--ds-text-2);
}

.file-detail-info-section .ds-panel-cta {
  margin: var(--ds-space-xs) 0 0;
  font-size: 14px;
  color: var(--ds-text-3);
}

.file-detail-info-section .ds-panel-cta a { font-weight: 600; color: var(--ds-brand-strong); }

/* The watermark filled the empty half; it sits behind the content instead. */
.file-detail-info-section .dropsend-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: .35;
  pointer-events: none;
}

.file-detail-info-section { position: relative; }
.file-detail-info-section > *:not(.dropsend-mark) { position: relative; z-index: 1; }

.file-detail-info-section .horizontal-line {
  margin: var(--ds-space-xl) 0;
  border-top: 1px solid var(--ds-border);
}

/* mystyle.css forces white here, from when this panel had a dark background. */
h1.over-100-millon { color: var(--ds-text) !important; }

/* Same drawn size as the app header, from the same 4x artwork. */
.top-header img[src*='dlogo'] { height: 49px; width: auto; }