/* Product-first styles, shared by Development and Production. */
:root {
    --lock-ink:#242721;
    --lock-muted:#61665f;
    --lock-line:#dedfd8;
    --lock-warm:#f3f2ed;
    --lock-accent:#dce798
}

.lock-section {
    padding-block:72px
}

.lock-section h1,.lock-hero h1 {
    font-size:clamp(2.5rem,4.5vw,4.6rem);
    line-height:1.04;
    letter-spacing:-.055em;
    color:var(--lock-ink);
    max-width:850px
}

.lock-section h2,.lock-help h2 {
    font-size:clamp(1.8rem,3vw,2.7rem);
    line-height:1.12;
    color:var(--lock-ink)
}

.lock-section h3 {
    font-size:1.3rem;
    color:var(--lock-ink)
}

.lock-kicker {
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.13em;
    font-weight:700;
    color:var(--lock-muted);
    margin-bottom:20px
}

.lock-lead {
    font-size:1.18rem;
    line-height:1.6
}

.lock-section p,.lock-detail p {
    margin-top:16px
}

.lock-section .lock-kicker {
    margin-top:0
}

.lock-heading {
    max-width:800px;
    margin-bottom:48px
}

.lock-heading>p:not(.lock-kicker) {
    font-size:1.12rem;
    max-width:700px
}

.lock-heading .lock-button {
    margin-top:24px
}

.lock-hero {
    display:grid;
    grid-template-columns:1.12fr 1fr;
    gap:60px;
    align-items:center;
    padding-block:54px
}

.lock-hero-copy>p:not(.lock-kicker) {
    margin-top:24px;
    max-width:570px
}

.lock-actions {
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:30px
}

.lock-button {
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    background:var(--lock-ink);
    color:#fff;
    padding:13px 22px;
    border:1px solid var(--lock-ink);
    border-radius:4px;
    font-weight:650;
    line-height:1.4;
    cursor:pointer;
    text-align:center
}

.lock-button:hover {
    background:#42483b;
    color:#fff
}

.lock-button.secondary {
    background:transparent;
    color:var(--lock-ink)
}

.lock-button.light {
    background:var(--lock-accent);
    border-color:var(--lock-accent);
    color:var(--lock-ink)
}

.lock-text-link {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:8px 0;
    font-weight:650;
    gap:12px;
    text-decoration:underline;
    text-underline-offset:5px
}

.lock-hero-product {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:28px;
    min-height:480px;
    background:var(--lock-warm);
    border-radius:6px
}

.lock-hero-label {
    text-transform:uppercase;
    font-size:.7rem;
    letter-spacing:.13em;
    color:var(--lock-muted)
}

.lock-hero-product img {
    width:340px;
    height:340px;
    object-fit:contain;
    align-self:center;
    mix-blend-mode:multiply
}

.lock-hero-caption {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}

.lock-hero-caption strong {
    display:block;
    font-size:1.7rem;
    color:var(--lock-ink)
}

.lock-hero-caption small {
    display:block;
    font-size:.85rem
}

.lock-round-arrow {
    width:46px;
    height:46px;
    border:1px solid #b9beb2;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:1.5rem
}

.lock-service-strip {
    border-block:1px solid var(--lock-line);
    display:flex;
    justify-content:space-between;
    padding-block:20px;
    gap:15px;
    font-size:.82rem
}

.lock-section-top {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:30px
}

.lock-section-top>div {
    max-width:690px
}

.lock-filters {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:28px 0
}

.lock-filters a {
    min-height:44px;
    display:flex;
    align-items:center;
    padding:9px 17px;
    border:1px solid var(--lock-line);
    border-radius:3px;
    font-size:.85rem
}

.lock-filters a:hover,.lock-filters a[aria-current] {
    background:var(--lock-ink);
    color:white;
    border-color:var(--lock-ink)
}

.lock-list-title {
    margin:38px 0 24px
}

.lock-list-title span {
    font-size:1rem;
    font-weight:400;
    color:var(--lock-muted)
}

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

.lock-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    border:1px solid var(--lock-line);
    border-radius:5px;
    overflow:hidden;
    background:white
}

.lock-photo {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f6f6f2;
    padding:24px
}

.lock-photo img {
    width:230px;
    height:230px;
    object-fit:contain;
    mix-blend-mode:multiply;
    transition:transform .2s
}

.lock-photo:hover img {
    transform:scale(1.04)
}

.lock-card-body {
    padding:24px;
    flex:1;
    display:flex;
    flex-direction:column
}

