/* Garden theme stylesheet.
 *
 * Adapted from prototypes/garden-battery/styles.css so the published artifact looks like the
 * Garden prototype. The Blade templates use the prototype's own class names, so every class they
 * emit is defined here; a theme rendering unstyled is how the earlier "4produk" spacing bug and the
 * unstyled hero got shipped in the first place.
 */
:root {
    --bg: #f7f6ef;
    --surface: #fffdf8;
    --ink: #152c21;
    --muted: #5b6b62;
    --brand: #163f2a;
    --brand-2: #276341;
    --lime: #ddeb76;
    --soft: #e8f0e6;
    --border: #ced7cf;
    --focus: #9b6d00;
    --radius: 20px;
    --shadow: 0 16px 44px #17312610;
}
* {
    box-sizing: border-box;
}
/* `overflow-x: clip` on <html> or <body> makes that element a scroll container, so the sticky
 * header detaches from the viewport and page content scrolls over it. Neither the root nor the
 * body may clip; wide content is contained by the layout's own max-widths instead. */
body {
    min-width: 0;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
main,
section,
article,
aside,
.shell,
header,
footer {
    min-width: 0;
}
p,
li,
dd,
a {
    overflow-wrap: anywhere;
}
a {
    color: inherit;
}
img {
    max-width: 100%;
    display: block;
}
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}
.sr-only,
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: auto;
    height: auto;
    clip-path: none;
    padding: 0.7rem;
    background: white;
    z-index: 20;
}

/* Shell and rhythm */
.shell {
    width: min(1180px, calc(100% - 2rem));
    margin: auto;
}
.section {
    padding: 4.5rem 0;
}
.section-space {
    padding: 2.5rem 0;
}
.section.tint {
    background: var(--soft);
}
.section.dark,
.bench-section.dark {
    background: var(--brand);
    color: white;
}
.section.dark .section-heading,
.bench-section.dark h2,
.bench-section.dark h3 {
    color: white;
}
.section.dark .lead,
.section.dark .muted,
.bench-section.dark p {
    color: #cfe0d6;
}
.section.dark .eyebrow,
.bench-section.dark .eyebrow {
    color: var(--lime);
}
.section.dark .need-card,
.section.dark .job-card,
.bench-section.dark .need-card {
    background: #ffffff12;
    border-color: #ffffff33;
    color: white;
}
.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    margin: 0 0 0.8rem;
}
/* The heading row sets the large size, so a link inside it must not inherit it. */
.section-heading .text-link {
    font-size: 1rem;
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--brand-2);
    margin: 0 0 0.3rem;
}
.lead,
.intro {
    font-size: 1.12rem;
    color: var(--muted);
    max-width: 62ch;
    margin: 0 0 1rem;
}
.muted {
    color: var(--muted);
}
h1 {
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0.6rem 0 1.2rem;
}
h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    margin: 0 0 0.8rem;
}
h3 {
    line-height: 1.25;
    margin: 0 0 0.4rem;
}
.page-heading {
    margin-bottom: 1.5rem;
}
.breadcrumb {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.8rem;
}

