/* ===== Resources (digital downloads) - built on the .ttm- design system ===== */
.ttm-res{ --ttm-ink:#111013; --ttm-muted:#5b605b; --ttm-line:#e7e9e2; --ttm-soft:#f6f8ef; }

.ttm-res-hero-inner{ max-width:760px; }
.ttm-res-hero-inner h1{ margin-bottom:18px; }
.ttm-res-hero-inner p{ font-size:18px; line-height:1.7; color:var(--ttm-muted); margin:0; }

/* ---------- listing grid ---------- */
.ttm-res-listing{ padding:70px 0 90px; }
.ttm-res-listing.alt{ background:var(--ttm-soft); border-top:1px solid var(--ttm-line); }
.ttm-res-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
@media (max-width:992px){ .ttm-res-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .ttm-res-grid{ grid-template-columns:1fr; } }

.ttm-res-card{ position:relative; display:flex; flex-direction:column; background:#fff;
   border:1px solid var(--ttm-line); border-radius:18px; overflow:hidden; text-decoration:none;
   transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ttm-res-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(17,16,19,.10); border-color:#d7dacf; }

.ttm-res-badge{ position:absolute; top:14px; right:14px; z-index:2; font-size:12px; font-weight:700;
   letter-spacing:.4px; text-transform:uppercase; padding:5px 12px; border-radius:50px; line-height:1; }
.ttm-res-badge.is-free{ background:var(--ttm-accent); color:#0a1f0d; }
.ttm-res-badge.is-paid{ background:#111013; color:#fff; }

.ttm-res-thumb{ display:block; aspect-ratio:16/10; background:var(--ttm-soft); overflow:hidden; }
.ttm-res-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.ttm-res-body{ display:flex; flex-direction:column; gap:8px; padding:20px 20px 22px; flex:1; }
.ttm-res-title{ font-size:19px; font-weight:700; color:var(--ttm-ink); line-height:1.3; }
.ttm-res-desc{ font-size:14.5px; line-height:1.6; color:var(--ttm-muted);
   display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ttm-res-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; }
.ttm-res-price{ font-size:16px; font-weight:700; color:var(--ttm-ink); }
.ttm-res-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ttm-accent); }
.ttm-res-link svg{ transition:transform .2s ease; }
.ttm-res-card:hover .ttm-res-link svg{ transform:translateX(3px); }

.ttm-res-empty{ text-align:center; padding:60px 0; }
.ttm-res-empty h3{ font-size:24px; font-weight:700; color:var(--ttm-ink); margin:0 0 10px; }
.ttm-res-empty p{ color:var(--ttm-muted); margin:0; }

/* ---------- detail (app-store style) ---------- */
.ttm-res-detail-hero{ position:relative; overflow:hidden; background:var(--ttm-soft);
   padding:150px 0 70px; border-bottom:1px solid var(--ttm-line); }
.ttm-res-detail-hero .ttm-shape-1{ position:absolute; top:90px; right:-30px; color:var(--ttm-accent); opacity:.16; }

/* two-column hero: copy on the left, app icon on the right (mirrors brand/service hero) */
.ttm-res-head{ display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center; }
.ttm-res-icon{ position:relative; flex:0 0 auto; width:210px; height:210px; border-radius:34px; overflow:hidden;
   background:#fff; border:1px solid var(--ttm-line); box-shadow:0 18px 44px rgba(17,16,19,.12); justify-self:end; }
.ttm-res-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.ttm-res-icon .ttm-res-badge{ top:auto; right:auto; bottom:12px; left:12px;
   box-shadow:0 4px 12px rgba(17,16,19,.22); }
.ttm-res-head-main{ min-width:0; }
.ttm-res-head-main h1{ font-size:clamp(30px,4.4vw,46px); line-height:1.08; font-weight:700;
   color:var(--ttm-ink); margin:0 0 12px; letter-spacing:-.5px; }
.ttm-res-tagline{ font-size:18px; line-height:1.6; color:var(--ttm-muted); margin:0 0 24px; max-width:560px; }

.ttm-res-cta-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ttm-res-detail-price{ font-size:20px; font-weight:700; color:var(--ttm-ink); }
.ttm-res-soon{ cursor:default; }

@media (max-width:768px){
   .ttm-res-head{ grid-template-columns:1fr; gap:24px; }
   .ttm-res-icon{ order:-1; justify-self:start; width:120px; height:120px; border-radius:26px; }
}

/* main: content + sidebar (mirrors the brand single page) */
.ttm-res-main{ padding:60px 0 80px; }
.ttm-res-article{ min-width:0; }

/* screenshots */
.ttm-res-shots-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-top:30px; }
.ttm-res-shot{ border:1px solid var(--ttm-line); border-radius:14px; overflow:hidden; background:var(--ttm-soft); }
.ttm-res-shot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* rich body */
.ttm-res-rich{ font-size:16.5px; line-height:1.8; color:#33372f; }
.ttm-res-rich h2{ font-size:26px; font-weight:700; color:var(--ttm-ink); margin:34px 0 14px; }
.ttm-res-rich h3{ font-size:21px; font-weight:700; color:var(--ttm-ink); margin:28px 0 12px; }
.ttm-res-rich p{ margin:0 0 16px; }
.ttm-res-rich ul, .ttm-res-rich ol{ margin:0 0 16px; padding-left:22px; }
.ttm-res-rich li{ margin-bottom:8px; }
.ttm-res-rich a{ color:var(--ttm-accent); text-decoration:underline; }
.ttm-res-rich img{ max-width:100%; height:auto; border-radius:12px; }

/* changelog / what's new - deliberately distinct from the rich body */
.ttm-res-changelog{ background:var(--ttm-soft); border:1px solid var(--ttm-line);
   border-left:4px solid var(--ttm-accent); border-radius:14px; padding:24px 28px; margin-bottom:34px; }
.ttm-res-changelog-head{ display:flex; align-items:center; justify-content:space-between; gap:14px;
   margin-bottom:14px; }
.ttm-res-changelog-ver{ font-size:13px; font-weight:700; color:var(--ttm-ink); background:#fff;
   border:1px solid var(--ttm-line); border-radius:50px; padding:4px 12px; }
.ttm-res-changelog-body{ font-size:15px; line-height:1.85; color:#33372f;
   font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

/* sidebar spec list (mirrors brand "At a Glance") */
.ttm-res-spec{ list-style:none; margin:0; padding:0; }
.ttm-res-spec li{ display:flex; justify-content:space-between; gap:14px; padding:11px 0;
   border-bottom:1px dashed var(--ttm-line); font-size:14.5px; }
.ttm-res-spec li:last-child{ border-bottom:0; }
.ttm-res-spec .k{ color:var(--ttm-muted); }
.ttm-res-spec .v{ color:var(--ttm-ink); font-weight:600; text-align:right; }
.ttm-res-side-links{ display:flex; flex-direction:column; gap:10px; margin-top:18px;
   padding-top:18px; border-top:1px solid var(--ttm-line); }
.ttm-res-side-links .ttm-btn{ justify-content:center; gap:8px; }

/* terms & conditions note under the hero download button */
.ttm-res-terms{ font-size:12.5px; line-height:1.55; color:var(--ttm-muted); }
.ttm-res-terms a{ color:var(--ttm-accent); text-decoration:underline; }
.ttm-res-terms-hero{ margin:14px 0 0; max-width:420px; }