/* ===== Theme tokens (match marketing site) ===== */
:root{
    --navy:#0A2A5A;
    --teal:#20C6B7;
    --orange:#FF7A21;
    --ink:#0f172a;
    --text:#0b1220;
    --muted:#6b7280;
    --bg:#ffffff;
    --bg-alt:#f8fafc;
    --radius:16px;
    --shadow:0 10px 25px rgba(2,10,36,.06);
    --maxw:1140px;
    --pad:clamp(14px,3vw,24px);
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    margin:0; color:var(--text); background:var(--bg); line-height:1.5;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--navy); text-decoration:none }
img{ max-width:100%; height:auto; display:block }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.grid{ display:grid; gap:clamp(14px,2.8vw,28px) }

/* Sticky footer skeleton */
body{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column }
main{ flex:1 0 auto }
.rb-footer{ margin-top:auto }

/* ===== Checkout layout ===== */
.checkout-wrap{ padding:clamp(24px,4vw,40px) 0 }
.checkout-grid{
    display:grid; gap:clamp(16px,2.5vw,28px);
    grid-template-columns:1fr; align-items:start;
}
@media (min-width:1024px){
    .checkout-grid{ grid-template-columns:minmax(0,1fr) 380px }
}

/* ===== Breadcrumb progress ===== */
.rb-breadcrumb ol{
    display:flex; flex-wrap:wrap; gap:.4rem;
    padding:0; margin:0 0 1rem 0; list-style:none;
    font-size:clamp(.95rem,2vw,1.05rem);
}
.rb-breadcrumb li{ margin:0 }
.rb-breadcrumb .sep{ color:var(--muted) }
.rb-breadcrumb .is-done{ color:var(--ink); font-weight:500 }
.rb-breadcrumb .is-active{ color:var(--navy); font-weight:700 }
.rb-breadcrumb .is-next{ color:var(--muted); font-weight:400 }

/* ===== Cards ===== */
.panel{ background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); box-shadow:var(--shadow) }
.panel.pad{ padding:clamp(16px,2.4vw,22px) }

/* ===== Forms ===== */
.form-grid{ display:grid; gap:clamp(12px,2vw,18px) }
.form-row{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:720px){ .form-row.two{ grid-template-columns:1fr 1fr } }
/* 3-up row for City / State / ZIP on wide screens */
.form-row.three{ grid-template-columns:1fr }
@media (min-width:900px){ .form-row.three{ grid-template-columns:2fr 1fr 1fr } }

label{ font-weight:600; color:var(--navy) }
.help{ color:var(--muted); font-size:.95rem }

.input,.select,.textarea{
    width:100%; border:1px solid #e5e7eb; border-radius:12px;
    padding:.8rem .9rem; font:inherit; color:var(--ink); background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{
    outline:none; border-color:#94e1dc; box-shadow:0 0 0 3px rgba(32,198,183,.2)
}
.invalid{ border-color:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.18) }
.error{
    color:#b45309; background:#fff7ed; border:1px solid #fed7aa;
    padding:.6rem .8rem; border-radius:12px;
}

/* Option cards / radios */
.radio-group{ display:grid; gap:10px }
.radio-card{
    display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem;
    border:1px solid #e5e7eb; border-radius:12px; cursor:pointer; background:#fff;
}
.radio-card input{ accent-color:var(--teal) }

/* Summary panel */
.summary-title{ font-weight:800; color:var(--navy); margin:0 0 .25rem 0 }
.summary-line{ display:flex; justify-content:space-between; gap:8px; padding:.4rem 0 }
.summary-total{ font-weight:800; color:var(--navy); font-size:1.15rem }
.divider{ height:1px; background:#eef2f7; margin:.6rem 0 }

/* Buttons area */
.actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem }

/* ===== Header (scoped) ===== */
.rb-header{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(180%) blur(8px);
    background:rgba(255,255,255,.92);
    border-bottom:1px solid #eef2f7; /* subtle bottom rule */
}
.rb-nav{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 0 }
.rb-header .logo img{ height:42px; width:auto; display:block }
.rb-header .links{ display:flex; align-items:center; gap:1rem }
.rb-header .assist-link{ white-space:nowrap; font-weight:600; color:var(--navy); padding:.5rem .25rem }

/* responsive helpers */
.hide-mobile{ display:initial }
.show-mobile{ display:none }
@media (max-width:980px){
    .hide-mobile{ display:none }
    .show-mobile{ display:inline-flex }
}

/* ===== Footer (scoped) ===== */
.rb-footer{
    background:var(--bg-alt);
    border-top:1px solid #eef2f7;
}
.rb-footer .foot{ display:grid; grid-template-columns:1fr; gap:1rem; padding:1.4rem 0 }
@media (min-width:900px){
    .rb-footer .foot{ grid-template-columns:1.2fr .8fr; align-items:center }
    .rb-footer .tagline{ justify-self:end; text-align:right }
}
.rb-footer .logo img{ height:28px; width:auto; display:block }
.rb-footer .copyright{ margin-top:.35rem; color:var(--muted) }
.rb-footer .tagline{ color:var(--muted); font-size:.95rem }

