body:has(.useful-page) { background-color:#f3f0e9; }
.useful-page { --u-bg:#f3f0e9; --u-paper:#faf8f3; --u-ink:#262522; --u-muted:#777269; --u-line:#d9d3c8; --u-bronze:#935724; box-sizing:border-box; width:100%; margin:0; padding:3rem 32px 6rem; color:var(--u-ink); }
.useful-page *, .useful-page *::before, .useful-page *::after { box-sizing:border-box; }
.useful-page [id] { scroll-margin-top:7rem; }
.useful-page a { color:inherit; }
.useful-page a:focus-visible, .useful-table:focus-visible { outline:2px solid var(--u-bronze); outline-offset:4px; }
.useful-page h1, .useful-page h2, .useful-page h3 { font-family:'Alethia Pro', Georgia, serif; font-weight:400; }
.useful-breadcrumbs { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; color:var(--u-muted); font-size:.78rem; line-height:1.6; margin-bottom:3rem; }
.useful-breadcrumbs a { text-decoration:none; }
.useful-breadcrumbs a:hover, .useful-all:hover { color:var(--u-bronze); }
.useful-eyebrow, .useful-card-number { color:var(--u-bronze); font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; }
.useful-hero { padding:2rem 0 4.5rem; border-bottom:1px solid var(--u-line); }
.useful-hero h1 { font-size:clamp(3rem,5.5vw,5.3rem); line-height:1.05; max-width:900px; margin:1.2rem 0 1.6rem; }
.useful-lead { max-width:720px; font-size:1.15rem; line-height:1.8; color:#5d5952; }
.useful-catnav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--u-line); }
.useful-catnav a { display:flex; justify-content:space-between; gap:1rem; padding:1.6rem 1.3rem; border-right:1px solid var(--u-line); text-decoration:none; font-size:.9rem; }
.useful-catnav a:first-child { padding-left:0; }
.useful-catnav a:last-child { border-right:0; }
.useful-catnav span { color:var(--u-bronze); white-space:nowrap; }
.useful-catnav a:hover { color:var(--u-bronze); }
.useful-section { padding:5.5rem 0; border-bottom:1px solid var(--u-line); }
.useful-section-head { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:2.8rem; }
.useful-section-head h2 { font-size:clamp(2.3rem,3.5vw,3.4rem); line-height:1.15; margin:0; }
.useful-section-head p { color:var(--u-muted); line-height:1.8; max-width:530px; margin:0; }
.useful-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.useful-cards-comparisons { grid-template-columns:repeat(2,minmax(0,1fr)); }
.useful-cards-buyers-guide { grid-template-columns:repeat(2,minmax(0,1fr)); }
.useful-card { min-width:0; min-height:360px; background:var(--u-paper); display:flex; flex-direction:column; justify-content:space-between; padding:1.8rem; text-decoration:none; border:1px solid transparent; transition:transform .2s,border-color .2s; }
.useful-card:hover { transform:translateY(-4px); border-color:#c9b9a8; }
.useful-card h3 { font-size:clamp(1.5rem,2vw,2rem); line-height:1.2; margin:4rem 0 1rem; }
.useful-card p { color:var(--u-muted); font-size:.88rem; line-height:1.7; max-width:48ch; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.useful-card-more { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--u-line); padding-top:1.1rem; margin-top:1.5rem; text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; }
.useful-card-feature { background:#24231f; color:#f3f0e9 !important; }
.useful-card-feature .useful-card-number { color:#c9a380; }
.useful-card-feature h3 { font-size:clamp(2rem,2.7vw,2.7rem); }
.useful-card-feature p { color:#c9c5bc; }
.useful-card-feature .useful-card-more { border-color:#5e5a52; }
.useful-next { display:grid; grid-template-columns:1.1fr .9fr; background:var(--u-paper); margin-top:5.5rem; }
.useful-next > div { padding:3.5rem; }
.useful-next h2 { font-size:clamp(2rem,3vw,3rem); margin:1rem 0; }
.useful-next p:not(.useful-eyebrow) { color:var(--u-muted); line-height:1.8; }
.useful-next-links { display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.useful-next-links a { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--u-line); text-decoration:none; }
.useful-detail > .useful-breadcrumbs, .useful-detail > article, .useful-detail > .useful-related { max-width:900px; }
.useful-detail-header { padding:1rem 0 3rem; border-bottom:1px solid var(--u-line); }
.useful-detail-header h1 { font-size:clamp(2.7rem,4.5vw,4.8rem); line-height:1.12; margin:1.2rem 0 1.5rem; }
.useful-updated { color:var(--u-muted); font-size:.85rem; }
.useful-detail-body { padding:2.5rem 0 5rem; }
.useful-detail-body h2 { font-size:clamp(1.8rem,2.4vw,2.5rem); line-height:1.25; margin:3.3rem 0 1.2rem; }
.useful-detail-body h3 { font-size:1.5rem; line-height:1.35; margin:2rem 0 .75rem; }
.useful-detail-body p, .useful-detail-body li { font-size:1rem; line-height:1.85; }
.useful-detail-body p { margin:0 0 1.2rem; }
.useful-detail-body ul { list-style:disc; padding-left:1.5rem; margin:1rem 0 1.6rem; }
.useful-detail-body li { margin-bottom:.7rem; }
.useful-detail-body a { text-decoration:underline; text-underline-offset:.2em; }
.useful-detail-body a:hover { color:var(--u-bronze); }
.useful-table { overflow-x:auto; margin:1.8rem 0 2.2rem; }
.useful-table table { border-collapse:collapse; width:100%; min-width:650px; font-size:.86rem; line-height:1.6; }
.useful-table th, .useful-table td { padding:.9rem; border:1px solid #b7a398; text-align:left; vertical-align:top; min-width:120px; }
.useful-table thead { background:#222d3a; color:#fff; }
.useful-table tbody tr:nth-child(even) { background:#ffffff70; }
.useful-related { border-top:1px solid var(--u-line); padding:3rem 0; }
.useful-related h2 { font-size:2.2rem; margin:0 0 1.8rem; }
.useful-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.useful-related-grid a { min-height:130px; padding:1.5rem; background:var(--u-paper); display:flex; justify-content:space-between; gap:1rem; text-decoration:none; line-height:1.5; }
.useful-related-grid a:hover { color:var(--u-bronze); }
.useful-all { display:inline-block; margin-top:1rem; }
@media(max-width:900px) { .useful-page { padding-top:2rem; padding-bottom:4rem; } .useful-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .useful-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .useful-page { padding-top:1.5rem; padding-bottom:3rem; } .useful-breadcrumbs { margin-bottom:1rem; } .useful-hero { padding:2rem 0 3rem; } .useful-catnav, .useful-section-head, .useful-cards, .useful-next, .useful-related-grid { grid-template-columns:1fr; } .useful-catnav a, .useful-catnav a:first-child { padding:1rem 0; border-right:0; border-bottom:1px solid var(--u-line); } .useful-catnav a:last-child { border-bottom:0; } .useful-section { padding:3.5rem 0; } .useful-section-head { gap:1rem; margin-bottom:2rem; } .useful-card { min-height:290px; } .useful-card h3 { margin-top:2.5rem; } .useful-next { margin-top:3.5rem; } .useful-next > div { padding:2rem; } .useful-detail-body { padding-bottom:3rem; } }
/* The site-wide mobile header and section gutters are supplied by .useful-page here. */
.useful-page header, .useful-page section { padding-left:0; padding-right:0; }