/* Instituto da Pele — base, components, desktop, tablet, mobile, accessibility. */
/* Published content and catalog images. */
.uploaded-editorial-image { display:block; width:100%; aspect-ratio:2 / 1; overflow:hidden; background:#f1e6d8; }
.uploaded-editorial-image img { display:block; width:100%; height:100%; object-fit:cover; }
.image-placeholder { display:grid; place-items:center; font:16px Georgia,serif; color:#9b7654; text-align:center; padding:14px; }
.review-card>.uploaded-editorial-image { aspect-ratio:1 / 1.8; }
.review-card>.uploaded-editorial-image img { object-fit:contain; }
.article-card>.uploaded-editorial-image { height:100%; aspect-ratio:auto; }
.published-article { max-width:960px; }
.published-article .lead { color:var(--muted); margin:20px 0 25px; }
.article-byline { font-size:13px; margin-bottom:20px; }
.article-cover { width:100%; height:auto; max-height:520px; object-fit:cover; border-radius:12px; margin-bottom:25px; }
.research-disclosure { background:#efe3d3; border-radius:8px; padding:13px 17px; font-size:12px; margin-bottom:18px; }
.preview-banner { padding:16px; margin-bottom:20px; background:#efe3d3; border:1px solid #c4a787; border-radius:8px; font-weight:600; font-size:13px; }
.article-body { font-size:17px; line-height:1.8; overflow-wrap:anywhere; margin:30px 0; }
.article-body p { margin-bottom:18px; }
.published-article>.affiliate-note { font-size:12px; line-height:1.6; color:#695647; margin:12px 0 24px; }
.article-methodology { margin-top:36px; padding-top:24px; border-top:1px solid #dfcdb7; color:#695647; font-size:14px; line-height:1.7; }
.article-methodology h2 { font-size:24px; }
.article-body hr { border:0; border-top:1px solid #8d8175; opacity:1; margin:32px 0; }
.article-body h2 { font-size:30px; margin:32px 0 16px; }
.article-body h3 { font-size:23px; margin:25px 0 12px; }
.article-body a:not(.btn) { color:var(--brown); text-decoration:underline; }
.article-body img { max-width:100%; height:auto; border-radius:8px; }
.article-body blockquote { border-left:3px solid #b4875b; padding-left:20px; }
.article-body table { display:block; overflow-x:auto; max-width:100%; border-collapse:collapse; margin:22px 0; font-size:14px; }
.article-body td,.article-body th { border:1px solid #dac9b4; padding:12px; min-width:100px; }
.article-body th { background:#f2e7d9; }
.published-product { display:flex; gap:24px; border:1px solid #dfcdb7; border-radius:12px; background:#f6eee3; padding:24px; margin:24px 0; font:14px/1.6 Arial,sans-serif; }
.published-product>img { width:240px; height:280px; max-width:100%; object-fit:contain; flex-shrink:0; align-self:flex-start; background-color: #FFF; }
.published-product-copy { min-width:0; flex:1; }
.published-product h3 { font:600 21px/1.3 Arial,sans-serif; margin:6px 0 12px; }
.published-product p { margin-bottom:12px; white-space:pre-line; }
.published-product .product-volume { font-size:12px; }
.published-product .btn { margin-top:8px; }
.offer-store-icon { display:none; }
.product-offers { display:flex; flex-wrap:wrap; gap:8px; }
@media(min-width:768px) {
    .published-product .product-offers .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
    .published-product .offer-store-icon { display:block; width:28px; height:24px; object-fit:contain; flex-shrink:0; border-radius:0; }
    .published-product .product-offers .offer-ml { background:#ffe600; color:#292929; border-color:#ffe600; }
    .published-product .product-offers .offer-amazon { background:#fff; color:#292929; border-color:#d6c5b3; }
    .published-product .product-offers .offer-shopee { background:#ee4d2d; color:#fff; border-color:#ee4d2d; }
}
@media(max-width:767px) {
    .published-product h3 { font-size:18px; }
    .published-product .product-details,.published-product .product-volume,.published-product-copy>small { display:none; }
    .published-product .product-offers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .published-product .product-offers .btn { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:60px; margin-top:0; padding:12px; }
    .published-product .product-offers .offer-ml { order:-2; grid-column:1 / -1; background:#ffe600; color:#292929; border-color:#ffe600; }
    .published-product .product-offers .offer-amazon { order:-1; background:#fff; border-color:#d6c5b3; }
    .published-product .product-offers .offer-shopee { background:#ee4d2d; border-color:#ee4d2d; }
    .published-product .offers-count-2:has(.offer-ml) { grid-template-columns:minmax(0,1fr) 76px; }
    .published-product .offers-count-2 .offer-ml { grid-column:auto; }
    .published-product .offers-count-1 { grid-template-columns:minmax(0,1fr); }
    .published-product .offer-amazon .offer-label,.published-product .offer-shopee .offer-label { display:none; }
    .published-product .offer-store-icon { display:block; width:38px; height:32px; object-fit:contain; flex-shrink:0; }
    .published-product .offer-amazon .offer-store-icon { width:48px; height:36px; }
}
.article-related h2,.article-references h2 { font-size:28px; margin:30px 0 17px; }
.article-references p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; }
@media(max-width:767px) {
    .published-product { flex-direction:column; padding:18px; gap:12px; }
    .published-product>img { align-self:center; width:100%; height:318px; }
    .comparison-card>.uploaded-editorial-image { aspect-ratio:auto; height:100%; }
}
:root {
    --cream:#fbf8f3;
    --paper:#fffdf9;
    --beige:#efe2d3;
    --brown:#642a0b;
    --brown-dark:#3f210f;
    --terracotta:#a34e24;
    --ink:#25211e;
    --muted:#655d55;
    --line:#e7ddd1;
    --bs-body-bg:var(--cream);
    --bs-body-color:var(--ink);
    --bs-body-font-family:Arial,Helvetica,sans-serif;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:24px;
}

body {
    margin:0;
    font-size:15px;
    line-height:1.45;
}

a {
    color:inherit;
    text-decoration:none;
}

a:hover {
    color:var(--terracotta);
}

button,input {
    font:inherit;
}

button,a,input {
    touch-action:manipulation;
}

button {
    cursor:pointer;
}

img {
    max-width:100%;
}

h1,h2 {
    font-family:Georgia,'Times New Roman',serif;
    color:var(--brown-dark);
    font-weight:600;
    letter-spacing:-1.1px;
}

h2 {
    font-size:36px;
    font-weight:500;
    line-height:1.13;
    margin:0;
}

h3 {
    font-size:17px;
    font-weight:700;
    line-height:1.2;
    margin:0;
}

p {
    margin:0;
    color:var(--muted);
}

.container {
    max-width:1224px;
    padding-inline:24px;
}

.icon {
    flex-shrink:0;
    vertical-align:middle;
}

a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #ac6a37;
    outline-offset:4px;
}

.skip-link {
    position:fixed;
    left:16px;
    top:-90px;
    padding:12px 18px;
    background:var(--brown);
    color:white;
    z-index:100;
}

.skip-link:focus {
    top:12px;
}

.btn {
    border-radius:7px;
    min-height:44px;
    padding:10px 19px;
    font-size:14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    line-height:1.2;
    transition:background-color .15s,color .15s;
}

.btn .icon {
    width:17px;
    height:17px;
}

.btn-brown {
    color:#fffaf2;
    background:linear-gradient(115deg,#743616,var(--brown));
    border:1px solid var(--brown);
}

.btn-brown:hover,.btn-brown:focus {
    color:#fff;
    background:#442009;
    border-color:#442009;
}

.btn-outline-brown {
    border:1px solid #956747;
    color:var(--brown);
    background:transparent;
}

.btn-outline-brown:hover {
    background:#eee0d0;
    color:var(--brown-dark);
    border-color:var(--brown);
}

.icon-button {
    border:0;
    background:transparent;
    color:var(--brown-dark);
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.icon-button .icon {
    width:25px;
    height:25px;
}

.eyebrow {
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:3.6px;
    color:var(--brown-dark);
    line-height:1.5;
}

.site-header {
    background:var(--cream);
    position:relative;
    z-index:10;
    border-bottom:1px solid #efe7de;
}

.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:27px;
    min-height:100px;
}

.brand {
    flex-shrink:0;
    display:block;
}

.brand-crop {
    width:124px;
    height:68px;
    display:block;
    position:relative;
    overflow:hidden;
}

.brand-crop img {
    position:absolute;
    max-width:none;
    width:238px;
    height:auto;
    left:-57px;
    top:0;
}

.main-nav {
    display:flex;
    align-items:center;
    gap:25px;
}

.main-nav a {
    font-size:13px;
    white-space:nowrap;
    position:relative;
    padding:12px 0;
}

.main-nav a[aria-current] {
    color:var(--brown);
    font-weight:600;
}

.main-nav a[aria-current]:after {
    content:'';
    position:absolute;
    bottom:5px;
    left:0;
    right:0;
    height:2px;
    background:var(--terracotta);
}

.header-search {
    width:303px;
    flex-shrink:0;
}

.header-search>span {
    display:block;
    font-size:9px;
    text-align:right;
    margin-top:4px;
    color:var(--muted);
}

.search-form {
    height:48px;
    border:1px solid #cfbdaa;
    border-radius:7px;
    background:var(--paper);
    display:flex;
    align-items:center;
    overflow:hidden;
    min-width:0;
}

.search-form>.icon {
    margin-left:15px;
    color:var(--brown);
    width:18px;
}

.search-form input {
    min-width:0;
    flex:1;
    width:100%;
    height:100%;
    border:0;
    background:transparent;
    padding:0 12px;
    color:var(--ink);
    font-size:13px;
}

.search-form input:focus-visible {
    outline-offset:-4px;
}

.search-form>.btn {
    height:100%;
    border-radius:5px;
    min-width:105px;
}

.search-form--compact {
    height:42px;
}

.search-form--compact>.icon {
    display:none;
}

.search-form--compact input {
    font-size:11px;
}

.search-form--compact button .icon {
    width:16px;
    height:16px;
}

.mobile-actions {
    display:none;
}

.hero {
    background:#f1e5d6;
    overflow:hidden;
}

.hero-inner {
    position:relative;
    padding-top:48px;
    padding-bottom:26px;
    min-height:560px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.hero-copy {
    position:relative;
    width:52%;
    max-width:606px;
    z-index:2;
}

.hero-copy h1 {
    font-size:53px;
    line-height:1.015;
    letter-spacing:-1.9px;
    margin:14px 0 17px;
}

.hero-copy h1 em {
    display:block;
    font-style:normal;
    color:var(--terracotta);
}

.hero-description {
    max-width:535px;
    font-size:17px;
    line-height:1.4;
    margin-bottom:25px;
}

.hero-actions {
    display:flex;
    gap:16px;
    margin-top:17px;
}

.hero-actions .btn {
    min-height:48px;
    padding-inline:24px;
}

.hero-art {
    position:absolute;
    top:0;
    bottom:74px;
    left:51%;
    width:58%;
    display:flex;
    align-items:flex-end;
    pointer-events:none;
    mask-image:linear-gradient(to right,transparent,#000 7%);
}

.hero-art .editorial-image {
    width:100%;
    flex-shrink:0;
}

.trust-list {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    list-style:none;
    margin:36px 0 0;
    padding:0;
    gap:40px;
    z-index:2;
}

.trust-list li {
    display:flex;
    align-items:center;
    gap:17px;
    font-size:13px;
    color:var(--brown-dark);
}

.trust-list .icon {
    width:31px;
    height:31px;
    color:#79401e;
}

.trust-list strong {
    display:block;
    font-weight:600;
}

.home-sections {
    padding-top:20px;
    padding-bottom:18px;
}

.home-section {
    margin-bottom:27px;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px;
    margin-bottom:14px;
}

.section-heading p {
    font-size:13px;
    text-align:right;
}

.section-more {
    display:none;
    font-size:12px;
    white-space:nowrap;
    color:var(--muted);
}

.section-more .icon {
    width:14px;
    height:14px;
    margin-left:5px;
}

.editorial-card {
    border:1px solid var(--line);
    border-radius:9px;
    background:transparent;
    overflow:hidden;
}

.editorial-image {
    display:block;
    position:relative;
    overflow:hidden;
    aspect-ratio:var(--image-ratio);
    width:100%;
    background:#f4eade;
    container-type:size;
}

.editorial-image img {
    /* Scale the authorized photo region to cover its container without distortion. */
    --crop-scale:max(calc(100cqw / var(--crop-width)), calc(100cqh / var(--crop-height)));
    position:absolute;
    max-width:none;
    width:calc(821 * var(--crop-scale));
    height:calc(1916 * var(--crop-scale));
    left:calc(50% - (var(--crop-x) + var(--crop-width) / 2) * var(--crop-scale));
    top:calc(50% - (var(--crop-y) + var(--crop-height) / 2) * var(--crop-scale));
}

.quick-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
}

.quick-card {
    padding:10px 17px 13px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    transition:border-color .15s,background-color .15s;
}

.quick-card:hover,.category-card:hover {
    border-color:#b38d6c;
    background:#f6efe5;
}

.quick-card>.editorial-image {
    width:125px;
    max-width:100%;
    margin:auto auto 8px;
    mix-blend-mode:multiply;
}

.quick-card h3 {
    font-size:15px;
    max-width:155px;
    margin-bottom:8px;
}

.quick-card>span:last-child {
    font-size:13px;
    color:var(--brown);
}

.quick-card>span:last-child .icon {
    width:14px;
    height:14px;
}

.ranking-grid,.comparison-grid,.article-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.ranking-card {
    display:flex;
    flex-direction:column;
}

.ranking-image {
    position:relative;
}

.ranking-badge {
    position:absolute;
    left:12px;
    top:12px;
    border-radius:15px;
    background:var(--brown);
    color:#fff9f1;
    font-size:11px;
    font-weight:600;
    min-width:100px;
    min-height:34px;
    padding:9px 14px;
    text-align:center;
}

.ranking-card:last-child .ranking-badge {
    min-width:148px;
}

.card-copy {
    padding:14px 16px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.card-copy h3 {
    margin-bottom:8px;
}

.card-copy p {
    font-size:14px;
    line-height:1.35;
    margin-bottom:13px;
}

.ranking-bottom {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    margin-top:auto;
}

.research-label {
    display:block;
    font-size:11px;
    color:var(--brown);
    line-height:1.4;
}

.ranking-bottom .btn {
    min-height:42px;
    padding:9px 17px;
    font-size:13px;
}

.review-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.review-card {
    display:grid;
    grid-template-columns:34% minmax(0,1fr);
    column-gap:11px;
    row-gap:12px;
    padding:14px;
}

.review-card>.editorial-image {
    mix-blend-mode:multiply;
    align-self:start;
}

.review-card h3 {
    font-size:13px;
    margin-bottom:14px;
}

.review-copy .research-label {
    margin-bottom:10px;
}

.review-copy p {
    font-size:11px;
    line-height:1.4;
}

.review-card>.btn {
    grid-column:1/-1;
    min-height:36px;
    padding:8px;
    font-size:12px;
}

.comparison-card .card-copy {
    padding:12px 15px;
}

.comparison-card h3 {
    font-size:16px;
}

.comparison-card p {
    margin-bottom:10px;
}

.comparison-card .btn {
    align-self:flex-start;
    min-height:36px;
    padding:7px 13px;
    font-size:13px;
}

.methodology {
    display:grid;
    grid-template-columns:40% minmax(0,1fr);
    gap:24px;
    align-items:center;
}

.methodology-copy p {
    font-size:14px;
    line-height:1.35;
    margin:10px 0 12px;
    max-width:440px;
}

.methodology-copy .btn {
    font-size:13px;
    padding:9px 17px;
    min-height:40px;
}

.methodology-copy .methodology-note {
    font-size:12px;
    line-height:1.45;
}

.criteria-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.criterion {
    padding:18px 15px 13px;
    min-height:145px;
}

.criterion>.icon {
    width:31px;
    height:31px;
    color:#7b3917;
    margin-bottom:15px;
}

.criterion h3 {
    font-size:12px;
    margin-bottom:7px;
    letter-spacing:-.2px;
}

.criterion p {
    font-size:11px;
    line-height:1.4;
}

.category-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:16px;
}

.category-card>span:last-child {
    padding:12px 11px;
    display:flex;
    gap:6px;
    align-items:center;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.category-card .icon {
    color:var(--terracotta);
    width:14px;
    height:14px;
}

.article-card {
    display:grid;
    grid-template-columns:30% minmax(0,1fr);
}

.article-card>.editorial-image {
    height:100%;
    min-height:137px;
    aspect-ratio:auto;
}

.article-copy {
    padding:11px 13px;
    display:flex;
    flex-direction:column;
}

.article-copy h3 {
    font-size:14px;
    margin-bottom:8px;
}

.article-copy p {
    font-size:12px;
    line-height:1.35;
    margin-bottom:14px;
}

.article-meta {
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    margin-top:auto;
    font-size:10px;
    color:var(--muted);
}

.article-meta a {
    color:var(--brown);
    font-weight:600;
    white-space:nowrap;
    min-height:26px;
    display:inline-flex;
    align-items:center;
    gap:3px;
}

.article-meta .icon {
    width:12px;
    height:12px;
}

.newsletter {
    border-radius:13px;
    background:#ecdfd1;
    padding:21px;
    display:grid;
    grid-template-columns:74px 1fr 38%;
    gap:18px;
    align-items:center;
    margin-top:25px;
}

.newsletter-symbol {
    border-radius:50%;
    width:72px;
    height:72px;
    background:#e7d0b8;
    display:grid;
    place-items:center;
}

.newsletter-symbol .icon {
    width:44px;
    height:44px;
    color:#8b461e;
}

.newsletter-copy .eyebrow {
    font-size:8px;
    letter-spacing:2.5px;
    display:block;
    margin-bottom:5px;
}

.newsletter h2 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:17px;
    letter-spacing:-.2px;
    margin-bottom:5px;
}

.newsletter-copy p {
    font-size:13px;
}

.newsletter-fields {
    display:flex;
    gap:0;
}

.newsletter-fields input {
    width:100%;
    min-width:0;
    flex:1;
    border:1px solid #d8c6b3;
    border-radius:7px;
    padding:11px 14px;
    font-size:12px;
    background:var(--paper);
}

.newsletter-fields .btn {
    font-size:12px;
    white-space:nowrap;
    padding:12px 20px;
    margin-left:-2px;
}

.newsletter-form>p {
    font-size:9px;
    line-height:1.45;
    margin-top:5px;
}

.newsletter-form>p a {
    text-decoration:underline;
}

.site-footer {
    background:#f3ece2;
}

.footer-main {
    padding-top:18px;
    padding-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.footer-nav {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:65px;
    font-size:11px;
    row-gap:5px;
}

.social>span {
    font-size:12px;
    display:block;
    margin-bottom:10px;
}

.social small {
    font-size:9px;
    color:var(--muted);
}

.social>div {
    display:flex;
    gap:17px;
    color:var(--brown);
}

.social .icon {
    width:18px;
    height:18px;
}

.footer-tagline {
    text-align:center;
    font-size:13px;
}

.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:9px;
    padding-block:13px;
    border-top:1px solid var(--line);
}

.footer-bottom nav {
    display:flex;
    gap:28px;
}

.demo-note {
    font-size:10px;
    color:#756657;
    padding-bottom:12px;
}

.inner-page {
    padding-top:45px;
    padding-bottom:80px;
    min-height:65vh;
}

.back-link {
    display:inline-block;
    color:var(--brown);
    margin-bottom:38px;
    font-size:14px;
}

.inner-page h1 {
    font-size:46px;
    /* max-width:850px; */
    margin:12px 0 25px;
}

.inner-page>.search-form {
    max-width:700px;
}

.search-count {
    margin:18px 0 30px;
    font-size:14px;
}

.search-results {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.search-result {
    padding:24px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
}

.search-result h2 {
    font-size:25px;
    letter-spacing:-.6px;
}

.text-link {
    font-size:14px;
    color:var(--brown);
    margin-top:auto;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:12px;
}

.empty-state {
    grid-column:1/-1;
    background:#f0e6da;
    padding:35px;
    border-radius:10px;
}

.empty-state>.icon {
    width:36px;
    height:36px;
    margin-bottom:20px;
}

.empty-state p {
    margin:15px 0 24px;
}

.reading-page {
    max-width:900px;
}

.reading-page .lead {
    font-size:20px;
    line-height:1.65;
    margin-bottom:30px;
}

.preview-notice {
    padding:30px;
    background:#eee2d4;
    border-radius:10px;
    margin-bottom:25px;
}

.preview-notice>.icon {
    color:var(--brown);
    width:35px;
    height:35px;
    margin-bottom:20px;
}

.preview-notice h2 {
    font-size:30px;
    margin-bottom:14px;
}

.preview-notice p {
    line-height:1.6;
}

@media(min-width:1400px) {
    .hero-inner {
        min-height:575px;
    }

    .hero-art {
        width:60%;
    }

}

@media(max-width:1199px) {
    .container {
        padding-inline:25px;
    }

    .header-inner {
        gap:22px;
        min-height:90px;
    }

    .main-nav {
        gap:18px;
    }

    .main-nav a {
        font-size:12px;
    }

    .header-search {
        width:245px;
    }

    .brand-crop {
        width:108px;
        height:59px;
    }

    .brand-crop img {
        width:208px;
        left:-50px;
    }

    .hero-copy h1 {
        font-size:46px;
    }

    .hero-inner {
        min-height:530px;
        padding-top:40px;
    }

    .hero-description {
        font-size:15px;
    }

    .hero-art {
        left:49%;
        width:61%;
        bottom:90px;
    }

    .hero-actions .btn {
        padding-inline:17px;
        font-size:13px;
    }

    .trust-list {
        gap:18px;
    }

    .trust-list li {
        font-size:12px;
        gap:12px;
    }

    .section-heading h2 {
        font-size:30px;
    }

    .section-heading p {
        font-size:11px;
    }

    .quick-grid {
        gap:13px;
    }

    .ranking-grid,.comparison-grid,.article-grid {
        gap:16px;
    }

    .ranking-bottom .btn {
        padding:8px 11px;
        font-size:12px;
    }

    .ranking-badge {
        min-width:84px;
        min-height:28px;
        top:9px;
        left:9px;
        padding:6px 12px;
        font-size:10px;
    }

    .ranking-card:last-child .ranking-badge {
        min-width:123px;
    }

    .card-copy {
        padding:12px;
    }

    .review-grid {
        gap:12px;
    }

    .review-card {
        padding:11px;
        column-gap:9px;
    }

    .review-card h3 {
        font-size:12px;
    }

    .review-copy p {
        font-size:10px;
    }

    .criterion {
        padding:14px 10px;
    }

    .methodology {
        grid-template-columns:38% minmax(0,1fr);
        gap:20px;
    }

    .methodology h2 {
        font-size:30px;
    }

    .criteria-grid {
        gap:9px;
    }

    .criterion h3 {
        font-size:11px;
    }

    .category-grid {
        gap:12px;
    }

    .category-card>span:last-child {
        font-size:11px;
        padding:10px 8px;
    }

    .article-copy {
        padding:9px;
    }

    .article-copy h3 {
        font-size:12px;
    }

    .article-copy p {
        font-size:11px;
    }

    .article-meta {
        font-size:9px;
        flex-wrap:wrap;
        gap:0;
    }

    .newsletter {
        grid-template-columns:60px 1fr 37%;
        gap:13px;
        padding:18px;
    }

    .newsletter-symbol {
        width:60px;
        height:60px;
    }

    .newsletter h2 {
        font-size:15px;
    }

    .newsletter-copy p {
        font-size:12px;
    }

    .newsletter-fields .btn {
        padding-inline:13px;
    }

    .newsletter-fields input {
        padding-inline:10px;
    }

    .footer-nav {
        column-gap:40px;
    }

}

@media(min-width:768px) and (max-width:991px) {
    .header-inner {
        flex-wrap:wrap;
        gap:8px;
        padding-block:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        justify-content:space-between;
    }

    .header-search {
        width:290px;
    }

    .hero-copy {
        width:55%;
    }

    .hero-copy h1 {
        font-size:38px;
    }

    .hero-inner {
        min-height:505px;
        padding-top:28px;
    }

    .hero-description {
        font-size:14px;
    }

    .hero-art {
        left:54%;
        width:65%;
        bottom:100px;
    }

    .hero-actions {
        gap:10px;
    }

    .hero-actions .btn {
        font-size:12px;
        padding-inline:11px;
    }

    .hero-actions .icon {
        display:none;
    }

    .trust-list {
        gap:12px;
    }

    .trust-list .icon {
        width:24px;
        height:24px;
    }

    .trust-list li {
        font-size:10px;
    }

    .section-heading p {
        max-width:230px;
    }

    .section-heading h2 {
        font-size:27px;
    }

    .quick-card {
        padding:9px 11px;
    }

    .quick-card h3 {
        font-size:13px;
    }

    .quick-card>span:last-child {
        font-size:11px;
    }

    .card-copy h3 {
        font-size:16px;
    }

    .card-copy p {
        font-size:12px;
    }

    .ranking-bottom {
        flex-wrap:wrap;
    }

    .ranking-bottom .btn {
        width:100%;
    }

    .review-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .review-card {
        grid-template-columns:27% minmax(0,1fr);
        padding:15px;
    }

    .review-card h3 {
        font-size:15px;
    }

    .review-copy p {
        font-size:12px;
    }

    .review-card>.editorial-image {
        max-height:133px;
    }

    .methodology {
        grid-template-columns:1fr;
    }

    .criteria-grid {
        gap:15px;
    }

    .criterion {
        min-height:130px;
    }

    .criterion h3 {
        font-size:13px;
    }

    .category-grid {
        gap:8px;
    }

    .category-card>span:last-child {
        font-size:10px;
        gap:3px;
        padding-inline:6px;
    }

    .category-card .icon {
        width:11px;
    }

    .article-grid {
        grid-template-columns:1fr;
    }

    .article-card {
        grid-template-columns:100px 1fr;
    }

    .article-card>.editorial-image {
        min-height:115px;
    }

    .article-copy h3 {
        font-size:15px;
    }

    .article-copy p {
        font-size:13px;
    }

    .article-meta {
        font-size:11px;
    }

    .newsletter {
        grid-template-columns:60px 1fr;
    }

    .newsletter-form {
        grid-column:2;
    }

    .footer-nav {
        column-gap:25px;
    }

    .footer-tagline {
        font-size:11px;
    }

    .footer-main {
        gap:20px;
    }

}

@media(max-width:767px) {
    html {
        scroll-padding-top:12px;
    }

    .container {
        padding-inline:18px;
    }

    body {
        font-size:14px;
    }

    .header-inner {
        min-height:82px;
        flex-wrap:wrap;
        gap:0;
        padding-block:10px;
    }

    .brand-crop {
        width:104px;
        height:57px;
    }

    .brand-crop img {
        width:200px;
        left:-48px;
    }

    .mobile-actions {
        display:flex;
        gap:9px;
        margin-left:auto;
    }

    .mobile-actions .icon {
        width:27px;
        height:27px;
    }

    .mobile-actions button:last-child .icon {
        width:33px;
        height:33px;
    }

    .main-nav,.header-search {
        display:none;
    }

    .main-nav.is-open {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        order:3;
        width:100%;
        gap:0;
        padding-top:15px;
        border-top:1px solid var(--line);
        margin-top:10px;
    }

    .main-nav a {
        font-size:15px;
        padding:12px;
    }

    .main-nav a[aria-current]:after {
        display:none;
    }

    .header-search.is-open {
        display:block;
        order:4;
        width:100%;
        padding-top:12px;
    }

    .header-search>span {
        font-size:10px;
        margin-top:6px;
    }

    .header-search .search-form {
        height:46px;
    }

    .header-search input {
        font-size:14px;
    }

    .hero {
        background:#f2e7da;
    }

    .hero-inner {
        padding-top:23px;
        padding-bottom:18px;
        min-height:0;
    }

    .hero-copy {
        width:100%;
        max-width:none;
    }

    .hero-copy>.eyebrow {
        font-size:8px;
        letter-spacing:2.6px;
        max-width:100%;
    }

    .hero-copy h1 {
        font-size:34px;
        line-height:1.02;
        letter-spacing:-1.1px;
        max-width:83%;
        margin:12px 0 15px;
    }

    .desktop-break {
        display:none;
    }

    .hero-copy h1 em {
        display:inline;
    }

    .hero-description {
        font-size:13px;
        max-width:73%;
        line-height:1.4;
        margin-bottom:18px;
    }

    .hero-art {
        top:14px;
        bottom:auto;
        left:64%;
        width:63%;
        opacity:.86;
        mask-image:linear-gradient(to right,transparent,#000 33%);
    }

    .hero-copy>.search-form {
        position:relative;
        z-index:2;
        width:100%;
        height:46px;
        box-shadow:0 0 18px 8px #f2e7da88;
    }

    .search-form input {
        font-size:12px;
        padding-inline:9px;
    }

    .search-form>.icon {
        margin-left:11px;
        width:16px;
    }

    .search-form>.btn {
        min-width:64px;
        padding-inline:12px;
        font-size:12px;
    }

    .hero-actions {
        gap:9px;
        margin-top:11px;
    }

    .hero-actions .btn {
        flex:1;
        min-height:44px;
        font-size:12px;
        padding-inline:10px;
        gap:8px;
    }

    .hero-actions .icon {
        width:15px;
        height:15px;
    }

    .trust-list {
        display:none;
    }

    .home-sections {
        padding-top:16px;
        padding-bottom:15px;
    }

    .home-section {
        margin-bottom:22px;
    }

    .section-heading {
        gap:10px;
        margin-bottom:10px;
        align-items:center;
    }

    .section-heading h2,h2 {
        font-size:25px;
        letter-spacing:-.8px;
        line-height:1.08;
    }

    .section-heading p {
        display:none;
    }

    .section-more {
        display:inline-flex;
        align-items:center;
        font-size:10px;
        gap:2px;
    }

    .section-more .icon {
        width:12px;
        margin-left:2px;
    }

    .card-rail {
        display:grid;
        grid-auto-flow:column;
        grid-template-columns:none;
        overflow-x:auto;
        scroll-snap-type:x proximity;
        gap:9px;
        padding-bottom:5px;
        scrollbar-width:thin;
        scrollbar-color:#c9ad94 transparent;
    }

    .card-rail>* {
        scroll-snap-align:start;
    }

    .quick-grid {
        grid-auto-columns:105px;
    }

    .quick-card {
        padding:8px 8px 10px;
        align-items:center;
        text-align:center;
        border-radius:7px;
    }

    .quick-card>.editorial-image {
        width:76px;
        margin-bottom:6px;
    }

    .quick-card h3 {
        font-size:12px;
        line-height:1.2;
        margin-bottom:0;
    }

    .quick-card>span:last-child {
        display:none;
    }

    .ranking-grid {
        grid-auto-columns:minmax(170px,43%);
    }

    .ranking-image .editorial-image {
        aspect-ratio:var(--image-ratio);
    }

    .ranking-badge {
        top:6px;
        left:6px;
        min-width:64px;
        min-height:24px;
        border-radius:13px;
        font-size:9px;
        padding:6px 9px;
    }

    .ranking-card:last-child .ranking-badge {
        min-width:97px;
    }

    .card-copy {
        padding:10px;
    }

    .ranking-card h3 {
        font-family:Georgia,'Times New Roman',serif;
        font-size:17px;
        line-height:1.06;
        letter-spacing:-.3px;
        margin-bottom:7px;
    }

    .card-copy p {
        font-size:11px;
        line-height:1.3;
        margin-bottom:9px;
    }

    .ranking-bottom {
        flex-direction:column;
        align-items:stretch;
        gap:7px;
    }

    .ranking-bottom .btn {
        min-height:40px;
        width:100%;
        font-size:12px;
        padding:9px;
        gap:8px;
    }

    .review-grid {
        grid-auto-columns:minmax(193px,47%);
        gap:9px;
    }

    .review-card {
        grid-template-columns:32% minmax(0,1fr);
        padding:10px;
        gap:9px;
    }

    .review-card h3 {
        font-size:12px;
        line-height:1.17;
        margin-bottom:9px;
    }

    .review-card>.editorial-image {
        margin-top:5px;
    }

    .review-copy p {
        font-size:10px;
    }

    .review-card>.btn {
        min-height:40px;
        font-size:12px;
        padding:8px;
    }

    .comparison-grid {
        grid-auto-columns:minmax(285px,80%);
    }

    .comparison-card {
        display:grid;
        grid-template-columns:37% minmax(0,1fr);
    }

    .comparison-card>.editorial-image {
        height:100%;
        aspect-ratio:auto;
    }

    .comparison-card .card-copy {
        padding:11px;
    }

    .comparison-card h3 {
        font-size:12px;
    }

    .comparison-card p {
        font-size:11px;
    }

    .comparison-card .btn {
        font-size:11px;
        min-height:40px;
        padding:8px;
        gap:5px;
        margin-top:auto;
        align-self:stretch;
    }

    .methodology {
        grid-template-columns:1fr;
        gap:11px;
    }

    .methodology-copy h2 {
        font-size:25px;
    }

    .methodology-copy p {
        font-size:12px;
        max-width:100%;
        margin:9px 0;
    }

    .methodology-copy .btn {
        min-height:40px;
        font-size:11px;
        padding:8px 12px;
    }

    .criteria-grid {
        gap:7px;
    }

    .criterion {
        min-height:120px;
        padding:12px 7px 9px;
        text-align:center;
        border-radius:7px;
    }

    .criterion>.icon {
        width:26px;
        height:26px;
        margin-bottom:10px;
    }

    .criterion h3 {
        font-size:10px;
        line-height:1.15;
        letter-spacing:-.2px;
    }

    .criterion p {
        font-size:9px;
        line-height:1.3;
    }

    .category-grid {
        grid-auto-columns:98px;
        gap:8px;
    }

    .category-card>span:last-child {
        padding:10px 7px;
        font-size:10px;
        gap:3px;
        min-height:39px;
    }

    .category-card>.editorial-image {
        aspect-ratio:1.25;
    }

    .category-card .icon {
        width:11px;
        height:11px;
    }

    .article-grid {
        grid-auto-columns:minmax(290px,81%);
    }

    .article-card {
        grid-template-columns:32% minmax(0,1fr);
    }

    .article-card>.editorial-image {
        min-height:140px;
    }

    .article-copy {
        padding:10px;
    }

    .article-copy h3 {
        font-family:Georgia,'Times New Roman',serif;
        font-size:15px;
        line-height:1.12;
        margin-bottom:7px;
    }

    .article-copy p {
        font-size:11px;
        margin-bottom:7px;
    }

    .article-meta {
        font-size:9px;
        flex-wrap:wrap;
    }

    .article-meta a {
        min-height:30px;
    }

    .newsletter {
        padding:15px 12px;
        grid-template-columns:43px minmax(0,1fr);
        column-gap:11px;
        row-gap:11px;
        margin-top:13px;
        border-radius:9px;
    }

    .newsletter-symbol {
        width:43px;
        height:43px;
        align-self:start;
        margin-top:4px;
    }

    .newsletter-symbol .icon {
        width:28px;
        height:28px;
    }

    .newsletter-copy .eyebrow {
        display:none;
    }

    .newsletter h2 {
        font-family:Georgia,'Times New Roman',serif;
        font-size:16px;
        line-height:1.16;
        letter-spacing:-.3px;
    }

    .newsletter-copy p {
        font-size:11px;
    }

    .newsletter-form {
        grid-column:1/-1;
    }

    .newsletter-fields {
        gap:6px;
    }

    .newsletter-fields input {
        font-size:12px;
        padding:10px;
        min-height:44px;
    }

    .newsletter-fields .btn {
        font-size:11px;
        padding-inline:11px;
        margin:0;
        min-height:44px;
    }

    .newsletter-form>p {
        font-size:9px;
        margin-top:7px;
    }

    .footer-main {
        padding-top:18px;
        padding-bottom:15px;
        display:grid;
        grid-template-columns:104px 1fr;
        gap:18px;
    }

    .footer-nav {
        font-size:11px;
        column-gap:18px;
        row-gap:0;
    }

    .footer-nav a {
        padding-block:6px;
    }

    .social {
        grid-column:2;
    }

    .social>span {
        font-size:11px;
        margin-bottom:7px;
    }

    .social .icon {
        width:18px;
        height:18px;
    }

    .footer-tagline {
        grid-column:1;
        grid-row:2;
        font-size:10px;
        text-align:left;
    }

    .footer-bottom {
        font-size:9px;
        flex-direction:column;
        align-items:flex-start;
        gap:9px;
        padding-top:11px;
        padding-bottom:8px;
    }

    .footer-bottom nav {
        gap:18px;
        flex-wrap:wrap;
    }

    .footer-bottom nav a {
        padding-block:7px;
    }

    .demo-note {
        font-size:9px;
        padding-bottom:14px;
    }

    .inner-page {
        padding-top:26px;
        padding-bottom:45px;
    }

    .inner-page h1 {
        font-size:33px;
        overflow-wrap:anywhere;
    }

    .back-link {
        margin-bottom:28px;
    }

    .search-results {
        grid-template-columns:1fr;
    }

    .search-result {
        padding:20px;
    }

    .reading-page .lead {
        font-size:17px;
    }

    .preview-notice {
        padding:23px;
    }

    .preview-notice h2 {
        font-size:26px;
    }

    .empty-state {
        padding:25px;
    }

    .empty-state h2 {
        font-size:25px;
    }

}

@media(max-width:359px) {
    .container {
        padding-inline:14px;
    }

    .hero-copy h1 {
        font-size:30px;
        max-width:88%;
    }

    .hero-description {
        max-width:81%;
        font-size:12px;
    }

    .hero-art {
        left:70%;
    }

    .hero-actions .btn {
        font-size:11px;
    }

    .section-heading h2,h2 {
        font-size:23px;
    }

    .section-more {
        font-size:9px;
    }

    .criterion {
        padding-inline:5px;
    }

    .criterion h3 {
        font-size:9px;
    }

    .criterion p {
        font-size:8px;
    }

    .newsletter-fields .btn {
        font-size:10px;
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

    *,*:before,*:after {
        transition:none!important;
        animation:none!important;
    }

}

@media print {
    .mobile-actions,.search-form,.newsletter,.social,.hero-art,.section-more {
        display:none!important;
    }

    .hero-copy {
        width:100%;
    }

    .card-rail {
        overflow:visible;
        display:flex;
        flex-wrap:wrap;
    }

    .card-rail>* {
        width:30%;
    }

    .site-header,.site-footer {
        background:white;
    }

    a {
        color:inherit;
    }

}