/* Sidebar-aware grid modifiers */
@media (min-width:1024px){
    .checkout-grid--single{ grid-template-columns:1fr !important }
}

/* Buttons row */
.actions{
    display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem;
    justify-content:flex-end; align-items:center;
}
.actions--split{ justify-content:space-between }
@media (max-width:600px){
    .actions, .actions--split{
        flex-direction:column-reverse; align-items:stretch;
    }
    .actions .btn{ width:100% }
}

/* Button styles */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    padding:.85rem 1.1rem; border-radius:12px; font-weight:700; border:2px solid transparent;
    min-height:46px; box-shadow:var(--shadow);
    transition:transform .06s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;
}
.btn-primary{ background:var(--teal); color:#00242A }
.btn-primary:hover{ filter:brightness(.98) }
.btn-primary:active{ transform:translateY(1px); box-shadow:none }
.btn-ghost{ background:transparent; color:var(--navy); border-color:rgba(10,42,90,.18) }
.btn-ghost:hover{ background:rgba(10,42,90,.04) }
.btn-ghost:active{ transform:translateY(1px); box-shadow:none }
.btn[disabled], .btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none }

/* Password helpers */
.pw-field{ position:relative }
.password-row{ align-items:end }
.help--ghost{ visibility:hidden; height:1.25em; margin-bottom:.25rem }
.pw-toggle{
    position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
    background:transparent; border:0; cursor:pointer; color:var(--muted); line-height:0;
}
.pw-toggle:hover{ color:var(--navy) }
.pw-toggle:focus{ outline:none }
.pw-toggle .eye-off{ display:none }
.pw-toggle[aria-pressed="true"] .eye{ display:none }
.pw-toggle[aria-pressed="true"] .eye-off{ display:block }