/* Header */
.site-header {
    min-height: 74px;
    display: flex;
    align-items: center;
    background: #f7f6eff2;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    /* The header was translucent with a backdrop filter, so page text scrolled visibly through it.
     * An opaque background keeps the bar readable over every section it overlaps. */
    background: #f7f6ef;
    z-index: 1000;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.1;
}
.brand small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted);
    max-width: 28ch;
}
.brand-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50% 50% 46% 54%;
    background: var(--brand);
    color: var(--lime);
    flex: none;
}
.navigation summary {
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-weight: 700;
}
.navigation nav {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.8rem 0;
}
.navigation nav a {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}
.navigation nav a[aria-current] {
    background: var(--soft);
}
.nav-categories div {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.nav-categories a.active {
    background: var(--soft);
}

/* Hero: the demo splits the hero into copy and a card that walks the reader through the steps,
 * so the fold carries structure instead of one column of copy. */
.bench-hero,
.hero {
    padding: 3.5rem 0 4rem;
    background:
        radial-gradient(circle at 88% 16%, #ddeb7699, transparent 26%),
        linear-gradient(145deg, #e5eee2, #f5f0dc);
}
.bench-section {
    padding: 3.5rem 0;
    background: var(--soft);
}
.hero-copy {
    max-width: 60ch;
}
.hero-copy h1 span {
    color: var(--brand-2);
}
@media (min-width: 900px) {
    .hero-split {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
        gap: 2.5rem;
        align-items: center;
    }
    .hero-stats {
        margin-top: 0;
    }
}

/* The "3 langkah" card, ported from the demo's hero-card. */
.job-card {
    align-self: center;
    padding: 1.3rem;
}
.job-card > span,
.step-number {
    display: inline-flex;
    padding: 0.3rem 0.55rem;
    border-radius: 7px;
    background: var(--lime);
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}
.job-card ol {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    counter-reset: steps;
}
.job-card li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.1rem 0.7rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border);
    counter-increment: steps;
}
.job-card li::before {
    content: counter(steps);
    grid-row: 1 / 3;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--soft);
    font-weight: 900;
}
.job-card li b {
    display: block;
    line-height: 1.25;
}
.job-card li small {
    display: block;
    color: var(--muted);
}
/* Each stat stacks its figure over its own label, so a number never runs into the words next to
 * it. The earlier missing space came from these two elements sitting inline with no block rule. */
.proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}
.proof > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
}
.proof strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1.2;
}
.proof small {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
}
.hero-trust {
    font-size: 0.86rem;
    color: var(--muted);
    margin-top: 1rem;
}

/* Category entries read as the demo's needs list: icon, job, and the arrow, one row each, so a
 * visitor can match the job to a tool by scanning rather than reading three equal cards. */
.job-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.8rem;
    margin-top: 2rem;
}
a.job-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    text-decoration: none;
    transition: 0.2s;
}
a.job-row:hover {
    border-color: var(--brand-2);
    transform: translateY(-2px);
}
a.job-row b {
    display: block;
    line-height: 1.25;
}
a.job-row small {
    display: block;
    color: var(--muted);
    font-size: 0.86rem;
}
.job-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--soft);
    font-size: 1.4rem;
    flex: none;
}
.job-arrow {
    color: var(--brand-2);
    font-weight: 800;
}

/* The dark "before choosing" band from the demo, where three numbered lessons sit on the
 * brand background. */
.lesson-wrap {
    background: var(--brand);
    color: white;
}
.lesson-wrap .eyebrow {
    color: var(--lime);
}
.lesson-wrap h2 {
    color: white;
}
.lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.lesson-grid article {
    padding: 1.1rem;
    border: 1px solid #ffffff38;
    border-radius: 15px;
}
.lesson-grid article span {
    color: var(--lime);
    font-weight: 900;
}
.lesson-grid article b {
    display: block;
    font-size: 1.15rem;
    margin: 0.5rem 0;
}
.lesson-grid article p {
    margin: 0;
    color: #e1ebe4;
    font-size: 0.92rem;
}

/* Actions and buttons */
.actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin: 1.4rem 0;
}
.button,
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    padding: 0.72rem 1rem;
    border: 1px solid var(--brand);
    border-radius: 11px;
    text-decoration: none;
    font-weight: 850;
    cursor: pointer;
}
.btn,
.button.lime {
    background: var(--brand);
    color: white;
}
.btn:hover,
.button.lime:hover {
    background: #0d321f;
}
.button.light {
    background: transparent;
    color: var(--brand);
}
.button.light:hover {
    background: var(--soft);
}

