:root {
  color-scheme: light;
  --plum: #720735;
  --raspberry: #940647;
  --deep: #3a0b23;
  --cream: #fff2c6;
  --paper: #fff4d0;
  --orange: #ff701a;
  --red-orange: #f54a0f;
  --gold: #ffca32;
  --display: "Cooper Black", Georgia, serif;
  --body: "Trebuchet MS", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--deep); font: 1rem/1.25 var(--body); }
[hidden], .mobile-only { display: none !important; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label:has(input:focus-visible) > span {
  outline: 3px solid #c32175;
  outline-offset: 3px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3, p { margin: 0; }
h1, h2, .brand, .quote { font-family: var(--display); font-weight: 900; letter-spacing: -.045em; }
h2 { line-height: 1; }
section[id], #app-detail { scroll-margin-top: 1rem; }
.masthead { min-height: 62px; padding: 0 6.2% 0 4.5%; display: flex; align-items: center; gap: 3.2vw; background: var(--plum); color: var(--cream); border-bottom: 4px solid var(--cream); }
.brand { display: inline-flex; align-items: center; font-size: clamp(36px, 4vw, 64px); line-height: .97; text-decoration: none; -webkit-text-stroke: .025em; white-space: nowrap; }
.brand span { color: var(--orange); }
.brand b { margin-left: .13em; color: var(--gold); font: .81em/1 var(--body); -webkit-text-stroke: 1px var(--cream); }
.primary-nav { display: flex; align-items: center; gap: clamp(22px, 3.6vw, 64px); padding: 7px 0 7px 3.2vw; border-left: 2px solid var(--gold); }
.primary-nav a, .extra-nav a { text-decoration: none; font-size: clamp(16px, 1.48vw, 25px); font-weight: 800; white-space: nowrap; }
.primary-nav a:hover, .extra-nav a:hover { text-decoration: underline; }
.search-link { margin-left: auto; display: grid; place-items: center; padding: 8px; }
.search-icon { display: block; flex: none; width: 1.05em; height: 1.05em; border: .12em solid currentColor; border-radius: 50%; position: relative; }
.search-icon::after { position: absolute; content: ""; width: .54em; height: .12em; background: currentColor; left: .75em; top: .77em; transform: rotate(45deg); transform-origin: left; border-radius: 1em; }
.search-link .search-icon { font-size: 25px; }
.menu-toggle { display: none; }

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--plum); color: var(--cream); padding: .75vw 0 1.45vw 5.4%; }
.hero-copy, .search-form { position: relative; z-index: 1; width: 53.5%; }
.hero h1 { font-size: clamp(52px, 7.45vw, 140px); line-height: .79; text-align: left; padding-left: .31em; text-transform: uppercase; -webkit-text-stroke: .034em; }
.hero h1 em { display: block; color: var(--orange); font-style: normal; }
.hero-copy p { font-size: clamp(13px, 1.68vw, 30px); font-weight: 800; margin: .44em 0 .42em .5em; letter-spacing: -.02em; }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
.search-field { display: flex; align-items: center; gap: 1.15em; padding: .69em 1em; border-radius: 19px; color: #260c18; background: var(--paper); font-size: clamp(13px, 1.37vw, 23px); }
.search-field input { width: 100%; min-width: 0; background: transparent; border: 0; padding: 0; }
.search-field input::placeholder { opacity: 1; color: inherit; }
.gold-button { border: 1px solid #ffe78a; border-radius: 16px; padding: .42em .8em; background: linear-gradient(100deg, #ffc62a, #ffd34f); color: #3b100f; font-weight: 900; }
.gold-button:hover { background: #ffdb62; }
.search-form button { font-size: clamp(15px, 1.6vw, 29px); white-space: nowrap; }
.hero-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.halftone { position: absolute; width: 39%; height: 113%; right: 8%; bottom: 2%; border-radius: 50%; background: radial-gradient(#810c36 15%, transparent 25%) 0 0 / 5px 5px, radial-gradient(ellipse, #ffbb36 30%, #ff6c16 70%); transform: rotate(-8deg); }
.ribbon { position: absolute; width: 23vw; aspect-ratio: 1; border-radius: 50%; border: 17px solid var(--orange); box-shadow: 0 0 0 15px #ff972b, 0 0 0 29px var(--gold); }
.ribbon-left { top: -102%; left: -18%; }
.ribbon-right { bottom: -23%; right: -20%; }
.mascot { position: absolute; width: 36%; max-width: none; height: auto; right: 8%; top: -13%; mask-image: var(--mascot-mask); mask-size: 100% 100%; }

.trending { padding: .24vw .65vw 1.4vw; }
.section-heading { display: flex; gap: .8em; align-items: center; }
.section-heading h2 { font-size: clamp(25px, 2.74vw, 53px); }
.section-heading .eyebrow { font-weight: 900; text-transform: uppercase; color: var(--gold); white-space: nowrap; font-size: clamp(12px, 1.27vw, 23px); }
.eyebrow::before { content: "★"; margin-right: .35em; font-size: 1.25em; }
.trending > .section-heading { margin: 0 1.9vw .9vw; color: var(--plum); }
.trending .section-heading h2 { font-size: clamp(29px, 3.25vw, 62px); }
.trending .eyebrow { color: #b93312; }
.trending > .section-heading::after, .ranking > .section-heading::after { content: ""; flex: 1; min-width: .65em; border-top: 3px solid var(--line, var(--gold)); }
.trending > .section-heading { --line: var(--red-orange); }
.trending-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45vw; }
.app-card { min-width: 0; padding: .65vw .65vw .65vw .95vw; display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: .72vw; align-items: center; color: var(--cream); text-decoration: none; border: 1px solid #f5a523; border-radius: 18px; background: linear-gradient(120deg, #8f073f, #64072f); }
.app-card:hover, .ranking a:hover { box-shadow: inset 0 0 0 2px var(--gold); }
.app-icon { display: block; min-width: 0; width: 100%; }
.app-icon img { width: 100%; height: auto; border-radius: 19%; }
.app-card strong, .ranking strong { font-size: clamp(13px, 1.54vw, 26px); line-height: 1.08; letter-spacing: -.045em; }
.app-description { display: none; }
.rating { display: inline-flex; align-items: baseline; column-gap: .25em; flex-wrap: wrap; font-size: clamp(14px, 1.6vw, 27px); font-weight: 900; line-height: 1.05; }
.rating .star { color: var(--gold); }
.rating small { font-size: .52em; font-weight: 800; }
.app-card .rating { display: flex; margin: .17em 0; }
.app-card .rating small { flex-basis: 100%; margin-top: .15em; }
.count { font-size: clamp(11px, 1.2vw, 20px); white-space: nowrap; }
#search-status { margin: .55rem 2vw; font-weight: 700; }
#search-status button { margin-left: .6em; background: none; border: 0; padding: .15em; text-decoration: underline; }
.rankings { display: grid; grid-template-columns: 1fr 1.02fr; gap: .8vw; margin: 0 .8vw 1.25vw; }
.ranking { padding: .2vw 1.7vw .68vw; border-radius: 19px; background: linear-gradient(125deg, #8d0841, #740634); color: var(--cream); border: 1px solid #ff9a29; }
.most-trashed { background: #ed4e17; color: #fff4d0; }
.ranking ol { list-style: none; margin: .38em 0 0; padding: 0; counter-reset: ranks; }
.ranking li { counter-increment: ranks; }
.ranking li + li { border-top: 1px solid #ffffff50; }
.ranking a { display: grid; grid-template-columns: 8% 7% minmax(0, 1fr) 20% 21%; gap: .65vw; align-items: center; padding: .24vw 0; text-decoration: none; }
.ranking a::before { content: counter(ranks); justify-self: center; display: grid; place-items: center; border-radius: 50%; width: 1.55em; height: 1.42em; color: #430b19; background: var(--gold); font-weight: 900; font-size: clamp(13px, 1.42vw, 23px); }
.ranking .app-icon { max-width: 44px; }
.ranking .rating small { flex-basis: 100%; }
.most-trashed .rating small, .most-trashed .count { color: #fff8e4; }

.review-grid { display: grid; grid-template-columns: .92fr 1.08fr .99fr; gap: .8vw; padding: 0 .85vw; }
.panel { border: 3px solid var(--plum); border-radius: 19px; min-width: 0; overflow: hidden; }
.app-detail { padding: .65vw 1vw; }
.detail-heading { display: grid; grid-template-columns: 20% 1fr; gap: .85vw; align-items: start; }
.detail-heading h2 { font-size: clamp(26px, 2.65vw, 50px); color: var(--plum); }
.detail-heading .rating { font-size: clamp(19px, 2vw, 35px); }
.detail-heading .star, .review-stars { color: #bb310c; }
.detail-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em .65em; margin-top: .28em; }
.detail-rating .count { border-left: 1px solid currentColor; padding-left: .65em; }
.breakdown { display: grid; gap: .15em; margin: .4em .1em 0 .3em; }
.breakdown-row { display: grid; grid-template-columns: 2.3em 1fr 2.3em; gap: .45em; align-items: center; font-weight: 900; font-size: clamp(12px, 1.23vw, 22px); }
.breakdown-row b:last-child { text-align: right; }
.bar { background: #ebcea5; border-radius: 5px; overflow: hidden; height: .9em; }
.bar i { display: block; background: var(--red-orange); height: 100%; border-radius: inherit; }
.breakdown-row:nth-child(n+3) .bar i { background: #ffb61b; }
.reviews, .write-review { background: var(--plum); color: var(--cream); }
.panel > .section-heading { padding: .22vw 1.2vw .55vw; }
.panel > .section-heading h2 { font-size: clamp(23px, 2.28vw, 42px); }
.reviews .eyebrow { font-size: clamp(10px, 1.05vw, 19px); }
.review-card, #review-form { background: var(--paper); color: var(--deep); border-radius: 15px; padding: .6vw .85vw; }
.review-card { display: grid; grid-template-columns: 23% 1fr; align-items: start; column-gap: .9vw; }
.avatar { border-radius: 50%; grid-row: span 3; width: 100%; height: auto; }
.review-meta h3 { font: 900 clamp(16px, 1.5vw, 27px)/1.1 var(--body); }
.review-stars { display: flex; align-items: center; gap: .4em; font-size: clamp(16px, 1.65vw, 29px); white-space: nowrap; }
.review-stars small { color: var(--deep); font-size: .52em; font-weight: 800; }
.quote { font-size: clamp(15px, 1.43vw, 27px); line-height: 1.1; }
.review-copy, .helpful { font-size: clamp(12px, 1.12vw, 20px); }
.helpful { margin-top: .45em; justify-self: start; border: 1px solid currentColor; border-radius: 99px; padding: .25em .85em; background: #ffafc8; font-weight: 800; }
.helpful[aria-pressed="true"] { background: var(--gold); }
#no-reviews { padding: 1em; }
#review-form { display: grid; gap: .3em; }
.form-row, .rating-field { display: grid; grid-template-columns: 25% minmax(0, 1fr); gap: .5em; align-items: start; margin: 0; }
.form-row > span, .rating-field legend { font-weight: 900; font-size: clamp(12px, 1.12vw, 20px); }
.rating-field { border: 0; padding: 0; min-width: 0; display: block; }
.rating-field legend { float: left; width: 25%; padding: .16em 0 0; margin-right: .5em; }
.star-picker { display: flex; gap: .28em; font-size: clamp(21px, 1.8vw, 33px); line-height: .95; }
.star-picker label { position: relative; cursor: pointer; }
.star-picker input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.star-picker span { display: block; }
.star-picker .selected { color: #b5300d; }
#chosen-rating { display: block; margin: .25em 0 0; font-weight: 700; font-size: .82em; }
.form-row input, .form-row select, .form-row textarea, .signup input { background: transparent; border: 1px solid var(--deep); border-radius: 11px; padding: .24em .58em; width: 100%; min-width: 0; }
.form-row textarea { min-height: 4em; resize: vertical; }
.submit-review { border: 1px solid var(--deep); border-radius: 12px; font-size: clamp(15px, 1.34vw, 23px); }
.review-preview { padding: .75em; background: var(--paper); color: var(--deep); overflow-wrap: anywhere; }
.extras { display: grid; grid-template-columns: .9fr 1fr 1.3fr; gap: 1rem; margin: 1rem .85vw; }
.store-links, .signup, .sponsored { min-height: 92px; padding: .8rem; border-radius: 15px; }
.store-links, .signup { background: var(--plum); color: var(--cream); }
.store-links { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .6em; }
.store-links a { padding: .46em .7em; border: 1px solid var(--gold); border-radius: 9px; text-decoration: none; font-weight: 800; }
.sponsored { border: 2px dashed #a65e75; text-align: center; }
.sponsored span { text-transform: uppercase; font-size: .75em; letter-spacing: .17em; font-weight: 900; }
.signup h2 { font-size: 1.45rem; margin-bottom: .35em; }
.signup form { display: flex; gap: .45em; }
.signup input { background: var(--paper); color: var(--deep); }
.signup button { white-space: nowrap; }
#signup-status, #store-status { margin-top: .35em; font-size: .85em; }
.answer-section { margin: 1rem; padding: 1rem; border-top: 1px solid #bc7894; }
.answer-section p { max-width: 68ch; margin: .5em 0 1em; }

@media (max-width: 760px) {
  .desktop-only { display: none !important; }
  .mobile-only:not([hidden]) { display: revert !important; }
  body { background: var(--plum); }
  .masthead { position: relative; display: block; padding: 7px 0 0; margin: 0 3px; border: 2px solid var(--gold); border-bottom: 5px double var(--gold); border-radius: 14px 14px 0 0; }
  .brand-line { display: flex; align-items: center; justify-content: space-between; padding: 0 5%; }
  .brand { font-size: clamp(43px, 13vw, 67px); }
  .brand span { color: inherit; }
  .brand b { color: var(--gold); font-size: .4em; margin-left: -4.5em; align-self: start; transform: translateY(-.32em); -webkit-text-stroke: 0; }
  .menu-toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border: 0; color: inherit; background: none; }
  .menu-toggle span { display: block; width: 30px; height: 3px; border-radius: 8px; background: currentColor; }
  .tagline { font-size: clamp(9px, 2.8vw, 15px); font-weight: 900; letter-spacing: .04em; margin: .5em 6% .14em; }
  .primary-nav { display: flex; justify-content: space-between; gap: .3em; padding: 0 3% .45em 6%; border-left: 0; }
  .primary-nav a, .extra-nav a { font-size: clamp(12px, 3.5vw, 18px); }
  .primary-nav .nav-cta { padding: .42em .56em; border: 2px solid var(--gold); border-radius: 99px; background: #b9360c; }
  .extra-nav { padding: 0 6% .65em; display: flex; gap: 1em; }
  main { margin: 0 3px; }
  .hero, .trending, .rankings { border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); }
  .hero { padding: 0 0 .52rem; }
  .hero-art { height: 76vw; max-height: 480px; }
  .hero-copy { width: auto; min-height: min(76vw, 480px); padding: 6.4vw 3% 0; }
  .hero h1 { font-size: min(12vw, 86px); line-height: .86; padding: 0; transform: rotate(-3deg); transform-origin: left center; }
  .hero-copy p { font-size: min(4.15vw, 27px); line-height: 1.22; width: 46%; margin: .84em 0 0 .22em; }
  .mascot { width: 70%; max-width: 480px; top: 0; right: -2%; }
  .halftone, .ribbon-right { display: none; }
  .ribbon-left { left: -26%; top: 81%; width: 62%; transform: rotate(20deg) scaleY(.63); border-width: 11px; border-color: #ff72aa; box-shadow: 0 0 0 10px #c5205d, 0 0 0 20px var(--gold), 0 0 0 30px var(--orange); }
  .search-form { width: auto; margin: 0 3%; grid-template-columns: 1fr; gap: 7px; }
  .search-field { min-height: 41px; padding: .63em .94em; font-size: clamp(12px, 3.56vw, 22px); border-radius: 99px; gap: .9em; }
  .search-form button { min-height: 41px; border-radius: 99px; font: 900 clamp(20px, 5.5vw, 36px)/1 var(--display); -webkit-text-stroke: .018em; }
  .trending { color: var(--cream); padding: .1em 0 .65em; }
  .trending > .section-heading { position: relative; color: inherit; padding: .5rem 0 .54rem; margin: 0 3%; border-top: 2px solid #ee74a5; }
  .section-heading { display: block; }
  .trending .section-heading h2, .ranking .section-heading h2, .panel > .section-heading h2 { font-size: clamp(29px, 8.6vw, 53px); }
  .section-heading .eyebrow { display: block; margin-top: .23em; color: inherit; font-size: clamp(11px, 3.65vw, 19px); letter-spacing: .21em; }
  .eyebrow::before, .trending > .section-heading::after, .ranking > .section-heading::after { display: none; }
  .swipe { background: none; color: inherit; border: 0; padding: .2em 0; position: absolute; bottom: .58em; right: 0; font-weight: 800; }
  .trending-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 3%; scrollbar-width: none; gap: 9px; padding: 0 3%; }
  .trending-list::-webkit-scrollbar { display: none; }
  .app-card { flex: 0 0 68%; min-height: min(35vw, 206px); scroll-snap-align: start; border: 2px solid var(--gold); border-radius: 14px; padding: .62em; grid-template-columns: 37% minmax(0, 1fr); grid-template-rows: 1fr auto; gap: .1em .55em; align-content: start; }
  .app-card .app-icon { grid-column: 1; grid-row: 1; }
  .app-card .app-copy { align-self: start; }
  .app-card strong, .ranking strong { font: 900 clamp(18px, 5.85vw, 34px)/1 var(--display); letter-spacing: -.045em; }
  .app-description { display: block; margin-top: .24em; font-size: clamp(12px, 3.7vw, 20px); line-height: 1.12; }
  .app-card .app-stats { grid-column: 1 / -1; display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: .1em .45em; }
  .app-card .rating { display: inline-flex; }
  .app-card .rating small { flex-basis: auto; }
  .rating { font-size: clamp(19px, 5vw, 34px); }
  .count { font-size: clamp(12px, 3.65vw, 20px); }
  .app-card .count { border-left: 1px solid var(--gold); padding-left: .45em; }
  .carousel-dots.mobile-only:not([hidden]) { display: flex !important; gap: .45em; justify-content: center; margin-top: .5em; }
  .carousel-dots button { border: 0; border-radius: 50%; background: #e85c99; width: 12px; height: 12px; padding: 0; }
  .carousel-dots [aria-pressed="true"] { background: #fff8e4; }
  .rankings { margin: 0; display: block; border-bottom: 2px solid var(--gold); border-radius: 0 0 12px 12px; }
  .ranking { padding: .5rem 4% .6rem; border: 0; border-radius: 9px; background: var(--paper); color: var(--deep); }
  .ranking h2 { color: var(--plum); }
  .ranking ol { margin-top: .55em; }
  .ranking li + li { border: 0; }
  .ranking a { grid-template-columns: 22% minmax(0, 1fr) 28%; gap: .5em .7em; padding: .27em 0; }
  .ranking a::before { display: none; }
  .ranking .app-icon { max-width: 86px; }
  .ranking .app-stats { text-align: right; border-left: 2px solid #c9560b; padding-left: .2em; }
  .ranking .rating { justify-content: flex-end; }
  .ranking .count { display: block; margin-top: .12em; }
  .ranking .star { color: #b6350e; }
  .most-trashed { border-top: 2px solid var(--gold); background: var(--plum); color: var(--cream); }
  .most-trashed h2 { color: inherit; }
  .most-trashed .star { color: var(--gold); }
  .most-trashed .app-stats { border-color: var(--gold); }
  .review-grid { display: block; padding: 0; margin-top: .65em; border: 2px solid var(--gold); border-radius: 12px; background: var(--paper); color: var(--deep); overflow: hidden; }
  .panel { border: 0; border-radius: 0; }
  .app-detail { padding: 5% 5% 6%; }
  .detail-heading { grid-template-columns: 30% minmax(0, 1fr); gap: .75em; }
  .detail-heading h2 { font-size: clamp(30px, 9.2vw, 55px); }
  .detail-heading .app-description { font-size: clamp(14px, 4.45vw, 24px); }
  .detail-heading .rating { font-size: clamp(25px, 7vw, 43px); }
  .detail-rating { gap: .22em .43em; }
  .detail-rating .count { padding-left: .43em; }
  .breakdown { margin: 1em .1em 0; gap: .42em; }
  .breakdown-row { grid-template-columns: 3.4em 1fr 2.2em; font-size: clamp(14px, 4.05vw, 24px); }
  .bar { height: 1.04em; }
  .breakdown-row:nth-child(n+3) .bar i { background: var(--red-orange); }
  .reviews, .write-review { background: var(--paper); color: var(--deep); }
  .reviews { margin: 0 3.5% 5%; padding-top: 4%; border-top: 2px solid #e99113; }
  .panel > .section-heading { padding: 0 .15em .58em; }
  .panel > .section-heading h2 { color: var(--plum); }
  .review-card { padding: .65em; border: 2px solid #de7d0e; gap: .35em .6em; grid-template-columns: 28% 1fr; }
  .avatar { grid-row: auto; }
  .review-meta h3, .quote { font: 900 clamp(20px, 6vw, 36px)/1 var(--display); }
  .review-stars { font-size: clamp(21px, 6vw, 35px); }
  .review-copy, .helpful { grid-column: 1 / -1; font-size: clamp(15px, 4.7vw, 26px); }
  .helpful { background: var(--gold); min-height: 44px; border: 0; }
  .write-review { border-top: 2px solid #e99113; padding: 4% 4% 6%; background: radial-gradient(circle at 105% -18%, transparent 0 16%, #f879b4 16% 18%, #a91255 18% 21%, #ffca32 21% 24%, #ff6521 24% 27%, transparent 27%) top right / 140px 130px no-repeat, var(--paper); }
  #review-form { background: transparent; padding: 0; gap: .75em; }
  .form-row { display: block; }
  .form-row > span, .rating-field legend { display: block; float: none; width: auto; margin: 0 0 .25em; font-size: clamp(15px, 4.4vw, 24px); }
  .star-picker { font-size: clamp(32px, 9.5vw, 54px); gap: .18em; color: #a3280e; }
  .star-picker label { min-width: 44px; min-height: 44px; text-align: center; }
  .form-row input, .form-row textarea { padding: .53em .65em; font-size: clamp(15px, 4vw, 22px); }
  .form-row textarea { min-height: 7em; }
  .submit-review { background: #b9360c; color: var(--cream); border: 0; border-radius: 17px; min-height: 47px; font: 900 clamp(21px, 7vw, 40px)/1 var(--display); }
  .submit-review:hover { background: #9d2e0c; }
  .extras { grid-template-columns: 1fr; margin: .65rem 0; }
  .store-links, .signup { border: 1px solid var(--gold); }
  .sponsored, .answer-section { background: var(--paper); border-radius: 12px; }
  .answer-section { margin: .65rem 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.mascot { --mascot-mask: url("artwork/mascot-mask.png"); }
.app-card .app-copy { grid-column: 2; }
.app-card .app-icon { grid-row: span 2; }
.app-card { grid-template-rows: auto auto; row-gap: .1em; }
.app-card .app-stats { grid-column: 2; align-self: start; }
.ranking .app-stats { display: contents; }
.answer-section h2 { color: var(--plum); font-size: clamp(23px, 3vw, 34px); }
.answer-section h3 { font-size: 1.05rem; }
.rating-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .65rem; max-width: 960px; margin: 0 0 1.25rem; }
.rating-scale > div { border: 1px solid #ad5a72; border-radius: 9px; padding: .6rem; }
.rating-scale p { margin: .26em 0 0; }
.review-preview p { white-space: pre-wrap; }
@media (max-width: 760px) {
  .app-card .app-icon { grid-row: 1; }
  .app-card .app-stats { grid-column: 1 / -1; }
  .ranking .app-stats { display: block; }
  #trashed-list { display: flex; flex-direction: column-reverse; }
}
.rating, .signup form { position: relative; }
@media (max-width: 760px) {
  .mascot { width: 76%; top: auto; bottom: 0; right: -5%; }
  .hero h1 { font-size: min(11.3vw, 83px); }
  .search-field { font-size: clamp(12px, 3.4vw, 22px); }
}
@media (min-width: 761px) {
  .hero h1 { font-size: clamp(52px, 7.1vw, 134px); }
  .mascot { top: -27%; }
  .app-card { grid-template-columns: 38% minmax(0, 1fr); gap: .1em .63vw; }
  .app-card strong { font-size: clamp(13px, 1.43vw, 25px); }
  .ranking .app-icon { max-width: 39px; }
  .ranking .rating { align-items: baseline; gap: .1em .22em; }
  .ranking .rating small { flex-basis: auto; }
}
@media (min-width: 1150px) {
  .app-card strong { white-space: nowrap; }
}

.sample-tag {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #d28d21;
  border-radius: 99px;
  padding: .08em .48em;
  background: #fff0b2;
  color: #4b1830;
  font: 800 .72rem/1.25 var(--body);
  letter-spacing: .02em;
}
.app-copy > .sample-tag { margin: .12em 0 .12em .3em; }
.app-card .app-copy > .sample-tag { display: table; margin-left: 0; }
.detail-heading h2 + .sample-tag { margin: .24em 0; }
.section-notice, .form-notice { font-size: .82rem; font-weight: 800; line-height: 1.3; }
.section-notice { margin: 0 1.1vw .4em; }
.signup .form-notice { margin: 0 0 .55em; }
#review-form .form-notice { margin-bottom: .28em; }
#signup-form { flex-wrap: wrap; }
#signup-form input { flex: 1 1 10rem; }
.scale-band { font-weight: 900; color: var(--plum); }
.site-footer { padding: 1.25rem 1rem; color: var(--cream); background: var(--plum); }
.site-footer nav { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
.site-footer a { font-weight: 800; text-underline-offset: .16em; }
.info-page { min-height: 100vh; display: flex; flex-direction: column; }
.info-content { width: min(48rem, calc(100% - 1.75rem)); flex: 1; margin: 1rem auto; padding: clamp(1rem, 4vw, 2rem); border: 1px solid #d58e31; border-radius: 14px; background: var(--paper); }
.info-content h1 { color: var(--plum); font-size: clamp(2.2rem, 6vw, 4rem); }
.info-content h2 { margin-top: 1.25rem; font-size: 1.5rem; }
.info-content p { margin-top: .6rem; line-height: 1.55; }
@media (max-width: 760px) {
  .reviews .section-notice { margin: 0 .15em .5em; }
  .info-page .masthead { padding: .65rem 5%; border-radius: 0; }
}