/* Sub-pages: the homepage look carried over (loads after styles.css and v3.css) */

/* Title with a quiet ⓘ at the end; the disclaimer opens as plain text under it */
.title-row.med-dot{ position:static; display:block; }
.title-row h1{ margin-bottom:0; }
.title-row .med-dot-btn{ display:inline-grid; vertical-align:middle; width:26px; height:26px; margin-left:2px; translate:0 -.12em; }
.title-row .med-dot-btn svg{ width:20px; height:20px; }
.title-row.med-dot:hover .med-dot-pop{ max-height:0; opacity:0; visibility:hidden; padding:0; }
.title-row:has(.med-dot-btn:hover) .med-dot-pop, .title-row:has(.med-dot-btn:focus-visible) .med-dot-pop, .title-row.med-dot.open .med-dot-pop{ max-height:320px; opacity:1; visibility:visible; padding:12px 0 0; }
.title-row .med-dot-pop{ display:block; width:auto; max-width:72ch; font-size:13px; }
.page-hero .meta, .calc-hero .meta{ margin-top:14px; }

/* Section label: plain mono text, no pill */
.section-badge{ background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; color:var(--text-3) !important; }

/* No rounded cards: notes, short answers, compound links, the app promo */
.note, .note.short-answer{ background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; }
.note.short-answer{ font-size:17px; line-height:1.6; color:var(--text-1); }
.cmp-card{ background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; border-top:1px solid var(--outline) !important; padding:14px 0 0 !important; transition:color .2s; }
.cmp-card:hover{ transform:none !important; }
.cmp-card:hover strong, .cmp-card:hover b{ color:var(--accent); }
.app-card{ background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; border-top:1px solid var(--outline) !important; border-bottom:1px solid var(--outline) !important; padding:24px 0 !important; }
.app-card-icon{ border-radius:12px; }

/* Wide tables scroll sideways inside the text column on phones */
.prose table:not(.chart){ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Calmer background for reading pages: a faint wash at the top, dots barely there and still */
.glow{ background:radial-gradient(60vw 40vw at 75% -5%, color-mix(in oklab,var(--accent),transparent 92%), transparent 70%); }
.glow::after{ background-image:radial-gradient(color-mix(in oklab,var(--text-1),transparent 94%) 1px, transparent 1.2px);
  -webkit-mask-image:radial-gradient(ellipse 70% 40% at 60% 0%, #000 10%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 40% at 60% 0%, #000 10%, transparent 75%);
  transform:none; transition:none; }

/* No rounded cards anywhere on sub-pages: list items become rows split by hairlines */
.card, .med-card, .rank-card, .rating-card, .cta-card, .beta-card, .differentiator, .instructions-box{
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  border-top:1px solid var(--outline) !important; padding:18px 0 0 !important; }
.card::before{ display:none !important; }
.card:hover, .med-card:hover, .rank-card:hover, .rating-card:hover{ transform:none !important; }
.card:hover h3, .med-card:hover h3, .med-card:hover strong{ color:var(--accent); }
.rank-card.winner, .rating-card.featured{ border-top:2px solid var(--accent) !important; }
.differentiator h3{ color:var(--text-1) !important; }

/* No pills: tags and badges become small mono labels */
.validated-badge, .count-badge, .tag, .rank-tag, .plan-tag, .chip, .best-for-tag, .step-badge, .badge, .card-tags span{
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important;
  font-family:var(--font-mono); font-size:11px !important; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--text-3) !important; }
.validated-badge{ color:#34C759 !important; }
.plan.best .plan-tag, .rank-card.winner .rank-tag{ color:var(--accent) !important; }
.count-badge{ vertical-align:middle; margin-left:6px; }
.review-quote{ background:none !important; border:0 !important; border-radius:0 !important; padding:4px 0 4px 0 !important; }
.review-quote p{ font-size:1.15rem !important; letter-spacing:-0.01em; }