.lock-card .lock-kicker {
    margin:0 0 10px
}

.lock-card h3 {
    font-size:1.7rem
}

.lock-card h3 a {
    display:inline-flex;
    align-items:center;
    min-height:44px
}

.lock-card p {
    font-size:.9rem;
    margin-top:12px
}

.lock-note {
    font-size:.82rem!important;
    color:var(--lock-muted)
}

.lock-card-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:auto;
    padding-top:24px;
    font-size:.85rem
}

.lock-card-bottom strong {
    color:var(--lock-ink)
}

.lock-warm {
    background:var(--lock-warm)
}

.lock-access-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:24px;
    margin-top:45px
}

.lock-access-grid h3 {
    font-size:1rem
}

.lock-access-grid p {
    font-size:.85rem
}

.lock-access-icon {
    display:block;
    font-size:2rem;
    margin-bottom:20px;
    color:var(--lock-ink)
}

.lock-editorial-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center
}

.lock-editorial-grid .lock-text-link,.lock-editorial-grid .lock-button {
    margin-top:24px
}

.lock-pin-demo {
    background:var(--lock-warm);
    padding:40px;
    border-radius:6px
}

.lock-pin-digits {
    display:flex;
    gap:12px;
    margin:35px 0
}

.lock-pin-digits span {
    flex:1;
    text-align:center;
    padding:15px 4px;
    background:#fff;
    border:1px solid var(--lock-line);
    border-radius:4px;
    font-size:2.5rem;
    font-variant-numeric:tabular-nums;
    color:var(--lock-ink)
}

.lock-pin-dates {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:.75rem
}

.lock-pin-dates strong {
    display:block;
    font-size:.95rem
}

.lock-dark {
    background:var(--lock-ink);
    color:#e2e5da
}

.lock-dark h2,.lock-dark .lock-kicker {
    color:white
}

.lock-install-steps {
    padding-left:24px;
    margin:24px 0
}

.lock-install-steps li {
    padding:18px 0 18px 12px;
    border-bottom:1px solid #94988766
}

.lock-install-steps strong,.lock-install-steps span {
    display:block
}

.lock-install-steps span {
    font-size:.9rem;
    margin-top:6px
}

.lock-schedule {
    background:var(--lock-warm);
    padding:40px;
    border-left:3px solid #a8b773
}

.lock-big-number {
    display:block;
    font-size:7rem;
    letter-spacing:-.08em;
    line-height:1;
    font-weight:650;
    color:var(--lock-ink);
    margin-bottom:20px
}

.lock-workflow {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    list-style-position:inside;
    margin:40px 0;
    padding:0
}

.lock-workflow li {
    border-top:1px solid #a1a795;
    padding:20px 0;
    font-weight:600
}

.lock-integration {
    border-top:1px solid var(--lock-line);
    padding-top:30px;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:center
}

.lock-brand-links {
    display:flex;
    gap:22px;
    flex-wrap:wrap
}

.lock-brand-links a {
    font-size:1.35rem;
    font-weight:700;
    min-height:44px;
    display:flex;
    align-items:center
}

.lock-faq details {
    border-bottom:1px solid var(--lock-line);
    padding:6px 0
}

.lock-faq summary {
    cursor:pointer;
    min-height:56px;
    padding:18px 0;
    font-weight:650
}

.lock-faq details p {
    margin:0 0 24px;
    max-width:850px
}

.lock-help {
    margin-top:65px;
    margin-bottom:30px;
    background:var(--lock-warm);
    padding:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    border-radius:5px
}

.lock-help>div {
    max-width:650px
}

.lock-help p {
    margin-top:12px
}

.lock-help[hidden] {
    display:none
}

.lock-breadcrumb {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    padding-top:16px;
    font-size:.83rem
}

.lock-breadcrumb a {
    display:inline-flex;
    align-items:center;
    min-height:44px
}

.lock-detail {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    padding-top:30px;
    padding-bottom:50px;
    align-items:center
}

.lock-detail-photo {
    min-height:500px;
    background:var(--lock-warm);
    display:grid;
    place-items:center;
    padding:40px
}

.lock-detail-photo img {
    width:360px;
    height:360px;
    object-fit:contain;
    mix-blend-mode:multiply
}

.lock-detail h1 {
    font-size:4rem;
    color:var(--lock-ink)
}

.lock-detail-price {
    font-size:1.45rem;
    font-weight:700;
    color:var(--lock-ink)
}

