/* /download — the Android app page.
   One point of view: the real app, in real screenshots, next to the one action
   (download). Everything else on the page is supporting detail and stays quiet.
   Colour and type come from ai-design-system.css + market.css. */

.dl { --wrap: min(1180px, 100% - 2 * var(--shell-pad, 24px)); }
.dl-wrap { width: var(--wrap); margin-inline: auto; }

/* ------------------------------------------------------------------ hero */
.dl-hero {
  background: var(--teal-soft);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
.dl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.2rem, 5vw, 4.5rem);
}
.dl-hero-copy { min-width: 0; }
.dl-kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1rem;
  font: 700 .9rem/1.2 var(--font-body);
  color: var(--teal-deep);
}
.dl-kicker::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--leaf); }
.dl-hero h1 {
  margin: 0 0 1.1rem;
  font: 800 clamp(2.6rem, 6vw, 5rem)/1 var(--font-display);
  font-stretch: 92%;
  letter-spacing: -.03em;
  color: var(--ink-deep);
  text-wrap: balance;
}
.dl-mark {
  display: inline-block;
  margin-top: .1em;
  padding: 0 .2em .05em;
  border: 3px solid var(--edge);
  border-radius: .24em;
  box-shadow: .07em .07em 0 var(--edge);
  background: var(--btn-tomato);
  color: #fff;
}
.dl-lead {
  max-width: 46ch;
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-deep);
}
.dl-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.dl-get { gap: .6rem; }
.dl-get-size {
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: .85rem;
  font-weight: 700;
}

/* the facts a sideloader actually checks */
.dl-facts {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: .4rem 1.6rem;
  margin: 1.6rem 0 0;
}
.dl-facts div { display: grid; gap: .1rem; }
.dl-facts dt { font: 600 .8rem var(--font-body); color: var(--teal-deep); }
.dl-facts dd { margin: 0; font: 750 1.05rem var(--font-display); color: var(--ink-deep); }

/* real screenshots in a fanned stack */
.dl-phones {
  position: relative;
  min-height: clamp(360px, 46vw, 560px);
  min-width: 0;
}
.dl-phone {
  position: absolute;
  margin: 0;
  width: clamp(150px, 19vw, 240px);
  aspect-ratio: 450 / 1000;
  overflow: hidden;
  border: 6px solid var(--ink-deep);
  border-radius: 28px;
  background: var(--ink-deep);
  box-shadow: var(--lift-2);
}
.dl-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dl-phone-1 { left: 50%; top: 0; transform: translateX(-50%); z-index: 3; }
.dl-phone-2 { left: 6%; top: 9%; transform: rotate(-6deg); z-index: 2; }
.dl-phone-3 { right: 6%; top: 9%; transform: rotate(6deg); z-index: 1; }

/* -------------------------------------------------------------- sections */
.dl-section { padding-block: clamp(2.4rem, 5vw, 4rem) 0; }
.dl-section h2 {
  margin: .4rem 0 1.4rem;
  max-width: 24ch;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.1;
}

/* what's new: each note wears its enamel family on the left edge */
.dl-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.dl-note {
  display: grid;
  gap: .35rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--f-soft);
}
.dl-note strong { font: 750 1.12rem/1.2 var(--font-display); letter-spacing: -.015em; color: var(--f-deep); }
.dl-note span { color: var(--text-primary); line-height: 1.55; }

/* sequential install steps */
.dl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.dl-steps li {
  counter-increment: step;
  display: grid;
  gap: .4rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.dl-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  margin-bottom: .3rem;
  border-radius: 50%;
  background: var(--ink-deep);
  color: #fff;
  font: 750 .95rem var(--font-display);
}
.dl-steps strong { font: 750 1.1rem var(--font-display); }
.dl-steps span { color: var(--text-secondary); line-height: 1.55; }

.dl-verify {
  margin-top: 1rem;
  padding: .2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.dl-verify summary { cursor: pointer; padding: .8rem 0; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.dl-verify summary:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 6px; }
.dl-verify p { color: var(--text-secondary); line-height: 1.6; }
.dl-sha {
  display: block;
  margin: .2rem 0 .8rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  background: var(--bg-tertiary);
  font: 600 .85rem/1.5 var(--font-mono);
  overflow-wrap: anywhere;
  user-select: all;
}

.dl .download-promo-slot { padding-top: clamp(2.4rem, 5vw, 4rem); }

/* web app panel (iPhone) — reuses the shared install panel, softened */
.dl .web-install-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  background: var(--chili-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.dl .web-install-panel h2 { margin-top: .3rem; }
.dl .web-install-panel .btn { margin: .3rem .5rem .3rem 0; }
.dl .install-kicker { color: var(--chili-deep); font-weight: 700; font-size: .9rem; margin: 0; }
.dl .install-instructions details { border-bottom: 1px solid rgba(138, 57, 4, .2); padding: .9rem 0; }
.dl .install-instructions summary { cursor: pointer; font-weight: 700; }
.dl .install-instructions p { margin: .6rem 0; color: var(--text-secondary); }
.dl .web-install-panel [hidden] { display: none; }
.dl .download-note { font-size: .9rem; color: var(--text-muted); }

/* version history */
.dl .download-history { padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.dl .download-history > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 48px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--text-secondary);
}
.dl .download-history > summary::-webkit-details-marker { display: none; }
.dl .download-history > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--text-muted); }
.dl .download-history[open] > summary::after { content: "\2212"; }
.dl .download-history-hint { font-weight: 400; font-size: .9rem; color: var(--text-muted); }
.dl .download-instructions h3 { margin: 1.4rem 0 .5rem; font-size: 1.1rem; }
.dl .download-instructions ul { margin: 0 0 .8rem 1.2rem; color: var(--text-secondary); line-height: 1.6; }
.dl .download-instructions li { margin-bottom: .4rem; }

/* --------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  .dl-hero-grid { grid-template-columns: 1fr; }
  .dl-phones { min-height: 0; height: clamp(300px, 92vw, 460px); }
  .dl-phone { width: clamp(130px, 38vw, 200px); }
  .dl-notes, .dl-steps { grid-template-columns: 1fr; }
  .dl .web-install-panel { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .dl-facts { grid-template-columns: repeat(2, max-content); }
  .dl-actions .btn { width: 100%; justify-content: center; }
  .dl-phone-2 { left: 0; }
  .dl-phone-3 { right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .dl-phone { transition: transform .3s var(--ease-spring); }
  .dl-phones:hover .dl-phone-2 { transform: rotate(-9deg) translateX(-6px); }
  .dl-phones:hover .dl-phone-3 { transform: rotate(9deg) translateX(6px); }
}