/* TBR Shelf product page — layered on /assets/css/styles.css.
   The app's own palette: deep teal, walnut, brass, paper. */

.tbr {
  --tbr-teal:   #1f6f6a;
  --tbr-teal-2: #134b48;
  --tbr-brass:  #c9962f;
  --tbr-walnut: #4a2e1c;
  --tbr-paper:  #f3efe7;
  --tbr-serif:  "Newsreader", "New York", "Iowan Old Style", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  .tbr { --tbr-teal: #5fc0b5; --tbr-paper: #15201f; }
}

.tbr h1, .tbr h2, .tbr .tbr-serif { font-family: var(--tbr-serif); letter-spacing: -0.015em; font-weight: 600; }

/* ---------- hero ---------- */
.tbr-hero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(32px, 5vw, 56px); }
.tbr-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.tbr-hero .app-id { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.tbr-hero .app-icon {
  width: 64px; height: 64px; border-radius: 15px; flex: none;
  background: linear-gradient(160deg, #23807a, #0f3f3c);
  box-shadow: var(--shadow); display: grid; place-items: center;
}
.tbr-hero .app-icon svg { width: 38px; height: 38px; }
.tbr-hero .app-id strong { display: block; font-size: 1.05rem; }
.tbr-hero .app-id span { color: var(--text-muted); font-size: 0.92rem; }
.tbr-hero h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); line-height: 1.04; margin-top: 22px; max-width: 14ch; }
.tbr-hero .lede { font-size: clamp(1.08rem, 1.9vw, 1.28rem); color: var(--text-muted); max-width: 52ch; margin-top: 18px; }
.tbr-hero .hero-actions { margin-top: 28px; }
.btn-tbr { background: var(--tbr-teal); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-tbr { color: #06201e; } }
.btn-tbr:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(31,111,106,.28); }
.btn[aria-disabled="true"] { cursor: default; }
.tbr-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding: 0; list-style: none; }
.tbr-facts li {
  font-size: 0.85rem; color: var(--text-muted); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--panel);
}

.hero-devices { position: relative; min-height: 520px; }
.hero-devices .phone { position: absolute; width: min(46%, 250px); }
.hero-devices .phone.back  { left: 6%;  top: 0;    transform: rotate(-4deg); }
.hero-devices .phone.front { right: 6%; top: 48px; transform: rotate(3deg); z-index: 1; }

/* ---------- device frames ---------- */
.phone {
  border-radius: 13.5% / 6.2%;
  padding: 2.4%;
  background: #121416;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, var(--shadow-lift);
}
.phone img { border-radius: 11.6% / 5.35%; width: 100%; height: auto; }
.tablet {
  border-radius: 4.2%;
  padding: 1.6%;
  background: #121416;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, var(--shadow-lift);
}
.tablet img { border-radius: 3%; width: 100%; height: auto; }

/* ---------- proof strip ---------- */
.proof { padding: 0 0 clamp(24px, 4vw, 40px); }
.proof .glass { padding: clamp(22px, 3vw, 30px) clamp(24px, 4vw, 40px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.proof .stat strong { display: block; font-family: var(--tbr-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; color: var(--tbr-teal); }
.proof .stat span { color: var(--text-muted); font-size: 0.92rem; }

/* ---------- feature rows ---------- */
.feature { padding: clamp(40px, 7vw, 88px) 0; border-top: 1px solid var(--hairline); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.feature.flip .feature-copy { order: 2; }
.feature .kicker {
  color: var(--tbr-teal); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
}
.feature h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 10px; line-height: 1.1; }
.feature p { color: var(--text-muted); font-size: 1.06rem; margin-top: 16px; max-width: 54ch; }
.feature ul { color: var(--text-muted); margin: 18px 0 0; padding-left: 1.1em; max-width: 54ch; }
.feature li { margin: 6px 0; }
.feature li strong { color: var(--text); font-weight: 600; }
.feature-media { display: flex; justify-content: center; gap: clamp(14px, 3vw, 28px); align-items: flex-start; }
.feature-media .phone { width: min(48%, 270px); }
.feature-media .phone.solo { width: min(70%, 300px); }
.feature-media .phone.lower { margin-top: 48px; }
.feature-media .tablet { width: 100%; }
.feature-media figcaption, .cap { color: var(--text-faint); font-size: 0.82rem; margin-top: 10px; text-align: center; }
.feature-media figure { margin: 0; }

/* ---------- shop chips ---------- */
.shops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.shops span {
  font-size: 0.88rem; padding: 6px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--text);
}
.disclosure { font-size: 0.85rem !important; color: var(--text-faint) !important; }

/* ---------- mac ---------- */
.mac-section { padding: clamp(40px, 7vw, 88px) 0; border-top: 1px solid var(--hairline); }
.mac-window { margin: 0; }
.mac-window img {
  width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lift);
}
.mac-hero { margin-bottom: clamp(24px, 4vw, 40px); }
.mac-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 32px); }
@media (max-width: 760px) { .mac-grid { grid-template-columns: 1fr; } }

/* ---------- gallery ---------- */
.gallery { padding: clamp(40px, 7vw, 88px) 0; border-top: 1px solid var(--hairline); }
.gallery-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 4px 28px; margin-top: 28px; -webkit-overflow-scrolling: touch;
}
.gallery-track figure { margin: 0; flex: 0 0 220px; scroll-snap-align: start; }
.gallery-track .phone { width: 100%; }

/* ---------- help + faq ---------- */
.help { padding: clamp(40px, 7vw, 88px) 0; border-top: 1px solid var(--hairline); }
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.help-card { padding: clamp(22px, 3vw, 30px); }
.help-card h3 { font-size: 1.15rem; }
.help-card p, .help-card li { color: var(--text-muted); font-size: 0.98rem; }
.help-card p { margin-top: 10px; }
.help-card ul, .help-card ol { margin: 10px 0 0; padding-left: 1.2em; }
.help-card li { margin: 6px 0; }
.help-card strong { color: var(--text); }
.help-card a, .faq a, .support-card a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 4px 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 600; font-size: 1.05rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; font-weight: 400; color: var(--text-faint);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-muted); padding: 0 0 18px; max-width: 70ch; }
.faq details p + p { margin-top: -6px; }

.support-card { padding: clamp(26px, 4vw, 40px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.support-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.support-card p { color: var(--text-muted); margin-top: 12px; }
.support-card .links { display: flex; flex-direction: column; gap: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .tbr-hero-grid, .feature-grid, .support-card { grid-template-columns: 1fr; }
  .feature.flip .feature-copy { order: 0; }
  .hero-devices { min-height: 0; display: flex; justify-content: center; gap: 14px; }
  .hero-devices .phone { position: static; width: min(44%, 220px); transform: none; }
  .hero-devices .phone.front { margin-top: 36px; }
  .proof .glass { grid-template-columns: repeat(2, 1fr); }
  .help-grid { grid-template-columns: 1fr; }
}