/* Grids and cards */
.grid,
.job-grid {
    display: grid;
    gap: 1rem;
}
.grid.two,
.split {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid.three,
.grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 900px) {
    .grid.three,
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.need-card,
.job-card,
.product-card,
.brand-card,
.alternative-card,
.dark-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    text-decoration: none;
    transition: 0.2s;
}
a.need-card:hover,
a.job-card:hover,
a.product-card:hover,
a.brand-card:hover,
a.alternative-card:hover {
    border-color: var(--brand-2);
    transform: translateY(-2px);
}
.need-card p,
.job-card p,
.product-card p,
.brand-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    flex: 1 1 auto;
}
.dark-card {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
}
.dark-card p {
    color: #dce8df;
}
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.5rem;
}
.card-body p {
    flex: 1 1 auto;
}
.card-body > .text-link,
.card-body > .card-actions,
.card-actions,
.card-body > a:last-child,
.need-card > .text-link,
.job-card > .text-link,
.brand-card > .text-link,
.alternative-card > .text-link {
    margin-top: auto;
}
.empty-cell {
    padding: 0.75rem 0.625rem;
    color: var(--muted);
    text-align: center;
    font-style: italic;
}
.number,
.badge,
.stock {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: var(--lime);
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 900;
    width: fit-content;
}
.stock {
    background: var(--soft);
}
.text-link {
    font-weight: 800;
    color: var(--brand-2);
    margin-top: auto;
}
/* The demo closes its category rows with a smaller caption than the card body. */
.job-row .job-arrow {
    font-size: 1rem;
}
.empty,
.panel,
.trust-panel,
.product-intro-panel,
.notice {
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.empty {
    border-style: dashed;
    color: var(--muted);
}
.notice {
    background: #fff0e8;
    border-color: #e0b9a4;
    font-size: 0.9rem;
}

/* Finder */
.finder-form {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}
.finder-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
}

/* Product detail */
.product-detail,
.split {
    display: grid;
    gap: 1.6rem;
}
@media (min-width: 900px) {
    .split {
        grid-template-columns: 1.1fr 1fr;
        align-items: start;
    }
}
/* The demo introduces a brand with a filled badge before its product list, so a reader can tell
 * which manufacturer a page is about before scanning models. */
.brand-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--soft);
    border-radius: 14px;
    margin: 0 0 1.4rem;
}
.brand-badge {
    display: inline-flex;
    padding: 0.3rem 0.55rem;
    border-radius: 7px;
    background: var(--lime);
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}
.brand-feature .brand-badge {
    font-size: 1rem;
}
/* Product imagery is a tall contained panel in the demo, not a raw <img>. */
.product-photo,
.product-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    background: var(--soft);
}
/* A <figure> carries the browser's own 1em top and bottom margin and 40px to each side. Nothing
   here reset it, so every product photo sat 40px outside the padding box of the card holding it
   and overflowed the card's border by that much on both sides. The card is the frame; the figure
   is only its content box. */
.product-photo {
    margin: 0;
}
/* The card is a flex column, so the figure would otherwise shrink below the image it contains and
 * the photo would paint over the caption. The image keeps its own fixed height, so the figure
 * carries the same floor and refuses to shrink. */
.product-card .product-photo {
    flex: none;
    min-height: 200px;
    overflow: hidden;
    background: linear-gradient(145deg, #edf2ea, #f5edda);
}
.product-card .product-photo img {
    height: 200px;
    object-fit: contain;
    padding: 1rem;
}
.product-art {
    min-height: 200px;
    display: grid;
    place-items: center;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(145deg, #edf2ea, #f5edda);
    text-align: center;
}
.product-art span {
    color: var(--brand-2);
}
.product-art small {
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}
.price {
    font-size: 1.5rem;
    font-weight: 900;
}
.buy-box {
    display: grid;
    gap: 0.6rem;
    padding: 1.1rem;
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: 15px;
}
/* The demo keeps a checklist beside the detail and pins it while the reader scrolls, so the
 * questions to ask before buying stay in view. */
.checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.checklist li {
    padding: 0.55rem 0;
    color: var(--ink);
}
.checklist li::before {
    content: "✓";
    color: var(--brand-2);
    font-weight: 900;
    margin-right: 0.5rem;
}
@media (min-width: 900px) {
    .detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
        gap: 1.6rem;
        align-items: start;
    }
    .detail-aside {
        position: sticky;
        top: 90px;
    }
}
.quick-specs-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1rem;
}
@media (max-width: 560px) {
    .quick-specs-summary {
        grid-template-columns: 1fr;
    }
}
.spec-table,
.source-list {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
    font-size: 0.92rem;
}
.spec-table th,
.spec-table td,
.source-list li {
    text-align: left;
    padding: 0.7rem 0.5rem;
    border-top: 1px solid var(--border);
    vertical-align: top;
}
.spec-table th {
    color: var(--muted);
    font-weight: 700;
    width: 45%;
}
.source {
    font-size: 0.8rem;
    color: var(--muted);
}
.spec-list {
    padding: 0;
    list-style: none;
    margin: 0;
}
.spec-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.claim {
    display: inline-block;
    margin-right: 0.45rem;
    padding: 0.2rem 0.45rem;
    border-radius: 5px;
    background: #e3ebff;
    font-size: 0.72rem;
    font-weight: 850;
}
.source-list {
    list-style: none;
    padding: 0;
}