.lock-checklist {
    margin:25px 0 0;
    padding-left:22px
}

.lock-checklist li {
    padding:5px 0
}

.lock-detail-sections {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:start;
    border-top:1px solid var(--lock-line)
}

.lock-specs table,.lock-comparison {
    width:100%;
    border-collapse:collapse;
    margin-top:30px;
    font-size:.85rem;
    table-layout:fixed
}

.lock-specs th,.lock-specs td,.lock-comparison th,.lock-comparison td {
    padding:14px 12px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--lock-line);
    overflow-wrap:anywhere
}

.lock-specs th,.lock-comparison th {
    color:var(--lock-ink);
    background:var(--lock-warm);
    font-weight:600
}

.lock-comparison thead a {
    min-height:44px;
    display:flex;
    align-items:center
}

.lock-comparison caption,.lock-specs caption {
    text-align:left;
    font-weight:600;
    padding-bottom:12px
}

.lock-mobile-comparison {
    display:none
}

.lock-finder {
    max-width:850px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px
}

.lock-finder fieldset {
    border:1px solid var(--lock-line);
    padding:24px;
    min-width:0
}

.lock-finder legend {
    font-weight:650;
    padding:0 8px
}

.lock-finder label {
    display:block;
    margin-bottom:10px
}

.lock-finder select {
    width:100%;
    min-height:48px;
    border:1px solid #9c9f96;
    border-radius:3px;
    padding:10px;
    background:white
}

.lock-choice-grid {
    display:grid;
    grid-template-columns:1fr 1fr
}

.lock-choice-grid label {
    display:flex;
    gap:8px;
    align-items:center;
    min-height:44px;
    margin:0
}

.lock-choice-grid input {
    width:18px;
    height:18px;
    accent-color:#42483b
}

.lock-panel {
    padding:35px
}

:is(a,button,input,select,textarea,summary):focus-visible {
    outline:3px solid #687a2c;
    outline-offset:4px
}

.product-site .primary-nav a {
    min-height:44px;
    display:flex;
    align-items:center
}

.product-site .brand-copy small {
    color:var(--lock-muted)
}

.product-site .brand-copy strong {
    color:var(--lock-ink)
}

.product-site .brand img {
    width:55px;
    height:55px;
    object-fit:contain
}

.product-site .nav-cta {
    background:var(--lock-ink)
}

.product-site .site-footer {
    background:var(--lock-ink)
}

.product-site .site-footer .brand-copy strong,.product-site .site-footer .brand-copy small {
    color:white
}

.product-site .nav-wrap {
    gap:20px
}

.product-site .primary-nav {
    gap:17px
}

.product-site .primary-nav a {
    font-size:.8rem
}

.product-site .form-field :is(input,select) {
    min-height:48px
}

@media(max-width:1100px) {
    .lock-hero {
        gap:30px
    }

    .lock-editorial-grid {
        gap:40px
    }

    .product-site .brand-copy small {
        display:none
    }

    .product-site .primary-nav {
        gap:10px
    }

}

@media(max-width:900px) {
    .lock-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .lock-access-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .lock-hero {
        grid-template-columns:1fr 1fr
    }

    .lock-hero-product {
        min-height:380px;
        padding:20px
    }

    .lock-hero-product img {
        width:260px;
        height:260px
    }

    .lock-detail {
        gap:30px
    }

    .lock-detail-photo {
        min-height:380px
    }

    .product-site .menu-toggle {
        display:flex
    }

    .product-site .primary-nav {
        display:none
    }

    .product-site .primary-nav.is-open {
        display:flex;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        padding:20px;
        background:white;
        box-shadow:0 8px 18px #0002;
        max-height:75vh;
        overflow-y:auto
    }

}

