/* Privacy, Terms and Support: the homepage's look applied to reading pages.
   Loaded after home.css, which supplies the typeface, colors, corners, button and footer.
   The wording of these pages lives in their own files and is not touched by styling. */
.doc-top { position: relative; margin: 30px 38px 0; padding: 40px 56px 120px; text-align: center; border-radius: var(--r); overflow: hidden; background: #ece6f8; }
.doc-top .art { position: absolute; inset: 0; pointer-events: none; }
.doc-top .art img { position: absolute; left: 50%; top: 50%; width: 1747px; height: 1241px; transform: translate(-50%, -50%) rotate(180deg); object-fit: cover; }
.doc-top > *:not(.art) { position: relative; }
.doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; isolation: isolate; }
/* A soft white glow behind the logo. */
.doc-bar::before { content: ""; position: absolute; z-index: -1; left: -420px; top: -330px; width: 1100px; height: 760px; background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,.35) 45%, rgba(255,255,255,0)); pointer-events: none; }
.doc-bar .doc-home .bloom-logo { height: 30px; width: auto; display: block; }
.doc-bar nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.doc-bar nav a { text-decoration: none; }
/* Before launch the Download button's place is taken by the coming-soon label, at the same size. */
.doc-bar .soon { margin: 0; padding: 11px 18px; font-size: 14px; animation: none; }
/* On phones the label sits under the date instead (see the phone rules below). */
body.prelaunch .doc-top > .soon { display: none; }
.doc-bar nav a:not(.button):hover { text-decoration: underline; }
.doc-top .label { margin-top: 72px; }
.doc-top h1 { margin-top: 12px; font-size: 56px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.doc-top .updated { margin: 14px auto 0; font-size: 17px; color: #4d4763; max-width: 620px; }

/* The card tucks up over the banner's bottom edge, so it is solid rather than see-through. */
.doc { position: relative; z-index: 1; max-width: 800px; margin: -56px auto 0; padding: 48px 56px 56px; border: 1px solid var(--soft-gray); border-radius: var(--r); background: #fdfcff; font-size: 17px; line-height: 1.7; color: #2c2843; }
.doc h2 { margin: 48px 0 12px; padding-top: 32px; border-top: 1px solid var(--soft-gray); font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); }
.doc h2:first-of-type { margin-top: 36px; }
.doc h3 { margin: 30px 0 6px; font-size: 18.5px; font-weight: 600; line-height: 1.4; color: var(--navy); }
.doc p { margin: 0 0 14px; text-wrap: pretty; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--violet); }
.doc a { color: var(--violet); text-decoration: underline; text-decoration-color: rgba(107, 69, 209, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; }
.doc a:hover { text-decoration-color: currentColor; }
.doc strong { font-weight: 600; color: var(--navy); }
.doc .summary { margin: 0 0 8px; padding: 22px 26px; border-radius: var(--r-inner); background: #f3edfc; border: 1px solid #e4d9f7; color: var(--navy); }
.doc .summary p { margin: 0; }
/* The title and date are shown in the banner above, so the copies inside the card are hidden
   from view but kept for screen readers and search engines. */
.doc > h1, .doc > .updated { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.doc-page .footer { margin-top: 64px; }
/* The page-not-found page (404.html) is the banner alone: no card tucks up under it, so it is
   evenly padded, and a button under the line leads back to the homepage. */
.doc-top.lone { padding-bottom: 96px; }
.doc-top.lone .updated { text-wrap: balance; }
.doc-top.lone .button { margin-top: 36px; }

@media (max-width: 1180px) { .doc-top h1 { font-size: 46px; } }
/* Once the card is as wide as the banner it sits below it instead of overlapping. */
@media (max-width: 940px) { .doc-top { padding-bottom: 64px; } .doc { margin: 20px 38px 0; max-width: none; } }
@media (max-width: 760px) {
  /* Banner and card are the same width here, so no overlap, and the logo is centered with the title. */
  .doc-top { margin: 12px 12px 0; padding: 26px 24px 40px; }
  .doc-top.lone { padding-bottom: 56px; }
  .doc-top.lone .button { margin-top: 28px; }
  .doc-bar { justify-content: center; }
  .doc-bar nav { display: none; }
  .doc-bar::before { left: 50%; transform: translateX(-50%); }
  body.prelaunch .doc-top > .soon { display: block; margin: 20px auto 0; padding: 10px 16px; font-size: 13.5px; animation: none; }
  .doc-bar .doc-home .bloom-logo { height: 24px; }
  .doc-bar { gap: 10px; }
  .doc-bar .doc-home .bloom-logo { height: 22px; }
  .doc-bar nav { gap: 12px; font-size: 14px; flex: none; }
  .doc-bar nav .button.small { padding: 9px 14px; font-size: 13px; }
  .doc-bar nav .hide-small { display: none; }
  .doc-top .label { margin-top: 44px; }
  .doc-top h1 { font-size: 34px; }
  .doc-top .updated { font-size: 15.5px; }
  .doc { margin: 12px 12px 0; padding: 26px 22px 32px; font-size: 16px; }
  .doc h2 { font-size: 22px; margin-top: 36px; padding-top: 26px; }
}