/* Product, support and privacy pages in the Labs identity. Loads after labs.css.
   The page markup predates the Labs rebuild; this file restyles its classes. */
.lf-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; line-height: 1.7; text-transform: uppercase; }
.prose em, .section__note em, .doc em { font-family: inherit; font-style: italic; letter-spacing: 0; color: inherit; }
.path { font-family: var(--mono); font-size: .8em; padding: 2px 6px; border: 1px solid var(--line); background: #222a24; color: var(--ink); overflow-wrap: anywhere; }
.paper .path { background: #e4e5da; border-color: #a9b4a6; color: var(--dark); }

/* Breadcrumb */
.crumb { padding-top: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--line); }
.crumb a:hover { color: var(--ink); border-color: currentColor; }
.crumb span { margin: 0 9px; }

/* Product hero */
.prod { padding-block: 56px 72px; }
.prod__lockup { display: flex; align-items: center; gap: 32px; }
.prod__icon { width: 112px; height: 112px; border-radius: 24px; flex: none; }
.prod__name { font-size: clamp(48px, 6vw, 84px); }
.prod__rule, .section__rule { display: none; }
.prod__eyebrow { margin-top: 18px; color: var(--muted); }
.prod__jp { margin-top: 4px; font-size: 14px; color: var(--muted); }
.prod__statement { margin-top: 48px; max-width: 22ch; font-family: var(--display); font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.prod__lede { margin-top: 24px; max-width: 62ch; font-size: 18px; line-height: 1.7; color: var(--muted); }

/* Download and status panel */
.dl { margin-top: 44px; max-width: 720px; border: 1px solid var(--line); background: #222a24; padding: 30px; }
.dl--pending { background: transparent; }
.dl__btn { display: inline-flex; align-items: center; gap: 38px; min-height: 52px; padding: 15px 22px; background: var(--accent); color: var(--ground); border: 1px solid var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.dl__btn::after { content: "↓"; font-size: 20px; font-weight: 400; }
.dl__btn:hover { background: var(--ink); border-color: var(--ink); }
.dl__pending-title { font-size: 28px; }
.dl__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.dl__meta dt, .spec dt, .contact__row dt { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dl__meta dd, .spec dd { margin: 6px 0 0; font-family: var(--mono); font-size: 13px; }
.dl__hash { margin-top: 18px; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--muted); word-break: break-all; }
.dl__hash strong { color: var(--ink); font-weight: 500; }
.dl__note { margin-top: 16px; max-width: 60ch; font-size: 14px; color: var(--muted); }

/* At-a-glance strip */
.spec { border-block: 1px solid var(--line); }
.spec dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.spec div { padding: 20px 0 20px 24px; border-left: 1px solid var(--line); }
.spec div:first-child { border-left: 0; padding-left: 0; }

/* Sections: consecutive dark sections share one gap; a paper band resets it. */
.section { padding-block: 76px; }
.section + .section, .prod + .section { padding-top: 0; }
.section.paper, .paper + .section { padding-top: 76px; }
.section__head { max-width: 760px; margin-bottom: 40px; }
.section__title { font-size: clamp(32px, 3.4vw, 46px); }
.section__note { margin-top: 18px; max-width: 640px; font-size: 18px; color: var(--muted); }
.paper .section__note, .paper .feat__body { color: #505e51; }

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.feat { border-top: 1px solid var(--line); padding: 24px 0 36px; }
.paper .feat { border-color: #a9b4a6; }
.feat__name { font-size: 24px; }
.feat__body { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--muted); }

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.step__num { padding-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--accent); }
.step__name { font-size: 24px; }
.step__body { margin-top: 12px; max-width: 64ch; font-size: 16px; color: var(--muted); }

.perms { width: 100%; border-collapse: collapse; }
.perms caption { text-align: left; margin-bottom: 20px; max-width: 64ch; color: var(--muted); }
.perms th, .perms td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); }
.perms thead th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--muted); }
.perms tbody th { font-weight: 500; white-space: nowrap; }
.perms td { font-size: 15px; color: var(--muted); }
.perms td:first-of-type { font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--ink); }

.prose { max-width: 68ch; }
.prose p, .prose li { color: var(--muted); }
.prose p { margin-top: 18px; }
.prose ul { margin: 18px 0 0; padding-left: 20px; }
.prose li { margin: 10px 0; }
.prose strong, .doc strong { color: var(--ink); }

/* Per-app support band */
.contact .section__head { margin-bottom: 0; }
.contact__body { margin-top: 20px; }
.contact__rows { margin: 36px 0 0; max-width: 640px; border-top: 1px solid var(--line); }
.contact__row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.contact__row dd { margin: 0; font-family: var(--mono); font-size: 13px; }

/* Support and privacy documents */
.doc { max-width: 780px; margin-inline: auto; padding-block: 64px 88px; }
.doc h1 { font-size: clamp(40px, 5vw, 64px); }
.doc__rule { height: 1px; background: var(--line); margin: 32px 0 8px; }
.doc h2 { margin-top: 52px; font-size: 30px; }
.doc h3 { margin-top: 30px; font-family: var(--body); font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.doc p, .doc li { color: var(--muted); }
.doc p { margin-top: 16px; }
.doc ul { margin: 16px 0 0; padding-left: 20px; }
.doc li { margin: 10px 0; }
.doc__updated { margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.footer-links { display: flex; gap: 24px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

@media (max-width: 1050px) { .feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .prod { padding-block: 36px 48px; }
  .prod__lockup { gap: 20px; }
  .prod__icon { width: 84px; height: 84px; border-radius: 18px; }
  .prod__statement { margin-top: 36px; }
  .prod__lede { font-size: 17px; }
  .dl { padding: 22px; }
  .dl__meta { grid-template-columns: 1fr 1fr; }
  .spec dl { grid-template-columns: 1fr 1fr; }
  .spec div:nth-child(3) { border-left: 0; padding-left: 0; }
  .spec div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section { padding-block: 52px; }
  .section.paper, .paper + .section { padding-top: 52px; }
  .feats { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .step__num { padding-top: 0; }
  .perms, .perms tbody, .perms tr, .perms td, .perms th { display: block; width: 100%; }
  .perms thead { display: none; }
  .perms caption { display: block; max-width: none; }
  .perms tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .perms th, .perms td { border: 0; padding: 0 0 6px; white-space: normal; }
  .contact__row { flex-direction: column; gap: 4px; }
  .doc { padding-block: 40px 56px; }
  .doc h2 { font-size: 26px; }
}
@media (max-width: 520px) {
  .prod__lockup { flex-direction: column; align-items: flex-start; }
  .dl__meta { grid-template-columns: 1fr; }
  .dl__btn { width: 100%; justify-content: space-between; }
}
@media print { .dl__btn { display: none; } }