/* Page layout is independent of the fixed-size, decorative application demo.
   Inline styles in the exported cards retain their visual design only. */
[data-landing] {
  --landing-gutter: clamp(16px, 3vw, 40px);
  width: 100%;
}
.landing-container {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding: 56px var(--landing-gutter);
}
.landing-container > * { min-width: 0; }
.landing-header {
  min-height: 76px;
  padding-block: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 40px;
  padding-block: 56px 60px;
}
.landing-copy > p { width: auto !important; }
.landing-copy h1 { font-size: clamp(32px, 3.2vw, 45px) !important; }
.landing-copy br { display: none; }
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 34px; }
.landing-actions > a { justify-content: center; }
.landing-benefits { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 22px; border-top: 1px solid #1f2937; }
.landing-benefits > div { flex: 1 1 200px; min-width: 0; }
.landing-benefits > div > div { white-space: normal !important; }
[data-mock-wrap] { position: relative; width: 100%; aspect-ratio: 963 / 560; min-width: 0; }
.landing-product { padding-block: 44px 76px; }
.landing-reminders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); align-items: center; gap: 64px; }
.landing-steps { padding-block: 40px; }
.landing-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #1f2937; }
.landing-templates { padding-block: 44px; }
.landing-templates > div:first-child { flex-wrap: wrap; }
.landing-templates p { width: auto !important; height: auto !important; }
.landing-security { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: 56px; padding-block: 72px; }
.landing-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #e5e7eb; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.landing-pricing { padding-block: 84px; }
.landing-pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 64px; }
.landing-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-block: 28px; }
.landing-footer > div { flex-wrap: wrap; }
[data-landing] h2 { white-space: normal !important; overflow-wrap: break-word; }
[data-landing] section[id], #demo { scroll-margin-top: 140px; }
.landing-carousel > button { min-width: 44px; min-height: 44px; }
.landing-card-art-frame { position: relative; width: 100%; height: var(--art-height, 600px); }
.landing-card-art {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--art-width, 480px);
  transform: scale(var(--art-scale, 1));
  transform-origin: top left;
}
.landing-reminder-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.landing-reminder-recipient { flex-wrap: wrap; overflow-wrap: anywhere; }
[data-dc-scroll] { overscroll-behavior: contain; }
[data-landing] a:focus-visible, [data-landing] button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }

@media (min-width: 1051px) {
  /* Full-width desktop composition: a proportional left inset, with the app
     frame meeting the scrollbar edge. Grid sizing excludes classic scrollbar
     width, so the toolbar remains complete without viewport-width overflow. */
  .landing-hero {
    max-width: none;
    padding-left: 5.6%;
    padding-right: 0;
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
    gap: clamp(24px, 2vw, 40px);
  }
  .landing-copy h1 {
    font-size: clamp(32px, 3vw, 64px) !important;
  }
  .landing-copy h1 br { display: initial; }
  .landing-hero [data-mock-inner] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

@media (max-width: 1050px) {
  .landing-hero, .landing-reminders, .landing-security, .landing-pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .landing-copy { max-width: 720px; }
  .landing-copy h1 { font-size: clamp(32px, 5vw, 45px) !important; }
  [data-mock-wrap] { max-width: 963px; margin-inline: auto; }
  .landing-header { flex-wrap: wrap; gap: 16px; }
  .landing-header nav { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; gap: 12px 24px !important; }
  [data-doc-strip] > div { flex-basis: calc(50% - 10px) !important; }
}
@media (max-width: 640px) {
  .landing-container { padding-block: 36px; }
  .landing-header { padding-block: 12px; gap: 12px; }
  .landing-header > div:first-child { gap: 8px !important; }
  .landing-header > div:first-child > div { width: 30px !important; height: 34px !important; }
  .landing-header span { font-size: 22px !important; }
  .landing-header a[href="/login"] { padding: 10px !important; font-size: 12px !important; white-space: nowrap; }
  .landing-header nav { gap: 12px 16px !important; font-size: 12px !important; }
  .landing-actions { align-items: stretch; }
  .landing-actions > a { flex: 1 1 240px; }
  .landing-carousel { display: grid !important; grid-template-columns: 1fr 1fr; }
  .landing-carousel > div { grid-column: 1 / -1; grid-row: 1; }
  .landing-carousel > button { grid-row: 2; justify-self: center; }
  [data-bento-strip] > div { flex-basis: 100% !important; padding: 16px !important; }
  [data-doc-strip] > div { flex-basis: 100% !important; transform: none !important; opacity: 1 !important; }
  .landing-steps-grid, .landing-security-grid { grid-template-columns: minmax(0, 1fr); }
  .landing-steps-grid > div { padding: 24px 0 !important; border-right: 0 !important; }
  [data-dc-modal] { padding: 12px !important; }
  [data-dc-modal] > div { max-height: 92dvh !important; }
  [data-dc-scroll] { padding: 12px !important; justify-content: flex-start !important; }
  [data-dc-scroll] > div { padding: 20px 14px !important; min-width: 0; }
  [data-dc-scroll] > div > div { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-landing] *, [data-landing] *::after, [data-landing] *::before { animation: none !important; transition: none !important; }
}