/* Tolstoy Compose universal design primitives.
   These components are intentionally content-agnostic so they can be reused
   across homepage, feature, pricing, install, update, and future pages.
   Baseline layouts use normal block flow and floats. Modern image cropping is
   added progressively so older and Kindle-class browsers retain readable
   images and copy. */

/* Centred section introduction. */
.section-intro {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-intro-heading {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  font-size: 32px;
}

.section-intro-lede {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Image-led feature cards. */
.media-card-grid {
  margin-top: 44px;
  text-align: left;
}

.media-card {
  margin-top: 0;
  margin-bottom: 40px;
}

.media-card-visual {
  overflow: hidden;
  border-radius: 28px;
  background: #f5f5f7;
}

.media-card-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Modern browsers receive a consistent crop. Browsers without support keep
   the original image proportions rather than losing content. */
@supports (aspect-ratio: 4 / 3) {
  .media-card-visual {
    aspect-ratio: 4 / 3;
  }

  .media-card-image {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* Inline lead copy.
   A compact paragraph with a dark bold lead-in followed by quieter body copy.
   Used by image cards, summary grids, and other short feature explanations. */
.inline-lead-copy {
  margin: 0;
  color: #86868b;
  font-size: 16px;
  line-height: 1.5;
}

.inline-lead-copy strong {
  color: #1d1d1f;
  font-weight: 600;
}

.media-card-copy {
  max-width: 480px;
  margin-left: 22px;
  margin-right: 22px;
  padding-top: 15px;
}

@media screen and (min-width: 720px) {
  .section-intro-heading {
    font-size: 46px;
  }

  .media-card-grid {
    margin-top: 56px;
    overflow: hidden;
  }

  .media-card {
    float: left;
    width: 48%;
    margin-bottom: 56px;
  }

  .media-card:nth-child(odd) {
    clear: left;
    margin-right: 4%;
  }

  .media-card-copy {
    margin-left: 28px;
    margin-right: 28px;
    padding-top: 17px;
  }

  .inline-lead-copy {
    font-size: 16px;
    line-height: 1.52;
  }

  .media-card-grid:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media screen and (max-width: 560px) {

  .media-card-grid {
    margin-top: 34px;
  }

  .media-card {
    margin-bottom: 34px;
  }

  .media-card-visual {
    border-radius: 22px;
  }

  .media-card-copy {
    max-width: none;
    margin-left: 16px;
    margin-right: 16px;
    padding-top: 14px;
  }

  .inline-lead-copy {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* Summary grids.
   Compact text summaries used after a section image or intro. They stack by
   default and can opt into multi-column arrangements on wider screens. */
.summary-grid {
  margin-top: 40px;
  text-align: left;
}

.summary-item {
  margin-bottom: 28px;
}

@media screen and (min-width: 720px) {
  .summary-grid {
    margin-top: 52px;
    overflow: hidden;
  }

  .summary-grid-three .summary-item {
    float: left;
    width: 31.333%;
    margin-right: 3%;
    margin-bottom: 0;
  }

  .summary-grid-three .summary-item:nth-child(3n) {
    margin-right: 0;
  }

  .summary-grid-three:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media screen and (max-width: 560px) {
  .summary-grid {
    margin-top: 32px;
  }

  .summary-item {
    margin-bottom: 24px;
  }
}


/* Content columns.
   Universal supporting-copy layout used beneath product imagery and in the
   homepage device summary. Copy is always left aligned. A one-column group is
   centred on the page but uses exactly the same measure as one column in a
   two-column group. */
.content-columns {
  --content-column-gap: 42px;
  display: grid;
  width: min(100%, 980px);
  margin: 30px auto 0;
  gap: 30px var(--content-column-gap);
  text-align: left;
}

.content-column {
  min-width: 0;
  text-align: left;
}

.content-columns-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-columns-one {
  grid-template-columns: minmax(0, calc((100% - var(--content-column-gap)) / 2));
  justify-content: center;
}

.content-columns-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Quiet separators.
   Optional treatment for product capability groups. It follows the same visual
   language as the Discover detail-list without imposing separators on the hero. */
.content-columns-separated {
  row-gap: 0;
}

.content-columns-separated > .content-column {
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e3e1dc;
}

.content-columns-separated.content-columns-one > .content-column:first-child,
.content-columns-separated.content-columns-two > .content-column:nth-child(-n + 2),
.content-columns-separated.content-columns-three > .content-column:nth-child(-n + 3) {
  border-top: 1px solid #e3e1dc;
}

@media screen and (max-width: 959px) {
  .content-columns {
    --content-column-gap: 34px;
    gap: 26px var(--content-column-gap);
    margin-top: 26px;
  }

  .content-columns-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-columns-separated {
    row-gap: 0;
  }

  .content-columns-separated.content-columns-three > .content-column:nth-child(n) {
    border-top: 0;
  }

  .content-columns-separated.content-columns-three > .content-column:nth-child(-n + 2) {
    border-top: 1px solid #e3e1dc;
  }
}

@media screen and (max-width: 719px) {
  .content-columns,
  .content-columns-one,
  .content-columns-two,
  .content-columns-three {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 22px;
    margin-top: 20px;
  }

  .content-columns-separated {
    gap: 0;
  }

  .content-columns-separated.content-columns-one > .content-column:nth-child(n),
  .content-columns-separated.content-columns-two > .content-column:nth-child(n),
  .content-columns-separated.content-columns-three > .content-column:nth-child(n) {
    border-top: 0;
  }

  .content-columns-separated > .content-column:first-child {
    border-top: 1px solid #e3e1dc !important;
  }
}

/* Split feature layout.
   A wide media panel paired with a compact vertical stack of feature points.
   Built with standard block flow first, then enhanced to a two-column split
   on wider screens so older browsers still render a readable section. */
.feature-split {
  margin-top: 44px;
  text-align: left;
}

.feature-split-media {
  margin-bottom: 32px;
}

.feature-split-image {
  display: block;
  width: 100%;
  height: auto;
}

.feature-split-content {
  max-width: 420px;
}

.feature-stack-item {
  margin-bottom: 28px;
}

.feature-stack-item:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 720px) {
  .feature-split {
    margin-top: 56px;
    overflow: hidden;
  }

  .feature-split-media {
    float: left;
    width: 62%;
    margin-bottom: 0;
  }

  .feature-split-content {
    float: right;
    width: 31%;
    max-width: none;
    padding-top: 8px;
  }

  .feature-stack-item {
    margin-bottom: 34px;
  }

  .feature-split:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media screen and (max-width: 560px) {
  .feature-split {
    margin-top: 34px;
  }

  .feature-split-media {
    margin-bottom: 28px;
  }

  .feature-stack-item {
    margin-bottom: 24px;
  }
}

/* Vertically centred split layout.
   A modifier for feature-split sections where the text stack should align to
   the visual centre of the neighbouring image. Table-cell alignment is used
   for broad browser support; narrow screens return to ordinary block flow. */
@media screen and (min-width: 720px) {
  .feature-split-middle {
    display: table;
    width: 100%;
    table-layout: fixed;
    overflow: visible;
  }

  .feature-split-middle .feature-split-media,
  .feature-split-middle .feature-split-content {
    float: none;
    display: table-cell;
    vertical-align: middle;
  }

  .feature-split-middle .feature-split-media {
    width: 62%;
  }

  .feature-split-middle .feature-split-content {
    width: 38%;
    padding-top: 0;
    padding-left: 7%;
  }

  .feature-split-middle:after {
    display: none;
  }
}

/* Reversed split layout.
   Swaps the image and copy columns on wider screens while preserving the
   same source order and stacked reading order on mobile and older browsers. */
@media screen and (min-width: 720px) {
  .feature-split-middle.feature-split-reverse .feature-split-media {
    width: 62%;
    padding-left: 7%;
  }

  .feature-split-middle.feature-split-reverse .feature-split-content {
    width: 38%;
    padding-left: 0;
  }

  .feature-split-reverse .feature-split-media,
  .feature-split-reverse .feature-split-content {
    direction: ltr;
  }

  .feature-split-reverse {
    direction: rtl;
  }
}

/* Major section flow.
   Gives long-form pages a consistent rhythm: the previous section ends with
   the same amount of space that the next section begins with, and a quiet
   divider sits exactly between them. No margins are used between sections,
   preventing older global rules from creating uneven spacing. */
.section.section-flow-lead {
  padding-bottom: 64px;
}

.section.section-flow {
  max-width: 1120px;
  margin-top: 0 !important;
  margin-bottom: 0;
  padding-top: 64px;
  padding-bottom: 64px;
  border-top: 1px solid #e3e1dc;
}

/* Remove trailing component margins so section padding, rather than the last
   child, controls the lower edge of each section. */
.media-card:last-child,
.summary-item:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 720px) {
  .section.section-flow-lead {
    padding-bottom: 80px;
  }

  .section.section-flow {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .media-card:nth-last-child(-n + 2) {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 560px) {
  .section.section-flow-lead {
    padding-bottom: 56px;
  }

  .section.section-flow {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Pricing cards and progressively enhanced FAQ.
   The cards use the homepage's quiet surfaces and standard actions. Pricing
   and the Teams seat estimator are shared with the full Plans page. FAQ
   answers remain visible when disclosure support is unavailable, while
   modern browsers receive accessible expandable rows. */
.pricing-card-grid {
  max-width: 1120px;
  margin: 48px auto 0;
  text-align: left;
}

.pricing-card {
  margin-bottom: 20px;
  padding: 28px 28px 30px;
  border: 1px solid #deddd8;
  border-radius: 24px;
  background: #ffffff;
  color: #1d1d1f;
  box-sizing: border-box;
}

.pricing-card-header {
  min-height: 78px;
  padding-bottom: 20px;
}

.pricing-card-header h3 {
  margin: 0;
  color: inherit;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.pricing-card-header p {
  margin: 8px 0 0;
  color: #6e6e73;
  font-size: 15px;
  line-height: 1.45;
}

.pricing-feature-list {
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid #e3e1dc;
  list-style: none;
}

.pricing-feature-list li {
  position: relative;
  margin-top: 15px;
  padding-left: 22px;
  color: #515154;
  font-size: 15px;
  line-height: 1.48;
}

.pricing-feature-list li:first-child {
  margin-top: 0;
}

.pricing-feature-list li:before {
  position: absolute;
  top: 0;
  left: 0;
  color: #5f6f31;
  font-weight: 600;
  content: "✓";
}

.pricing-card-featured {
  border-color: #b8c49e;
  background: #fafbf7;
}

.pricing-card-featured .pricing-card-header h3 {
  color: #5f6f31;
}

.pricing-card-featured .pricing-feature-list {
  border-top-color: #d8dfc9;
}

.pricing-card-price-area {
  margin-top: 24px;
  padding-top: 20px;
}

.pricing-card-price {
  margin: 0;
}

.pricing-card-price strong {
  display: block;
  color: #1d1d1f;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.pricing-card-price span {
  display: block;
  min-height: 40px;
  margin-top: 6px;
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.45;
}

.pricing-card-action {
  margin-top: 18px;
}

.pricing-card-action .button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.seat-row {
  margin: 0 0 18px;
}

.seat-estimator label {
  display: block;
  margin: 0 0 7px;
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 600;
  vertical-align: top;
}

.seat-estimator select {
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d4d2cd;
  border-radius: 12px;
  background: #ffffff;
  color: #1d1d1f;
  font: inherit;
  line-height: 1.35;
  vertical-align: top;
}

.seat-estimator select:hover,
.seat-estimator select:focus {
  background: #f5f5f3;
}

.seat-estimator select:focus {
  outline: 2px solid #5f6f31;
  outline-offset: 2px;
}

.pricing-billing-note {
  max-width: 720px;
  margin: 26px auto 0;
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.pricing-faq {
  max-width: 900px;
  margin: 54px auto 0;
  text-align: left;
}

.pricing-faq > h3 {
  margin: 0 0 22px;
  color: #1d1d1f;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: center;
}

.pricing-faq-list {
  border-bottom: 1px solid #e3e1dc;
}

.pricing-faq-item {
  display: block;
  padding: 20px 0 22px;
  border-top: 1px solid #e3e1dc;
  box-sizing: border-box;
}

.pricing-faq-item summary {
  display: block;
  margin: 0;
  color: #1d1d1f;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.pricing-faq-item p {
  max-width: 760px;
  margin: 8px 42px 0 0;
  color: #6e6e73;
  font-size: 15px;
  line-height: 1.55;
}

html.faq-disclosure-supported .pricing-faq-item {
  padding: 0;
}

html.faq-disclosure-supported .pricing-faq-item summary {
  position: relative;
  padding: 20px 40px 20px 0;
  cursor: pointer;
}

html.faq-disclosure-supported .pricing-faq-item summary::-webkit-details-marker {
  display: none;
}

html.faq-disclosure-supported .pricing-faq-item summary:hover {
  color: #5f6f31;
}

html.faq-disclosure-supported .pricing-faq-item summary:after {
  position: absolute;
  top: 19px;
  right: 0;
  color: #6e6e73;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  content: "+";
}

html.faq-disclosure-supported .pricing-faq-item[open] summary,
html.faq-disclosure-supported .pricing-faq-item summary:focus {
  color: #5f6f31;
  outline: none;
}

html.faq-disclosure-supported .pricing-faq-item[open] summary:after {
  color: #5f6f31;
  content: "−";
}

html.faq-disclosure-supported .pricing-faq-item summary:focus:after {
  color: #5f6f31;
}

html.faq-disclosure-supported .pricing-faq-item p {
  margin: -2px 40px 22px 0;
}

@media screen and (min-width: 900px) {
  .pricing-card-grid {
    overflow: hidden;
    margin-top: 56px;
  }

  .pricing-card {
    float: left;
    width: 31.333%;
    min-height: 760px;
    margin-right: 3%;
    margin-bottom: 0;
    padding: 30px 28px 32px;
  }

  .pricing-card:nth-child(3n) {
    margin-right: 0;
  }

  .pricing-feature-list {
    min-height: 310px;
  }

  .pricing-card-grid:after {
    content: "";
    display: table;
    clear: both;
  }
}

@supports (display: flex) {
  @media screen and (min-width: 900px) {
    .pricing-card-grid {
      display: flex;
      align-items: stretch;
      gap: 20px;
      overflow: visible;
    }

    .pricing-card {
      display: flex;
      float: none;
      flex: 1 1 0;
      flex-direction: column;
      width: auto;
      min-height: 0;
      margin-right: 0;
    }

    .pricing-feature-list {
      flex: 1 1 auto;
      min-height: 0;
    }

    .pricing-card-price-area {
      margin-top: auto;
    }
  }
}

@media screen and (max-width: 560px) {
  .pricing-card-grid {
    margin-top: 34px;
  }

  .pricing-card {
    padding: 25px 22px 27px;
    border-radius: 20px;
  }

  .pricing-card-header {
    min-height: 0;
  }

  .pricing-card-price span {
    min-height: 0;
  }

  .pricing-faq {
    margin-top: 44px;
  }

  .pricing-faq > h3 {
    margin-bottom: 18px;
    font-size: 25px;
    text-align: left;
  }

  .pricing-faq-item summary {
    font-size: 16px;
  }

  html.faq-disclosure-supported .pricing-faq-item summary {
    padding-left: 0;
    padding-right: 38px;
  }

  html.faq-disclosure-supported .pricing-faq-item p {
    margin-right: 38px;
    margin-left: 0;
  }
}

/* Modern installation guide.
   Every platform remains visible in baseline HTML. The optional device filter
   only hides inactive guides when JavaScript and classList are available, so
   Kindle-class and older browsers retain a complete, navigable document. */
.install-page .install-main {
  max-width: 1180px;
}

.install-page .install-section {
  max-width: 1120px;
  margin-top: 0;
  padding-top: 80px;
  padding-bottom: 80px;
}

.install-page .install-section + .install-section {
  margin-top: 0;
  padding-top: 80px;
  border-top: 1px solid #e3e1dc;
}

.install-page .install-hero {
  padding-top: 72px;
  text-align: center;
}

.install-hero-intro {
  max-width: 820px;
}

.install-hero h1 {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  color: #1d1d1f;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.install-hero-actions {
  text-align: center;
}

.install-hero-media {
  max-width: 980px;
  margin: 56px auto 0;
  overflow: hidden;
  border-radius: 30px;
  background: #f5f5f3;
}

.install-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Device chooser. The descriptive cards are useful navigation in every
   browser and become filters only when the optional script is active. */
.install-device-links {
  margin-top: 48px;
  text-align: left;
}

.install-device-links a {
  display: block;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid #e3e1dc;
  border-radius: 18px;
  background: #ffffff;
  color: #1d1d1f;
  text-decoration: none;
}

.install-device-links a:hover,
.install-device-links a:focus,
.install-device-links a.is-active {
  border-color: #aebc82;
  background: #f6f8f1;
  color: #1d1d1f;
}

.install-device-links a:focus {
  outline: 2px solid #5f6f31;
  outline-offset: 2px;
}

.install-device-links strong,
.install-device-links span {
  display: block;
}

.install-device-links strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.install-device-links a.is-active strong {
  color: #5f6f31;
}

.install-device-links span {
  margin-top: 4px;
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.45;
}

.install-guide-list {
  max-width: 860px;
  margin: 64px auto 0;
}

/* Installation guides use open document flow rather than enclosing cards.
   Without the optional filter, each operating system is separated clearly.
   With the filter active, the selected guide appears as one clean sequence. */
.install-platform-card {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid #dcdad4;
  scroll-margin-top: 92px;
}

.install-platform-card:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

html.install-guide-enhanced .install-platform-card {
  display: none;
}

html.install-guide-enhanced .install-platform-card.is-active {
  display: block;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.install-platform-intro h2 {
  margin: 0 0 14px;
  color: #1d1d1f;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.install-platform-intro p:last-child {
  margin-bottom: 0;
  color: #6e6e73;
}

.install-platform-methods {
  margin-top: 30px;
}

/* Browser methods remain a simple vertical sequence: heading, steps, then the
   next heading. This is intentionally less dense than a browser-card grid. */
.install-method {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #e3e1dc;
}

.install-method:first-child {
  margin-top: 0;
}

.install-method h3 {
  margin: 0 0 13px;
  color: #1d1d1f;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.install-method p {
  margin: 0;
  color: #6e6e73;
  font-size: 15px;
  line-height: 1.55;
}

.install-step-list {
  margin: 0;
  padding-left: 22px;
}

.install-step-list li {
  margin-top: 10px;
  padding-left: 4px;
  color: #4d4d52;
  font-size: 15px;
  line-height: 1.55;
}

.install-step-list li:first-child {
  margin-top: 0;
}

.install-step-list li::marker {
  color: #5f6f31;
  font-weight: 600;
}

.install-method-note {
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid #e3e1dc;
}

@media screen and (min-width: 720px) {
  .install-device-links {
    overflow: hidden;
  }

  .install-device-links a {
    float: left;
    width: 31.333%;
    min-height: 98px;
    margin-right: 3%;
    margin-bottom: 20px;
  }

  .install-device-links a:nth-child(3n) {
    margin-right: 0;
  }

  .install-device-links:after {
    display: table;
    clear: both;
    content: "";
  }

  .install-platform-intro {
    max-width: 760px;
  }

  .install-platform-methods {
    margin-top: 34px;
  }
}

@media screen and (max-width: 560px) {
  .install-page .install-section,
  .install-page .install-section + .install-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .install-page .install-hero {
    padding-top: 46px;
  }

  .install-hero h1 {
    font-size: 37px;
    line-height: 1.1;
  }

  .install-hero-media {
    margin-top: 36px;
    border-radius: 22px;
  }

  .install-device-links,
  .install-guide-list {
    margin-top: 34px;
  }

  .install-device-links a {
    padding: 17px 18px;
    border-radius: 16px;
  }

  .install-platform-card {
    margin-top: 48px;
    padding-top: 48px;
  }

  html.install-guide-enhanced .install-platform-card.is-active {
    margin-top: 0;
    padding-top: 0;
  }

  .install-platform-intro h2 {
    font-size: 29px;
  }

  .install-platform-methods {
    margin-top: 26px;
  }
}

/* Page anchor navigation.
   Normal anchors remain the baseline. Browsers that support smooth scrolling
   receive motion unless the visitor has requested reduced motion. */
.page-scroll-target {
  scroll-margin-top: 92px;
}

/* Modern legal-document layout.
   Policy wording remains ordinary semantic HTML. These rules provide the same
   open spacing, restrained surfaces and progressive responsive behaviour used
   by the homepage and Install page. */
.legal-page .legal-document {
  max-width: 940px;
  padding-top: 88px;
  padding-bottom: 96px;
}

.legal-hero {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.legal-hero h1 {
  margin-bottom: 22px;
  color: #1d1d1f;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.legal-hero .lede {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: #6e6e73;
  font-size: 19px;
  line-height: 1.55;
}

.legal-hero .content-note {
  margin-top: 18px;
  color: #86868b;
  font-size: 13px;
  line-height: 1.45;
}

.legal-page .legal-contents {
  max-width: 840px;
  margin: 64px auto 0;
  padding: 30px 0;
  border-top: 1px solid #e3e1dc;
  border-bottom: 1px solid #e3e1dc;
}

.legal-page .legal-contents h2 {
  margin: 0 0 22px;
  color: #1d1d1f;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-transform: none;
}

.legal-page .legal-contents ol {
  margin-top: 0;
}

.legal-page .legal-contents li {
  margin-bottom: 10px;
  color: #86868b;
  break-inside: avoid;
}

.legal-page .legal-contents a {
  color: #3f3f42;
  font-size: 15px;
  line-height: 1.48;
  text-decoration: none;
}

.legal-page .legal-contents a:hover,
.legal-page .legal-contents a:focus {
  color: #5f6f31;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.legal-page .legal-section {
  max-width: 760px;
  margin: 72px auto 0;
  padding-top: 72px;
  border-top: 1px solid #e3e1dc;
}

.legal-page .legal-section h2 {
  margin: 0 0 20px;
  color: #1d1d1f;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.legal-page .legal-section h3 {
  margin-top: 38px;
  margin-bottom: 10px;
  color: #1d1d1f;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.legal-page .legal-section p,
.legal-page .legal-section li,
.legal-page .legal-section td,
.legal-page .legal-section th {
  font-size: 16px;
  line-height: 1.62;
}

.legal-page .legal-list {
  margin-top: 20px;
  padding-left: 24px;
}

.legal-page .legal-list li + li {
  margin-top: 9px;
}

.legal-page .legal-list + p {
  margin-top: 20px;
}

.legal-page .table-wrap {
  margin: 30px 0;
  border: 1px solid #e3e1dc;
  border-radius: 20px;
  background: #ffffff;
}

.legal-page .table-wrap table {
  min-width: 560px;
}

.legal-page .table-wrap th,
.legal-page .table-wrap td {
  padding: 15px 17px;
  border: 0;
  border-bottom: 1px solid #e3e1dc;
}

.legal-page .table-wrap th + th,
.legal-page .table-wrap td + td {
  border-left: 1px solid #e3e1dc;
}

.legal-page .table-wrap tr:last-child td {
  border-bottom: 0;
}

.legal-page .table-wrap th {
  background: #f8f8f6;
}

.legal-page .legal-section blockquote {
  margin: 28px 0;
  padding: 20px 22px;
  border: 0;
  border-radius: 18px;
  background: #f8f8f6;
}

/* Modern browsers receive a balanced two-column contents layout.
   Older and Kindle-class browsers retain the single-column source order. */
@supports (display: grid) {
  @media screen and (min-width: 720px) {
    .legal-page .legal-contents ol {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 54px;
    }
  }
}

@media screen and (max-width: 560px) {
  .legal-page .legal-document {
    padding-top: 54px;
    padding-bottom: 68px;
  }

  .legal-hero h1 {
    font-size: 37px;
    line-height: 1.1;
  }

  .legal-hero .lede {
    font-size: 17px;
  }

  .legal-page .legal-contents {
    margin-top: 46px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .legal-page .legal-section {
    margin-top: 54px;
    padding-top: 54px;
  }

  .legal-page .legal-section h2 {
    font-size: 28px;
  }

  .legal-page .legal-section p,
  .legal-page .legal-section li,
  .legal-page .legal-section td,
  .legal-page .legal-section th {
    font-size: 15px;
  }

  .legal-page .table-wrap {
    border-radius: 16px;
  }
}

/* Mobile refinement pass.
   Keeps the full desktop content model while reducing vertical repetition,
   improving image delivery, and aligning phone and small-tablet behaviour. */
.responsive-picture {
  display: block;
  width: 100%;
}

.media-card-visual .responsive-picture {
  height: 100%;
}

.feature-split-media .responsive-picture,
.install-hero-media .responsive-picture {
  height: auto;
}

.table-scroll-hint {
  display: none;
}

.install-change-device {
  display: none;
}

html.install-guide-enhanced .install-change-device {
  display: block;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

html.install-guide-enhanced .install-change-device-bottom {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #e3e1dc;
}

html.install-guide-enhanced .install-change-device a {
  color: #5f6f31;
  font-weight: 600;
  text-decoration: none;
}

html.install-guide-enhanced .install-change-device a:hover,
html.install-guide-enhanced .install-change-device a:focus {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

@media screen and (max-width: 719px) {
  .section.section-flow-lead {
    padding-bottom: 48px;
  }

  .section.section-flow {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .media-card-grid {
    margin-top: 30px;
  }

  .media-card {
    margin-bottom: 28px;
  }

  .media-card-visual {
    border-radius: 20px;
  }

  @supports (aspect-ratio: 16 / 10) {
    .media-card-visual {
      aspect-ratio: 16 / 10;
    }
  }

  .media-card-copy {
    max-width: none;
    margin-right: 16px;
    margin-left: 16px;
    padding-top: 12px;
  }

  .summary-grid {
    margin-top: 30px;
  }

  .summary-item {
    margin-bottom: 22px;
  }

  .feature-split {
    margin-top: 32px;
  }

  .feature-split-media {
    margin-bottom: 24px;
  }

  .feature-split-content {
    max-width: none;
    margin-right: 16px;
    margin-left: 16px;
  }

  .feature-stack-item {
    margin-bottom: 22px;
  }


  .pricing-card-grid {
    margin-top: 36px;
  }

  .pricing-card {
    padding: 25px 22px 27px;
    border-radius: 20px;
  }

  .pricing-card-header,
  .pricing-card-price span {
    min-height: 0;
  }

  .pricing-faq {
    margin-top: 44px;
  }

  .pricing-faq > h3 {
    margin-bottom: 18px;
    font-size: 25px;
    text-align: left;
  }

  .pricing-faq-item summary {
    font-size: 16px;
  }

  html.faq-disclosure-supported .pricing-faq-item summary {
    padding-right: 38px;
    padding-left: 0;
  }

  html.faq-disclosure-supported .pricing-faq-item p {
    margin-right: 38px;
    margin-left: 0;
  }

  .install-page .install-section,
  .install-page .install-section + .install-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .install-page .install-hero {
    padding-top: 44px;
  }

  .install-hero h1 {
    font-size: 37px;
    line-height: 1.1;
  }

  .install-hero-media {
    margin-top: 34px;
    border-radius: 20px;
  }

  .install-device-links,
  .install-guide-list {
    margin-top: 32px;
  }

  .install-device-links a {
    padding: 17px 18px;
    border-radius: 16px;
  }

  .install-platform-card {
    margin-top: 44px;
    padding-top: 44px;
  }

  html.install-guide-enhanced .install-platform-card.is-active {
    margin-top: 0;
    padding-top: 0;
  }

  .install-platform-intro h2 {
    font-size: 29px;
  }

  .install-platform-methods {
    margin-top: 26px;
  }

  .legal-page .legal-document {
    padding-top: 54px;
    padding-bottom: 68px;
  }

  .legal-hero h1 {
    font-size: 37px;
    line-height: 1.1;
  }

  .legal-hero .lede {
    font-size: 17px;
  }

  .legal-page .legal-contents {
    margin-top: 46px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .legal-page .legal-section {
    margin-top: 50px;
    padding-top: 50px;
  }

  .legal-page .legal-section h2 {
    font-size: 28px;
  }

  .legal-page .legal-section p,
  .legal-page .legal-section li,
  .legal-page .legal-section td,
  .legal-page .legal-section th {
    font-size: 16px;
  }

  .table-scroll-hint {
    display: block;
    margin: 26px 0 -18px;
    color: #86868b;
    font-size: 13px;
    line-height: 1.45;
  }

  .legal-page .table-wrap {
    border-radius: 16px;
  }
}

@media screen and (max-width: 560px) {
  .inline-lead-copy {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* Mobile reading scale.
   Keeps navigation and headings unchanged while raising the minimum size for
   substantive copy on phones and small tablets. */
@media screen and (max-width: 719px) {
  .install-hero .lede,
  .legal-hero .lede {
    font-size: 17px;
    line-height: 1.55;
  }

  .inline-lead-copy,
  .pricing-card-header p,
  .pricing-feature-list li,
  .pricing-faq-item p,
  .install-device-links span,
  .install-method p,
  .install-step-list li,
  .legal-page .legal-contents a {
    font-size: 16px;
    line-height: 1.55;
  }

  .pricing-card-price span,
  .pricing-billing-note,
  .seat-estimator label,
  .install-change-device,
  .legal-hero .content-note,
  .table-scroll-hint {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Page-not-found layout.
   Uses the same centred introduction, shared actions and summary rhythm as the
   rest of the site while keeping the recovery path deliberately lightweight. */
.not-found-page {
  min-height: 520px;
}

.not-found-hero {
  max-width: 980px;
  padding-top: 104px;
  padding-bottom: 104px;
  text-align: center;
}

.not-found-hero .section-intro-heading {
  max-width: 760px;
}

.not-found-hero .section-intro-lede {
  max-width: 650px;
}

.not-found-actions {
  text-align: center;
}

.not-found-actions .button:last-child {
  margin-right: 0;
}

@media screen and (max-width: 719px) {
  .not-found-page {
    min-height: 0;
  }

  .not-found-hero {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  

  .not-found-hero .section-intro-heading {
    font-size: 37px;
    line-height: 1.1;
  }

  .not-found-actions .button {
    display: block;
    width: 100%;
    margin-right: 0;
    box-sizing: border-box;
  }

  

  

  

  
}

/* Homepage discovery section.
   A final, text-led section after pricing and its FAQ. Section-flow owns the
   divider and spacing so the content follows the same rhythm as the page. */
.home-discover {
  max-width: 1120px;
  text-align: center;
}

/* Detail lists.
   Balanced padding centres each point between quiet separators. The generic
   detail-list component supports concise two-column feature summaries, while
   the export-format aliases preserve compatibility with earlier page markup. */
.detail-list,
.export-format-list {
  max-width: 980px;
  margin: 36px auto 0;
  text-align: left;
}

.detail-list-item,
.export-format-item {
  box-sizing: border-box;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid #e3e1dc;
  text-align: left;
}

.detail-list-item:last-child,
.export-format-item:last-child {
  border-bottom: 1px solid #e3e1dc;
}

@media screen and (min-width: 720px) {
  .detail-list,
  .export-format-list {
    margin-top: 44px;
    overflow: hidden;
  }

  .detail-list-item,
  .export-format-item {
    float: left;
    display: table;
    width: 47.5%;
    min-height: 128px;
    margin-right: 5%;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .detail-list-item:nth-child(odd),
  .export-format-item:nth-child(odd) {
    clear: left;
  }

  .detail-list-item:nth-child(even),
  .export-format-item:nth-child(even) {
    margin-right: 0;
  }

  .detail-list-item:nth-last-child(-n + 2),
  .export-format-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e3e1dc;
  }

  .detail-list-item .inline-lead-copy,
  .detail-list-item .content-column-copy,
  .export-format-item .inline-lead-copy {
    display: table-cell;
    vertical-align: middle;
  }
}

@supports (display: grid) {
  @media screen and (min-width: 720px) {
    .detail-list,
    .export-format-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 5%;
      overflow: visible;
    }

    .detail-list-item,
    .export-format-item {
      float: none;
      display: flex;
      align-items: center;
      width: auto;
      margin-right: 0;
    }

    .detail-list-item .inline-lead-copy,
    .detail-list-item .content-column-copy,
    .export-format-item .inline-lead-copy {
      display: block;
    }
  }
}

@media screen and (max-width: 719px) {
  .detail-list,
  .export-format-list {
    margin-top: 30px;
  }

  .detail-list-item,
  .export-format-item {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}


/* Install page opening layout.
   The device chooser now carries the page introduction, matching the opening
   rhythm used elsewhere without a separate promotional hero or device image. */
.install-page .install-device-hero {
  max-width: 1120px;
  padding-top: 50px;
  padding-bottom: 80px;
  text-align: center;
}

.install-device-intro {
  max-width: 760px;
}

.install-device-hero h1 {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  color: #1d1d1f;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

@media screen and (max-width: 719px) {
  .install-page .install-device-hero {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .install-device-hero h1 {
    font-size: 37px;
    line-height: 1.1;
  }
}


/* Homepage hero.
   The product promise, actions, device image and three writing principles form
   one opening narrative. */
.home-hero-merged {
  max-width: 1120px;
}

.home-hero-merged .home-hero-copy {
  max-width: 760px;
}

.home-hero-merged .home-hero-copy .lede {
  max-width: 740px;
  margin-top: 22px;
  margin-right: auto;
  margin-left: auto;
}

.home-hero-merged .home-hero-media {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}

.home-hero-writing-summary {
  margin-top: 52px;
}

/* Device summary.
   Uses the universal three-column copy system without the separator treatment.
   The device images are decorative product context, keeping the established
   page language rather than introducing a separate card component. */
.home-device-summary {
  width: min(100%, 1040px);
  margin-top: 46px;
}

.home-device-item {
  text-align: left;
}

.home-device-visual {
  width: 100%;
  margin: 0 0 22px;
  overflow: hidden;
  border-radius: 20px;
  text-align: center;
}

.home-device-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.summary-item-link {
  margin: 10px 0 0;
}

.home-device-install-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

@media screen and (max-width: 719px) {
  .home-hero-merged .home-hero-copy .lede {
    margin-top: 18px;
  }

  .home-hero-merged .action-panel-actions {
    margin-top: 22px;
  }

  .home-hero-writing-summary {
    width: calc(100% - 32px);
    margin-top: 34px;
  }

  .home-device-summary {
    width: 100%;
    margin-top: 32px;
  }

  .home-device-visual {
    max-width: 520px;
    margin-right: auto;
    margin-bottom: 18px;
    margin-left: auto;
  }
}

/* Quiet actions.
   A compact, low-emphasis action for supporting links that need a visible
   resting surface without competing with primary or secondary buttons. The
   deeper hover and pressed surfaces provide clear feedback while preserving
   the site's restrained navigation rhythm. */
.quiet-action {
  display: inline-block;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #e1e7d4;
  border-radius: 8px;
  background: #f3f6ed;
  color: #4f5d2d;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.quiet-action:hover,
.quiet-action:focus {
  border-color: #cbd6b5;
  background: #e8eddc;
  color: #263016;
  text-decoration: none;
}

.quiet-action:active {
  border-color: #becba5;
  background: #dfe7cf;
  color: #1f2812;
}

@media screen and (max-width: 719px) {
  .quiet-action {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* Mobile writing-card images.
   Keep the complete product frame visible, matching the full-image treatment
   used by the feature sections below. The general media-card crop remains in
   place elsewhere. */
@media screen and (max-width: 719px) {
  .home-writing .media-card-visual {
    aspect-ratio: auto;
    background: transparent;
  }

  .home-writing .media-card-visual .responsive-picture {
    height: auto;
  }

  .home-writing .media-card-image {
    height: auto;
    object-fit: contain;
    object-position: center top;
  }
}

/* Centre-stage product screenshots already include their own product frame and
   shadow. Keep the surrounding media surface transparent so the screenshots
   sit directly on the page rather than on a grey card. */
.home-writing .media-card-visual {
  background: transparent;
}



/* Tools-panel browser.
   Baseline markup is ordinary details/summary content. Browsers without native
   disclosure support see every group expanded, while capable browsers get a
   compact accordion and JavaScript only coordinates the active phone image. */
.home-tools .tools-browser {
  width: min(100%, 880px);
  margin: 44px auto 0;
  text-align: left;
}

.home-tools .tools-browser-media {
  width: 100%;
  text-align: center;
}

.home-tools .tools-browser-image {
  display: block;
  width: 100%;
  max-width: 286px;
  height: auto;
  margin: 0 auto;
}

.home-tools .tools-browser-content {
  width: 100%;
  margin-top: 36px;
}

.home-tools .tools-disclosure-list {
  border-bottom: 1px solid #e3e1dc;
}

.home-tools .tools-disclosure-group {
  display: block;
  padding: 20px 0 22px;
  border-top: 1px solid #e3e1dc;
  box-sizing: border-box;
}

.home-tools .tools-disclosure-group summary {
  margin: 0;
  color: #1d1d1f;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.home-tools .tools-disclosure-copy {
  max-width: 600px;
}

.home-tools .tools-disclosure-copy p {
  margin: 10px 42px 0 0;
  color: #6e6e73;
  font-size: 15px;
  line-height: 1.58;
}

.home-tools .tools-disclosure-copy strong {
  display: block;
  margin-bottom: 1px;
  color: #1d1d1f;
  font-weight: 600;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-group {
  padding: 0;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-group summary {
  display: block;
  position: relative;
  padding: 19px 38px 19px 0;
  list-style: none;
  cursor: pointer;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-group summary::-webkit-details-marker {
  display: none;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-group summary:hover {
  color: #5f6f31;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-group summary:after {
  position: absolute;
  top: 18px;
  right: 0;
  color: #6e6e73;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  content: "+";
}

html.tools-disclosure-supported .home-tools .tools-disclosure-group[open] summary,
html.tools-disclosure-supported .home-tools .tools-disclosure-group summary:focus {
  color: #5f6f31;
  outline: none;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-group[open] summary:after {
  color: #5f6f31;
  content: "−";
}

html.tools-disclosure-supported .home-tools .tools-disclosure-group summary:focus:after {
  color: #5f6f31;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-copy {
  padding-bottom: 19px;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-copy p {
  margin-top: 0;
  margin-bottom: 10px;
}

html.tools-disclosure-supported .home-tools .tools-disclosure-copy p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 900px) {
  .home-tools .tools-browser-media {
    float: left;
    width: 35%;
    box-sizing: border-box;
  }

  .home-tools .tools-browser-content {
    float: right;
    width: 56%;
    margin-top: 0;
    padding-top: 16px;
    box-sizing: border-box;
  }

  .home-tools .tools-browser:after {
    display: table;
    clear: both;
    content: "";
  }
}

@media screen and (max-width: 899px) {
  .home-tools .tools-browser {
    margin-top: 40px;
  }

  .home-tools .tools-browser-image {
    max-width: 270px;
  }
}

@media screen and (max-width: 719px) {
  .home-tools .tools-browser {
    margin-top: 32px;
  }

  .home-tools .tools-browser-image {
    max-width: 246px;
  }

  .home-tools .tools-browser-content {
    margin-top: 30px;
  }

  .home-tools .tools-disclosure-group summary {
    font-size: 17px;
  }
}

/* Product-led section story.
   Used by Shelf, Sources and Review: one large readable product visual followed
   by a compact capability grid. This keeps the product image prominent while
   preserving the site's established section headings and inline-bold copy. */
.section-product-story {
  width: min(100%, 1040px);
  margin: 54px auto 0;
}

.section-product-visual {
  width: 100%;
  margin: 0 auto;
  background: transparent;
}

.section-product-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 0;
  background: transparent;
}

@media screen and (max-width: 959px) {
  .section-product-story {
    width: min(100%, 920px);
    margin-top: 46px;
  }

}

@media screen and (max-width: 719px) {
  .section-product-story {
    margin-top: 38px;
  }

}


.section-product-copy {
  margin-top: 30px;
}

@media screen and (max-width: 959px) {
  .section-product-copy {
    margin-top: 26px;
  }
}

@media screen and (max-width: 719px) {
  .section-product-copy {
    margin-top: 20px;
  }
}


/* Capability column labels.
   Variant for the product-story sections: the bold lead sits on its own line
   while retaining the same type weight, body copy and universal column system.
   The hero and Centre Stage deliberately keep their existing treatments. */
.content-column-copy {
  margin: 0;
  color: #707276;
  font-size: 16px;
  line-height: 1.58;
}

.content-column-label {
  display: block;
  margin: 0 0 5px;
  color: #202327;
  font-weight: 650;
}

@media screen and (max-width: 719px) {
  .content-column-copy {
    font-size: 16px;
    line-height: 1.56;
  }

  .content-column-label {
    margin-bottom: 4px;
  }
}

/* Shelf, Citations and Review.
   These three related stories share one major section boundary, but each keeps
   the original product-led composition: centred heading and lede, full-width
   screenshot, then the separated capability points. */
.home-writing-stories {
  max-width: 1120px;
}

.writing-product-story {
  width: 100%;
  margin: 0;
}

.writing-product-story + .writing-product-story {
  margin-top: 80px;
  padding-top: 80px;
  border-top: 1px solid #e3e1dc;
}

@media screen and (max-width: 719px) {
  .writing-product-story + .writing-product-story {
    margin-top: 56px;
    padding-top: 56px;
  }
}

/* Very narrow legal pages may contain long Germanic compounds. Keep the
   wording intact and let typography/layout absorb the extra length. */
@media screen and (max-width: 360px) {
  html[lang="de"] .legal-hero h1 {
    font-size: 28px;
  }

  html[lang="de"] .legal-page .legal-section h2 {
    font-size: 23px;
  }

  html[lang="de"] .legal-hero h1,
  html[lang="de"] .legal-page .legal-section h2,
  html[lang="de"] .legal-page .legal-section h3,
  html[lang="de"] .legal-page .legal-list li {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}