/* Replace the 2-up with an autofill grid (number selection) */
.number-grid{
    display:grid; gap:10px;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.selected-box{
    margin-top:12px; width:50%; margin-left:auto; margin-right:auto; text-align:center;
    background:#effbfa; border-left:4px solid var(--teal); border-right:4px solid var(--teal);
}
.selected-num{ display:block; font-size:20px; font-weight:800; color:var(--navy) }
@media (max-width:720px){ .selected-box{ width:100% } }

/* ========================================================================== */
/* === Hardware cards (final, deduped) ====================================== */
/* ========================================================================== */

.hw-grid{
    display:grid; gap:clamp(14px,2vw,18px);
    grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:980px){ .hw-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .hw-grid{ grid-template-columns:1fr } }

.prod-card{
    /* local var so footer can extend to the edges regardless of clamp() */
    --card-pad: clamp(12px, 2vw, 16px);

    position:relative;
    display:flex; flex-direction:column; cursor:pointer;
    border:1px solid #e5e7eb; border-radius:var(--radius); background:#fff;
    padding:var(--card-pad);
    padding-bottom:calc(var(--card-pad) + 56px);     /* reserve space for footer */
    min-height:460px;
    box-shadow:var(--shadow);
    transition:border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    overflow:hidden;                                   /* keep footer corners clipped */
}
.prod-card:hover{ transform:translateY(-1px) }
.prod-card input{ position:absolute; opacity:0; pointer-events:none }

.prod-img{ max-height:140px; margin:0 auto .6rem auto; display:block }
.prod-title{ font-weight:800; color:var(--navy); margin-bottom:.4rem }

.prod-feats{ list-style:none; padding:0; margin:0 0 .6rem 0; display:grid; gap:.35rem }
.prod-feats li{ display:flex; align-items:center; gap:.5rem; color:var(--ink) }
.prod-feats li i{
    flex:0 0 20px; height:20px; display:grid; place-items:center; border-radius:999px;
    font-weight:900; color:#0b3d38; background:rgba(32,198,183,.20); border:1px solid rgba(32,198,183,.35);
}

.price-pill{
    display:inline-block; font-weight:800; padding:.2rem .6rem; border-radius:999px;
    border:2px solid var(--orange); background:#fff; color:var(--ink); max-width:fit-content;
    margin-top:auto;
}

/* Selected border highlight (progressive enhancement) */
@supports (selector(:has(*))) {
    .prod-card:has(input:checked){
        border-color:var(--teal);
        box-shadow:0 8px 22px rgba(2,10,36,.10);
    }
}

/* --- Footer bar: visible on ALL cards (optical centering) ----------------- */
.select-footer{
    position:absolute;
    left:0;
    right:0;
    bottom:16px;               /* lift the bar so label centers in the visible area */
    height:30px;               /* slimmer bar for the lifted position */

    /* extend to card edges, ignoring padding; bottom bleed remains clipped */
    margin:0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    border-radius:0 0 var(--radius) var(--radius);
    border-top:1px solid #e5e7eb;
    box-shadow:0 4px 10px rgba(2,10,36,.06);

    /* centered label */
    display:flex; align-items:center; justify-content:center;
    line-height:1; padding:0;

    /* unselected look + text */
    background:#eef2f7; color:#4b5563;
    font-weight:800;

    /* hide any literal text from markup to avoid double text */
    font-size:0;
}
.select-footer::after{
    content:"Click / Tap to Select";
    font-size:.95rem; font-weight:800; color:inherit;
}

/* Selected footer (works with and without :has()) */
@supports (selector(:has(*))) {
    .prod-card:has(input:checked) .select-footer{
        background:var(--teal); color:#00242A; border-top-color:var(--teal);
    }
    .prod-card:has(input:checked) .select-footer::after{ content:"Selected" }
}
@supports not (selector(:has(*))) {
    .prod-card input[type="radio"]:checked ~ .select-footer{
        background:var(--teal); color:#00242A; border-top-color:var(--teal);
    }
    .prod-card input[type="radio"]:checked ~ .select-footer::after{ content:"Selected" }
}

/* Optional hover/focus ring */
.prod-card:focus-within{
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(32,198,183,.16), 0 10px 25px rgba(2,10,36,.06);
}

/* ========================================================================== */
/* Wi-Fi segmented toggle and password eye (unchanged)                        */
/* ========================================================================== */
.seg-toggle{
    display:inline-grid; grid-auto-flow:column; gap:6px;
    background:var(--bg-alt);
    border:1px solid #e5e7eb; border-radius:999px; padding:4px;
}
.seg-opt{ position:relative }
.seg-opt input{ position:absolute; inset:0; opacity:0 }
.seg-opt span{
    display:inline-block; padding:.45rem .9rem; border-radius:999px;
    font-weight:600; color:var(--navy)
}
.seg-opt input:checked + span{ background:var(--teal); color:#00242A }

.pw-eye{
    position:absolute; right:.5rem; top:2.25rem;
    border:0; background:#eef5f6; border-radius:999px;
    width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
}
.pw-eye[aria-pressed="true"]{ background:#dff5f2 }

/* === Normalize <button> vs <a> so sizes match, and bolden Continue === */

/* Make anchors and native buttons share the exact same text metrics */
a.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
    font: inherit;        /* family, size, weight from parent */
    font-size: 1rem;      /* explicit base so both match */
    line-height: 1;       /* kill UA line-height differences */
}

/* Neutralize UA padding/appearance that can make <button> look larger */
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
    -webkit-appearance: none;
    appearance: none;
    padding: .85rem 1.1rem;  /* mirror your .btn padding */
    border-width: 2px;       /* mirror your .btn border */
}

/* Base weight already bold across both buttons */
.btn { font-weight: 700; }

/* Make Continue (primary) visibly bolder */
.btn-primary { font-weight: 800; }

/* Restore Wi-Fi password show/hide button */
.wifi-setup .pw-wrap{ position: relative; }   /* anchor for absolute positioning */

.wifi-setup .pw-toggle{
    position: absolute;
    right: 10px;
    inset-block: 0;             /* top:0; bottom:0; */
    margin-block: auto;         /* vertical center */
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    z-index: 1;                 /* ensure it sits above the input */
}
.wifi-setup .pw-toggle:hover{ color: var(--navy); }
.wifi-setup .pw-toggle:focus{ outline: 2px solid #cfe9e6; outline-offset: 2px; border-radius: 8px; }

/* swap icons when pressed */
.wifi-setup .pw-toggle .eye-off{ display: none; }
.wifi-setup .pw-toggle[aria-pressed="true"] .eye{ display: none; }
.wifi-setup .pw-toggle[aria-pressed="true"] .eye-off{ display: inline; }




/* === Wi-Fi password eye: perfect vertical centering === */
.wifi-setup{
    --pw-eye-size: 34px;      /* button box size */
    --pw-eye-right: 10px;     /* distance from right edge */
    --pw-eye-nudge: 6px;      /* move DOWN by N px to fix optical centering */
}

.wifi-setup .pw-wrap{ position: relative; }

.wifi-setup .pw-toggle{
    position: absolute;
    right: var(--pw-eye-right);
    top: calc(50% + var(--pw-eye-nudge));   /* <- tweak this value if needed */
    transform: translateY(-50%);            /* true vertical center */
    width: var(--pw-eye-size);
    height: var(--pw-eye-size);
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    line-height: 0;
    color: var(--muted);
    cursor: pointer;
    z-index: 1;
}
.wifi-setup .pw-toggle:hover{ color: var(--navy); }
.wifi-setup .pw-toggle:focus{ outline: 2px solid #cfe9e6; outline-offset: 2px; border-radius: 8px; }

/* icon sizing */
.wifi-setup .pw-toggle svg{ width: 18px; height: 18px; }

/* swap icons when pressed */
.wifi-setup .pw-toggle .eye-off{ display: none; }
.wifi-setup .pw-toggle[aria-pressed="true"] .eye{ display: none; }
.wifi-setup .pw-toggle[aria-pressed="true"] .eye-off{ display: inline; }

/* Footer horizontal padding + safe-area support */
.rb-footer .foot {
    padding-inline: clamp(16px, 4vw, 40px);
    padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right));
}

/* Optional: give the whole footer some vertical breathing room */
.rb-footer {
    padding-block: 16px;
}