@media(max-width:600px) {
    .lock-section {
        padding-block:48px
    }

    .lock-heading {
        margin-bottom:30px
    }

    .lock-hero {
        grid-template-columns:1fr;
        gap:25px;
        padding-top:26px;
        padding-bottom:30px
    }

    .lock-hero-copy {
        display:contents
    }

    .lock-hero-copy>.lock-kicker {
        grid-row:1;
        margin:0;
        font-size:.65rem
    }

    .lock-hero-copy>h1 {
        grid-row:2;
        font-size:2.65rem
    }

    .lock-hero-product {
        grid-row:3;
        min-height:0;
        padding:18px
    }

    .lock-hero-product img {
        width:190px;
        height:190px
    }

    .lock-hero-label {
        display:none
    }

    .lock-hero-copy>p:not(.lock-kicker) {
        margin:0;
        font-size:1rem
    }

    .lock-hero-copy .lock-actions {
        margin:0
    }

    .lock-hero-caption strong {
        font-size:1.3rem
    }

    .lock-service-strip {
        flex-direction:column;
        gap:8px
    }

    .lock-section-top,.lock-help {
        flex-direction:column;
        align-items:flex-start
    }

    .lock-help {
        padding:24px;
        margin-top:40px
    }

    .lock-grid,.lock-editorial-grid,.lock-detail,.lock-detail-sections,.lock-finder,.lock-integration {
        grid-template-columns:1fr
    }

    .lock-photo img {
        width:240px;
        height:240px
    }

    .lock-section-top {
        gap:14px
    }

    .lock-filters {
        gap:8px
    }

    .lock-filters a {
        padding:9px 12px;
        font-size:.8rem
    }

    .lock-access-grid {
        grid-template-columns:repeat(2,1fr);
        gap:28px
    }

    .lock-pin-demo {
        padding:24px
    }

    .lock-workflow {
        grid-template-columns:1fr 1fr;
        gap:12px
    }

    .lock-detail {
        padding-top:16px;
        gap:30px
    }

    .lock-detail-photo {
        min-height:280px;
        padding:15px
    }

    .lock-detail-photo img {
        width:260px;
        height:260px
    }

    .lock-detail h1 {
        font-size:3rem
    }

    .lock-detail-sections {
        gap:45px
    }

    .lock-schedule {
        padding:28px
    }

    .lock-comparison {
        display:none
    }

    .lock-mobile-comparison {
        display:grid;
        gap:25px;
        margin-top:30px
    }

    .lock-mobile-comparison article {
        border:1px solid var(--lock-line);
        padding:24px;
        border-radius:4px
    }

    .lock-mobile-comparison img {
        margin-bottom:20px;
        object-fit:contain
    }

    .lock-mobile-comparison h3 a {
        min-height:44px;
        display:inline-flex;
        align-items:center
    }

    .lock-mobile-comparison dl {
        display:grid;
        grid-template-columns:1fr 1fr;
        font-size:.82rem;
        gap:0 12px
    }

    .lock-mobile-comparison dt,.lock-mobile-comparison dd {
        border-bottom:1px solid var(--lock-line);
        padding:10px 0;
        margin:0;
        overflow-wrap:anywhere
    }

    .lock-mobile-comparison dt {
        font-weight:600
    }

    .lock-panel {
        padding:24px
    }

    .product-site .brand-copy small {
        display:block
    }

    .product-site .contact-layout {
        grid-template-columns:1fr
    }

}

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

    .lock-photo img {
        transition:none
    }

}

/* The original Onyx image embeds unverified voice-assistant/weatherproof claims.
Mask only the surrounding promotional artwork, preserving the device photo. */
img[src*="myrent-smart-lock-connection-app-phone-unlock-waterproof"] {
    clip-path:polygon(39% 5%,61% 5%,61% 47%,91% 47%,91% 68%,61% 68%,61% 94%,39% 94%)
}

.lock-spaced {
    margin-top:45px
}

@media(max-width:900px) {
    .product-site .menu-toggle {
        display:block;
        flex-shrink:0
    }

    .product-site .menu-toggle>span:not(.sr-only) {
        width:24px
    }

    .product-site .brand .brand-copy {
        display:flex
    }

    .product-site .brand-copy small {
        white-space:normal
    }

}

/* Homepage teaser navigation only; preserve the existing five-card layout. */
.home-model-teasers .home-model-photo{display:block}
.home-model-teasers h3 a{color:inherit;text-decoration:none}
.home-model-teasers h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.home-model-teasers .home-model-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font-size:.85rem;font-weight:750;color:#087443;text-decoration:none}
.home-model-teasers .home-model-link:hover{text-decoration:underline;text-underline-offset:4px}
.home-models-action{text-align:center;margin-top:32px;padding-bottom:8px}
.home-models-action .home-models-button{max-width:100%;min-height:44px;background:#fff;border:1px solid #183c30;color:#183c30;white-space:normal;line-height:1.5;text-align:center}
.home-models-action .home-models-button:hover{background:#edf4ef;color:#102d23}
.home-model-teasers a:focus-visible,.home-models-action a:focus-visible{outline:3px solid #087443;outline-offset:4px}
.home-model-teasers .home-model-photo img{object-fit:contain;background:#fff;}