/* Final visual refinements: a warmer closing section and a more tactile device frame. */
.iphone-mockup {
  isolation: isolate;
  padding: 13px;
  border: 2px solid #b6b8b3;
  border-radius: 38px;
  background: linear-gradient(145deg, #15191b 0%, #687076 17%, #2d3336 47%, #899097 76%, #171b1d 100%);
  box-shadow: 0 30px 48px -25px rgba(35, 37, 31, .72), 0 3px 2px rgba(255, 255, 255, .42) inset, 0 -3px 3px rgba(0, 0, 0, .38) inset;
}
.iphone-mockup::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  border-radius: 32px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 22%, transparent 75%, rgba(255, 255, 255, .12));
}
.iphone-screen {
  border: 4px solid #0b0d0f;
  border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 12px rgba(0, 0, 0, .42);
}
.dynamic-island {
  top: 50%;
  left: 22px;
  width: 17px;
  height: 70px;
  background: #010202;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .07);
  transform: translateY(-50%);
}
.phone-control { background: linear-gradient(#9fa4a6, #3e4649); }

/* Monk's landscape interface reads naturally on a tablet, not a phone. */
.tablet-stage { width: min(580px, 100%); }
.tablet-mockup {
  padding: 11px;
  border: 1px solid #9a9e9b;
  border-radius: 18px;
  background: linear-gradient(145deg, #34393a, #737a7b 50%, #303536);
  box-shadow: 0 28px 46px -27px rgba(35, 37, 31, .65), 0 1px 1px rgba(255, 255, 255, .32) inset;
}
.tablet-mockup::before { display: none; }
.tablet-screen { border-width: 4px; border-radius: 10px; }
.device-note { margin: 24px 10px 0 auto; }

/* Store calls to action use deliberate hierarchy rather than generic buttons. */
.store-button {
  min-height: 56px;
  padding: 11px 17px;
  border-radius: 17px;
  gap: 13px;
  box-shadow: 0 7px 16px -15px rgba(35, 37, 31, .9);
}
.store-button img { width: 25px; height: 25px; }
.amazon-mark {
  display: block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  background: var(--ink);
  -webkit-mask: url("../images/amazon.svg") center / contain no-repeat;
  mask: url("../images/amazon.svg") center / contain no-repeat;
}
.download .amazon-mark { background: var(--paper-bright); }
.store-button small { font-size: 10px; letter-spacing: .12em; }
.store-button strong { font-size: 16px; letter-spacing: -.01em; }
.store-button > b { margin-left: auto; font-size: 19px; font-weight: 400; line-height: 1; opacity: .7; transition: transform .15s ease, opacity .15s ease; }
.store-button:hover > b { transform: translate(2px, -2px); opacity: 1; }
.store-row .store-button { min-width: 212px; }
.download-actions { gap: 14px; }
.download-actions .store-button {
  min-height: 62px;
  padding: 11px 19px;
  border-radius: 18px;
  gap: 14px;
  box-shadow: none;
}
.download-actions .store-button img { width: 25px; height: 25px; }
.download-actions .store-button small { font-size: 10px; letter-spacing: .12em; }
.download-actions .store-button strong { font-size: 16px; }
.download-actions .store-button > b { font-size: 18px; }
.download-actions .store-button.primary { background: #e87816; border-color: #e87816; }
.download-actions .store-button.primary:hover { background: #c96412; border-color: #c96412; }
.download-actions .store-button.dark:hover { border-color: #e87816; background: #23251f; }

/* The closing call to action follows the reference's compact, quiet rhythm. */
.download { padding-block: clamp(52px, 6vw, 80px); }
.download-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 4vw, 56px); }
.download h2 { margin-top: 13px; margin-bottom: 14px; font-size: clamp(30px, 3.2vw, 43px); }
.download-grid > div > p:last-child { font-size: 16px; line-height: 1.6; }
.download-actions > p { font-size: 12px; line-height: 1.55; }

.download { background: var(--ink); }
.download .kicker { color: #e58d54; }
.download-grid > div > p:last-child { color: #c9cbc1; }
.download-actions .store-button { border-color: #8c9083; }
.download-actions .store-button.primary { color: var(--paper-bright); border-color: var(--brass); background: var(--brass); }
.download-actions .store-button.dark { color: var(--paper-bright); border-color: #8c9083; background: transparent; }
.download-actions > p { color: #bfc1b6; }

@media (max-width: 780px) {
  .download-grid { grid-template-columns: 1fr; }
}

footer { border-top: 1px solid var(--line); background: var(--paper-bright); color: var(--ink); }
.footer-inner > img { filter: none; }
.footer-inner p, .footer-inner small { color: var(--muted); }
.footer-inner nav a { color: var(--ink); }