/* Prose and footer */
.prose {
    max-width: 72ch;
    margin: 3rem auto;
}
.prose h2 {
    margin-top: 2.2rem;
}
.prose li {
    margin-bottom: 0.7rem;
}
.method-list {
    margin: 0 0 1.2rem;
    padding-left: 1.2rem;
}
.method-list li {
    margin-bottom: 0.7rem;
}
.site-footer {
    margin-top: 4rem;
    padding: 2.5rem 0;
    background: var(--brand);
    color: white;
}
.site-footer a {
    color: var(--lime);
}
.site-footer .eyebrow {
    color: var(--lime);
}
.footer-grid {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 780px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}

/* Ownership-cost calculator
 * The demo puts the input form beside a running total, so a reader sees each assumption turn
 * into a rupiah figure without leaving the page. The form controls carry their own rules
 * because the sheet had none: the finder inputs were rendering as unstyled browser defaults. */
.calculator-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}
.calculator-form {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.calculator-field {
    display: grid;
    gap: 0.35rem;
    font-weight: 750;
}
.calculator-field span {
    font-weight: 400;
    color: var(--muted);
}
.calculator-field input,
.calculator-field select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0.65rem;
    background: white;
    border: 1px solid #899c8e;
    border-radius: 9px;
    font: inherit;
}
.calculator-totals {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.calculator-totals span,
.calculator-totals strong {
    display: grid;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.calculator-totals b {
    font-size: 1.4rem;
}
.calculator-totals strong b {
    font-size: 2rem;
}
.calculator-totals small {
    color: var(--muted);
}
.assumption-note {
    padding: 1rem 1.1rem;
    background: #fff0e8;
    border: 1px solid #e0b9a4;
    border-radius: 13px;
    font-size: 0.9rem;
}
@media (min-width: 900px) {
    .calculator-layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    }
}

@media (max-width: 720px) {
    .section,
    .bench-hero,
    .bench-section {
        padding: 3rem 0;
    }
    .brand small {
        max-width: 18ch;
    }
}
/* Interface elements the templates use that neither the theme's own sheet nor the prototype it was
   adapted from defines. Only custom properties are used, so each theme gets these in its own
   colours. Generated by tools/theme-residual-styles.php. */
.buy-box-header{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--line,#ddd);margin-bottom:1rem}
.buy-box-header h2,.buy-box-header h3{margin:0}
.calc-range{width:100%;accent-color:var(--brand,var(--purple,#6f2cff))}
.slider-control{display:grid;gap:.35rem;margin-bottom:1rem}
.slider-control label{font-size:.875rem;opacity:.85}
.compare-form{display:grid;gap:1rem;padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem;margin-bottom:1.5rem}
.compare-form select,.compare-form input{width:100%;padding:.5rem;border:1px solid var(--line,#ddd);border-radius:.35rem;background:var(--paper,#fff);color:inherit;font:inherit}
.aspect-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.5rem 0}
.aspect-card{padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem}
.aspect-card h3{margin:0 0 .5rem}
.aspect-diff{display:grid;gap:.35rem}
.aspect-diff>div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--line,#ddd)}
.aspect-winner-row{font-weight:700;color:var(--brand,var(--purple,#6f2cff))}
/* Shared layout structure. The layout names these the same way in every theme, and no theme
   defined them, so they rendered with browser defaults: a skip link visible on the page, a
   three-column grid that was one column, a secondary button with no affordance. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:.6rem 1rem;background:var(--ink,#17332d);color:var(--paper,#fff);text-decoration:none}
.skip-link:focus{left:0}
.three{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.prose>:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.lede{font-size:1.125rem;line-height:1.6;opacity:.88;margin:0 0 1rem}
.section-intro{max-width:60ch;opacity:.85;margin:0 0 1.5rem}
.hero-note{padding:.75rem 1rem;border:1px solid currentColor;border-radius:.5rem;opacity:.9}
.result-heading{font-size:1.25rem;margin:0 0 .75rem}
.footer-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.journey,.needs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.trust{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}
/* Residual interface elements: structures the shared layout names that neither a theme's own sheet
   nor the prototype it was adapted from ever defined. */
.navigation{display:flex;align-items:center}
.navigation>summary{cursor:pointer;list-style:none}
.navigation>summary::-webkit-details-marker{display:none}
.navigation[open]>summary~nav{position:absolute;right:1rem;top:100%;min-width:14rem;padding:.75rem;background:var(--paper,#fff);border:1px solid var(--line,#ccc);z-index:30}

/* The menu is written as a <details>, so it is closed — and therefore invisible — until something
   opens it. Below this width a reader is expected to tap the summary, which is right for a phone.
   Above it there is room for the whole bar, and it has to be laid out without being opened, or the
   navigation is missing from the page on every browser that does not open a closed <details> by
   itself. Ten of eleven sites were in exactly that state. The summary is hidden here because the
   links are already on screen. */
@media(min-width:900px){
.navigation>summary{display:none}
.navigation:not([open])>nav{display:flex;align-items:center;gap:1rem}
.navigation nav{position:static;background:none;border:0;padding:0;min-width:0}
.navigation nav a{padding:.35rem 0}
}
.ghost{background:none;border:1px solid currentColor;border-radius:.35rem}
.ghost:hover{opacity:.8}
.shell.hero-copy,.hero-copy{min-width:0}
.theme-mark,.brand-spark{display:inline-flex;align-items:center;gap:.35rem}
.buy-box-header{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--line,#ddd);margin-bottom:1rem}
.buy-box-header h2,.buy-box-header h3{margin:0}
.calc-range{width:100%;accent-color:var(--brand,var(--purple,#6f2cff))}
.slider-control{display:grid;gap:.35rem;margin-bottom:1rem}
.slider-control label{font-size:.875rem;opacity:.85}
.compare-form{display:grid;gap:1rem;padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem;margin-bottom:1.5rem}
.compare-form select,.compare-form input{width:100%;padding:.5rem;border:1px solid var(--line,#ddd);border-radius:.35rem;background:var(--paper,#fff);color:inherit;font:inherit}
.aspect-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.5rem 0}
.aspect-card{padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem}
.aspect-card h3{margin:0 0 .5rem}
.aspect-diff{display:grid;gap:.35rem}
.aspect-diff>div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--line,#ddd)}
.aspect-winner-row{font-weight:700;color:var(--brand,var(--purple,#6f2cff))}
/* Sprint 52 homepage bar. The hero fits one screen. A card photo keeps its own
   ratio inside a square, so a tall file does not stretch the frame. Trust sits
   apart from the footer. */
.hero.bench-hero{padding:1.15rem 0 1rem}
.hero.bench-hero .hero-copy h1{font-size:clamp(1.7rem,3.4vw,2.45rem);max-width:16em;margin:0 0 .6rem}
.hero.bench-hero .lead{font-size:1.02rem;margin-bottom:.7rem}
.hero.bench-hero .hero-trust{margin-top:.45rem}
.hero.bench-hero .job-card{padding:.85rem 1rem}
.hero.bench-hero .job-card ol{margin-top:.45rem}
.hero.bench-hero .job-card li{padding:.4rem 0}
.hero.bench-hero .actions{display:flex;flex-wrap:wrap;gap:.6rem}
.name-source{max-width:42rem;margin:.35rem 0 0}
main>section.trust{display:block;padding-bottom:0;margin-bottom:80px}
.site-footer{margin-top:0}
.footer-legal{margin:.4rem 0 0;font-size:.85rem}
.product-card>.product-photo{aspect-ratio:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:0;margin:0;flex:none;background:#e8f0e6}
.product-card>.product-photo img{position:static;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;min-height:0;padding:0}
/* Sprint 51 standalone gates. Desktop lays the closed details out as a bar.
   The phone menu is a solid column above the title. Footer items stay apart.
   Cards and hero buttons are untouched. */
html,body{color-scheme:light}
.site-footer .footer-grid>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.site-footer .footer-grid a:not(.brand){display:inline-block;margin:0;padding:.15rem 0}
@media(min-width:900px){
.site-header,.header-inner{flex-wrap:wrap}
header .header-inner>.navigation{flex:0 0 auto;width:max-content;min-width:max-content;margin-left:auto}
header details.navigation::details-content{content-visibility:visible;display:block;height:auto}
header details.navigation>nav#main-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:1rem;position:static;width:max-content;min-width:max-content;background:transparent;border:0;padding:0}
header details.navigation>nav#main-nav>a{white-space:nowrap;overflow-wrap:normal;padding:.35rem 0;color:#152c21}
}
@media(max-width:899px){
header.site-header{overflow:visible;z-index:1000}
header details.navigation[open]>nav#main-nav{position:absolute;left:0;right:0;top:100%;z-index:60;display:flex;flex-direction:column;flex-wrap:nowrap;gap:.15rem;width:auto;min-width:0;margin:0;padding:.65rem .85rem .85rem;background:#fff;color:#152c21;border:1px solid #ced7cf;border-radius:0 0 12px 12px;box-shadow:0 16px 32px #152c212e}
header details.navigation[open]>nav#main-nav>a{display:block;position:relative;z-index:1;color:#152c21;background:#fff;padding:.55rem .35rem;line-height:1.35;white-space:nowrap}
}
/* Sprint 52 phone menu. The open list sits in the header flow, under the wordmark,
   so a label stays whole and does not cover the title. */
@media(max-width:899px){
header .header-inner{flex-wrap:wrap;align-items:center}
header details.navigation>summary{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:auto;color:#152c21;background:#fff}
header details.navigation[open]{display:contents}
header details.navigation[open]>nav#main-nav{position:static;left:auto;right:auto;top:auto;z-index:1;display:flex;flex-direction:column;align-items:stretch;flex:1 0 100%;width:100%;min-width:0;margin:0;padding:.35rem 0 .85rem;background:#f7f6ef;color:#152c21;border:0;border-radius:0;box-shadow:none}
header details.navigation[open]>nav#main-nav>a{display:block;white-space:nowrap;overflow-wrap:normal;word-break:normal;color:#152c21;background:transparent;padding:.7rem 0;line-height:1.35}
}
/* The closed details panel stays hidden in browsers that do not support
   ::details-content, so the links sit beside it and stay on screen. */
@media(min-width:900px){
header details.navigation{display:none}
header details.navigation~nav#main-nav{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-end;gap:.35rem 1rem;position:static;width:auto;max-width:100%;min-width:0;margin-left:auto;background:transparent;border:0;padding:0}
header details.navigation~nav#main-nav>a{display:inline-block;white-space:nowrap;overflow-wrap:normal;word-break:normal;padding:.35rem 0;color:#152c21}
}
@media(max-width:899px){
header .header-inner>details.navigation{margin-left:auto}
header details.navigation~nav#main-nav{display:none}
header details.navigation[open]~nav#main-nav{position:static;left:auto;right:auto;top:auto;z-index:1;display:flex;flex-direction:column;align-items:stretch;flex:1 0 100%;width:100%;min-width:0;margin:0;padding:.35rem 0 .85rem;background:#f7f6ef;color:#152c21;border:0;border-radius:0;box-shadow:none}
header details.navigation[open]~nav#main-nav>a{display:block;white-space:nowrap;overflow-wrap:normal;word-break:normal;color:#152c21;background:transparent;padding:.7rem 0;line-height:1.35}
}
 pre,code{white-space:pre-wrap;overflow-wrap:anywhere}