/* packs.css — the starting-package configurator (js/packs.js).
 *
 * WHY THIS FILE IS A COPY AND NOT A MOVE
 * --------------------------------------
 * These rules also live in ohs.css, where the Alarm.com door still reads them. Cutting them out
 * of a 2,000-line stylesheet that a live, working page depends on, to save a duplicate, is the
 * kind of clever that costs an evening. The First Alert door loads this file instead, and
 * ohs.css is left exactly as it is.
 *
 * The cost is real: a change to how the configurator LOOKS has to be made in both places. A
 * change to how it WORKS is in js/packs.js, which both doors share, and is made once. When the
 * two doors next need the same visual change, that is the moment to delete these rules from
 * ohs.css and have both pages load this file.
 *
 * The accent is a variable rather than a colour, so each door's configurator wears its own:
 *   --pk-accent   the platform colour       --pk-dark  its hover
 *   --pk-tint     its pale wash
 * Set on the body below. Do not hard-code a platform colour in here.
 */
:root{ --pk-accent:#F25E0F; --pk-dark:#C94A0B; --pk-tint:#FFF3ED }
body.fa{ --pk-accent:#D2232A; --pk-dark:#A81B21; --pk-tint:#FBEDEE }

/* Two properties the extracted rules reference that live in ohs.css, which the First Alert door
   does not load. Copied at their ohs.css values so the component renders identically behind either
   door rather than falling back to an unset colour, which paints as nothing.
   (--wash is also from ohs.css but every use of it already carries an inline fallback, so it is
   left alone rather than pinned to a value ohs.css does not actually define.) */
:root{ --gold:#C9A227; --green:#2F8F5B }

/* The CTA packs.js writes carries .btn-adc, which is an ohs.css class. The First Alert door does
   not load ohs.css, so the button would render unstyled. Same button, this door's colour. */
body.fa .btn-adc{background:var(--pk-accent);color:#fff;border:0}
body.fa .btn-adc:hover,body.fa .btn-adc:focus-visible{background:var(--pk-dark);color:#fff}

.pk-other{border-left-style:dashed}
.pm-acts{display:block;margin-top:10px}
.pm-acts .btn{font-size:.9rem;padding:9px 14px}
.pm-all{background:none;border:0;padding:0;margin-left:4px;color:var(--pk-accent);font:600 .88rem 'Barlow',system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.packs{margin:26px 0 0}
/* h2 is the section heading (it was an h3 here and an h2 on the other door); h3 stays in the
   selector because nothing else should change size. */
.packs h3,.packs>.wrap>h2{font-family:'Archivo',sans-serif;font-size:1.5rem;margin:0 0 6px}
.packs-sub{margin:0 0 18px;color:var(--muted);font-size:.94rem;line-height:1.6;max-width:74ch}
.packs-sub b{color:var(--ink)}
.packs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
.pack{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:18px}
.pack-best{border-color:var(--pk-accent);box-shadow:0 8px 26px rgba(242,94,15,.14)}
.pack-tag{display:inline-block;background:var(--pk-accent);color:#fff;font:700 .68rem/1 'Archivo',sans-serif;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:5px;margin-bottom:8px;align-self:flex-start}
.pack h4{font-family:'Archivo',sans-serif;font-size:1.14rem;margin:0 0 4px}
.pack-for{margin:0 0 12px;color:var(--muted);font-size:.9rem;line-height:1.45}
.pack-list{margin:0;padding:0;list-style:none;font-size:.9rem}
.pack-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:4px 10px;
  padding:7px 0;border-top:1px solid var(--line);line-height:1.4;min-width:0}
.pack-list li:first-child{border-top:0}
.pk-name{min-width:0}
.pack-list li i{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:1px}
.pack-list li.off{opacity:.45}
.pack-list li.off .pk-line{font-style:italic}
.pk-qty{display:inline-flex;align-items:center;gap:2px}
.pk-b{width:26px;height:26px;flex:none;border:1px solid var(--line);background:#fff;border-radius:6px;
  font:700 1rem/1 'Barlow',sans-serif;color:var(--pk-accent);cursor:pointer;padding:0}
.pk-b:hover:not([disabled]){border-color:var(--pk-accent);background:#fff6f0}
.pk-b[disabled]{opacity:.32;cursor:default}
.pk-n{min-width:16px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.9rem}
.pk-line{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--muted);white-space:nowrap}
.pack-note{margin:12px 0 0;padding:10px 12px;background:var(--paper);border-radius:8px;
  font-size:.83rem;line-height:1.5;color:var(--ink-soft)}
.pack-note b{color:var(--ink)}
.pack-foot{margin-top:auto;padding-top:12px}
.pack-price{padding-top:10px;border-top:1px solid var(--line)}
.pack-price b{font-family:'IBM Plex Mono',monospace;font-size:1.5rem;font-weight:600;display:block;line-height:1.1}
.pack-price span{display:block;font-size:.8rem;color:var(--muted)}
.pack-mo{margin:9px 0 13px;font-size:.82rem;color:var(--muted);line-height:1.45}
.pack-mo b{font-family:'IBM Plex Mono',monospace;font-size:1.05rem;color:var(--ink);margin-right:5px}
.pack .btn{white-space:normal;text-align:center;display:block}
.packs-fine{margin:12px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}
@media (max-width:820px){
  .packs-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .pack-list li{grid-template-columns:auto 1fr;gap:3px 8px}
  .pk-line{grid-column:2;text-align:left}
}
.pm-split{display:flex;align-items:baseline;gap:10px;font-size:.82rem;line-height:1.5}
.pm-split span{color:var(--muted)}
.pm-split b{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.86rem;color:var(--ink-soft);white-space:nowrap}
.pm-tot{margin-top:3px;padding-top:5px;border-top:1px solid var(--line)}
.pm-tot span{color:var(--ink)}
.pm-tot b{color:var(--ink)}
.pm-first{margin-top:7px}
.pm-first b{font-family:'IBM Plex Mono',monospace;font-size:1.25rem;color:var(--ink);line-height:1.1}
.pm-first span{display:block;font-size:.79rem;color:var(--muted);line-height:1.45;margin-top:1px}
.pk-one{display:inline-block;width:56px;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-size:.9rem;color:var(--muted)}
.pk-i{margin-left:8px;padding:1px 8px;border:1px solid var(--line);border-radius:999px;background:none;
  font:600 .72rem/1.6 'Barlow',sans-serif;color:var(--pk-accent);cursor:pointer;vertical-align:1px;white-space:nowrap}
.pk-i:hover{border-color:var(--pk-accent);background:var(--pk-tint)}
.pk-modal{position:fixed;inset:0;z-index:70;background:rgba(14,27,36,.55);display:flex;align-items:center;
  justify-content:center;padding:18px}
.pk-modal[hidden]{display:none}
.pk-box{position:relative;background:#fff;border-radius:14px;max-width:460px;width:100%;padding:26px 24px 22px;
  box-shadow:0 20px 60px rgba(14,27,36,.3)}
.pk-box h4{margin:0 0 6px;font-size:1.15rem}
.pk-box .pk-price{margin:0 0 12px;font-weight:700;color:var(--pk-accent)}
.pk-box .pk-note{margin:0 0 14px;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.pk-box .pk-fine{margin:0;font-size:.8rem;color:var(--muted)}
.pk-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:1.6rem;line-height:1;
  color:var(--muted);cursor:pointer}
.pk-x:hover{color:var(--ink)}
.pk-add{margin:14px 0 0;border:1px dashed var(--line);border-radius:10px;background:var(--wash,#f7f9fb)}
.pk-add>summary{cursor:pointer;padding:11px 14px;list-style:none;font-size:.93rem}
.pk-add>summary::-webkit-details-marker{display:none}
.pk-add>summary::after{content:'+';float:right;color:var(--pk-accent);font-weight:700}
.pk-add[open]>summary::after{content:'–'}
.pk-add>summary b{color:var(--pk-accent)}
.pk-add>summary span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.pk-ag{padding:0 12px 10px}
.pk-ag h5{margin:10px 0 6px;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pk-agn{margin:0 0 8px;font-size:.84rem;line-height:1.45;color:var(--ink-soft,#33454F)}
.pk-adds{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 5px;padding:6px 8px 6px 10px;
  border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;
  font:500 .88rem/1.35 'Barlow',sans-serif;color:var(--ink)}
.pk-adds .pk-an{flex:1;min-width:0}
.pk-adds b{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--muted);white-space:nowrap}
.pk-adds:hover{border-color:var(--pk-accent)}
.pk-i-add{margin-left:0}
.pk-addb{border:1px solid var(--pk-accent);border-radius:999px;background:var(--pk-accent);color:#fff;cursor:pointer;
  padding:4px 12px;font:700 .78rem/1.5 'Barlow',sans-serif;white-space:nowrap}
.pk-addb:hover{filter:brightness(1.06)}
.pk-img{display:block;width:100%;max-height:220px;object-fit:contain;margin:0 0 14px;
  background:var(--wash,#f7f9fb);border-radius:10px;padding:10px}
.pk-img[hidden]{display:none}
@media (max-width:520px){
  .pk-adds{flex-wrap:wrap;row-gap:6px}
  .pk-adds .pk-an{flex:1 0 100%}
  .pk-adds b{flex:1}
}
.pack-list li.pk-new{animation:pkNew 900ms ease-out}
.pk-after{margin:8px 0 0;font-size:.78rem;color:var(--muted);text-align:center}
.packs-plan{margin:0 0 12px;padding:9px 14px;border-left:3px solid var(--pk-accent);background:var(--pk-tint);
  border-radius:0 8px 8px 0;font-size:.92rem}
.packs-reset{border:0;background:none;padding:0;font:600 .92rem/1.4 'Barlow',sans-serif;color:var(--pk-accent);
  cursor:pointer;text-decoration:underline}
.packs-seg{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.packs-seg .pks-q{font-weight:700;font-size:.92rem;margin-right:4px}
.pkseg{border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;
  padding:7px 16px;font:600 .9rem/1.4 'Barlow',sans-serif;color:var(--ink-soft)}
.pkseg:hover{border-color:var(--pk-accent);color:var(--pk-accent)}
.pkseg.on{background:var(--pk-accent);border-color:var(--pk-accent);color:#fff}
.packs-biz{margin:0 0 16px;padding:14px 16px;border:1px solid var(--pk-accent);border-radius:12px;
  background:var(--pk-tint)}
.packs-biz[hidden]{display:none}
.packs-biz h4{margin:0 0 4px;font-size:1rem}
.packs-biz .pb-sub{margin:0 0 10px;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.pb-row{display:flex;align-items:center;gap:9px;margin:0 0 6px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;cursor:pointer;font-size:.9rem}
.pb-row:hover{border-color:var(--pk-accent)}
.pb-row input{width:17px;height:17px;accent-color:var(--pk-accent);flex:none}
.pb-row .pb-n{flex:1;min-width:0;font-weight:600}
.pb-row .pb-p{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--pk-accent);white-space:nowrap}
@media (max-width:520px){
  .pb-row{flex-wrap:wrap;row-gap:6px}
  .pb-row .pb-n{flex:1 0 70%}
}
.pack{position:relative;overflow:hidden}
.pack>*{position:relative;z-index:1}
.pack::after{content:'';position:absolute;right:6px;top:8px;width:140px;height:140px;z-index:0;
  background-repeat:no-repeat;background-size:contain;background-position:right top;opacity:.13;pointer-events:none}
.pack[data-pack="life"]{background:linear-gradient(170deg,#FFF3E9 0%,#FFF9F5 45%,#fff 100%);border-color:#F6C6A3}
.pack[data-pack="life"]::after{background-image:url(../images/card-life.webp);
  width:170px;height:190px;right:0;top:0;opacity:.42;background-size:cover;background-position:center bottom;
  border-radius:0 12px 0 0;
  -webkit-mask-image:linear-gradient(200deg,#000 8%,rgba(0,0,0,.4) 50%,transparent 80%);
  mask-image:linear-gradient(200deg,#000 8%,rgba(0,0,0,.4) 50%,transparent 80%)}
.pack[data-pack="doorbell"]::after,.pack[data-pack="camera"]::after{
  width:186px;height:150px;right:0;top:0;opacity:.42;background-size:cover;background-position:center top;
  border-radius:0 12px 0 0;
  -webkit-mask-image:linear-gradient(205deg,#000 10%,rgba(0,0,0,.4) 52%,transparent 82%);
  mask-image:linear-gradient(205deg,#000 10%,rgba(0,0,0,.4) 52%,transparent 82%)}
.pack[data-pack="doorbell"]::after{background-image:url(../images/card-door.webp)}
.pack[data-pack="camera"]::after{background-image:url(../images/card-outside.webp)}
@media (max-width:520px){
  .pack[data-pack="doorbell"]::after,.pack[data-pack="camera"]::after{width:150px;height:120px;opacity:.45}
}
.pack[data-pack="life"] .pack-note{background:#FFF1E4;border-left:3px solid var(--pk-accent)}
@media (max-width:520px){
  .pack::after{width:104px;height:104px;opacity:.09}
}
.packs-top{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:center;margin:0 0 6px}
.packs-panel{margin:0;text-align:center}
.packs-panel img{width:100%;max-width:190px;height:auto;display:block;margin:0 auto;
  background:#F2F6F9;border:1px solid var(--line);border-radius:12px;padding:8px}
.packs-panel figcaption{margin-top:4px;font-size:.8rem;color:var(--muted);line-height:1.45}
@media (max-width:900px){
  .packs-top{grid-template-columns:1fr;gap:10px}
  .packs-panel{display:flex;align-items:center;gap:12px;text-align:left;
    border:1px solid var(--line);border-radius:10px;padding:8px 12px}
  .packs-panel img{width:74px;margin:0;flex:none;padding:5px}
  .packs-panel figcaption{margin:0}
}
.pack{--tier:#7C8E9B;border-color:#D7DFE5}
.pack::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--tier);z-index:2}
.pack[data-pack="basics"]{--tier:#7C8E9B;border-color:#CFD9E0}
.pack[data-pack="doorbell"]{--tier:var(--pk-accent);border-color:#F6C6A3}
.pack[data-pack="camera"]{--tier:var(--gold);border-color:#E7D89B}
.pack[data-pack="life"]{--tier:#C9372B;border-color:#F0BAB3}
.pack-best{border-color:#F6C6A3;box-shadow:0 8px 26px rgba(242,94,15,.14)}
.pack-tag{background:var(--tier)}
.pack[data-pack="camera"] .pack-tag{color:#2E2408}

/* The tier stripe and chip are keyed to data-pack, and the four rules above name the Alarm.com
   door's packages. Without these the First Alert cards all fall through to the default slate and
   the set stops reading as a ladder. */
.pack[data-pack="fa-basics"]{--tier:#7C8E9B;border-color:#CFD9E0}
.pack[data-pack="fa-doors"]{--tier:var(--pk-accent);border-color:#F0B9BC}
.pack[data-pack="fa-life"]{--tier:#C9372B;border-color:#F0BAB3}
/* The upgrade card is not a bigger version of the other four -- it is a different question.
   A colour from outside the warm ladder says so before the words do. */
.pack[data-pack="fa-upgrade"]{--tier:#2F6F8F;border-color:#BBD3E0}
.pack-best{border-color:#F0B9BC;box-shadow:0 8px 26px rgba(210,35,42,.14)}

/* ---- the quote modal the configurator sends through (js/quote.js), same copy-not-move as above ---- */
.qmodal{position:fixed;inset:0;background:rgba(14,27,36,.6);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;z-index:200;overflow:auto}
.qmodal[hidden]{display:none}
.qbox{background:#fff;border-radius:var(--radius);max-width:620px;width:100%;padding:26px 26px 22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);margin:auto}
.qclose{position:absolute;right:14px;top:10px;background:none;border:0;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}
.qclose:hover{color:var(--ink)}
.qbox h3{font-size:1.4rem;margin-bottom:4px}
.qsub{color:var(--muted);font-size:.95rem;margin:0 0 16px;max-width:52ch}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qbuild{background:var(--pk-tint);border-radius:var(--radius-sm);padding:10px 14px;font-size:.88rem;margin-bottom:14px}
.qbuild b{display:block;font-family:'Archivo',sans-serif;font-size:.9rem;margin-bottom:2px}
.qbuild span{color:var(--ink-soft);white-space:pre-line}
.qmsg{margin:12px 0 0;padding:11px 14px;border-radius:var(--radius-sm);font-weight:600;font-size:.95rem}
.qmsg.ok{background:#EAF6EE;color:var(--green)}
.qmsg.err{background:#FDECEC;color:var(--red)}
@media (max-width:620px){
  .qrow{grid-template-columns:1fr}
  .qbox{padding:22px 18px 18px}
}
.qquebec{background:#FDECEC;color:var(--red);border-radius:var(--radius-sm);padding:9px 12px;font-size:.88rem;font-weight:600;margin:-4px 0 12px}
.att{margin:4px 0 14px}
.att-drop{position:relative;display:flex;gap:12px;align-items:flex-start;border:2px dashed #C9D3D9;border-radius:var(--radius-sm);padding:14px 16px;background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s;font-weight:400}
.att-drop:hover,.att.over .att-drop{border-color:var(--pk-accent);background:var(--pk-tint)}
.att-drop:focus-within{outline:2px solid var(--pk-accent);outline-offset:2px}
.att-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0}
.att-ico{font-size:1.5rem;line-height:1}
.att-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.att-txt b{font-family:'Archivo',sans-serif;color:var(--ink)}
.att-txt b+small{color:var(--muted);font-weight:500;margin-left:4px}
.att-txt{display:block}
.att-hint,.att-lim{display:block;color:var(--muted);font-size:.85rem;line-height:1.4;margin-top:3px}
.att-lim{font-size:.78rem}
.att-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.att-list li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:.88rem}
.att-th{width:44px;height:44px;flex:0 0 44px;border-radius:6px;object-fit:cover;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}
.att-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.att-x{border:0;background:none;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:6px}
.att-x:hover{background:var(--pk-tint);color:var(--pk-accent)}
.att-msg{margin:8px 0 0;font-size:.86rem;color:#B3261E;background:#FDF1F1;border-left:3px solid #B3261E;padding:8px 10px;border-radius:4px}
.att-msg[hidden]{display:none}
#qform .att .att-drop,.att .att-drop{display:flex;font-weight:400}
#qform .att .att-hint,#qform .att .att-lim,.att .att-hint,.att .att-lim{font-weight:400}
#qform .att .att-txt b{font-weight:700}

/* --- the upgrade card ------------------------------------------------------
   The only card whose honest answer is a phone call. The caution sits ABOVE the
   item list, not under the price, because somebody who reads the total first has
   already formed an expectation the site visit then has to take away. */
.pack-upgrade{border-top-color:var(--pk-accent)}
.pack-note{background:var(--pk-tint);border-left:4px solid var(--pk-accent);
  border-radius:0 8px 8px 0;padding:12px 14px;margin:0 0 14px;
  font-size:.88rem;line-height:1.55;color:var(--ink)}
.pack-note b{font-weight:700}
.pack-note a{color:var(--pk-accent);font-weight:700}

/* the section's own wrapper on the First Alert door */
.packs .wrap{max-width:var(--wrap,1160px)}
.packs-fine{margin:18px 0 0;font-size:.85rem;color:var(--muted);line-height:1.6;max-width:80ch}
.packs-fine b{color:var(--ink)}

/* Three links in a row on the H3 chooser card, so they need air and a divider between them
   rather than running into one another as one long arrow-ended sentence. */
.fa-go a{white-space:nowrap}
.fa-go{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}

/* Same two rules for the First Alert door, which does not load ohs.css. They will not fire there
   today — that line has no per-camera video tier — but the component is shared, so it is styled
   in both places rather than left to break the first time it is. */
.pm-note{margin:10px 0 0;font-size:.8rem;line-height:1.5;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:8px}
.pk-vid{margin:10px 0 0;font-size:.85rem;line-height:1.55;color:var(--ink-soft);
  background:var(--pk-tint);border-left:3px solid var(--pk-accent);border-radius:0 6px 6px 0;padding:9px 11px}
.pk-vid[hidden]{display:none}
.pk-b[disabled],.pk-addb[disabled]{opacity:.38;cursor:not-allowed}

/* A group inside the drawer that folds. Only one does — the parts we supply but do not fit. It
   reads as a row in the list rather than as a second drawer: same padding, no box of its own. */
.pk-ag-fold{padding:0 12px 10px}
.pk-ag-fold>summary{cursor:pointer;list-style:none;position:relative;padding:9px 20px 8px 0;
  border-top:1px solid var(--line);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pk-ag-fold>summary::-webkit-details-marker{display:none}
/* Positioned, not floated. A float here escapes the summary the moment the group opens and lands
   in the middle of the first paragraph — which is exactly what it did. */
.pk-ag-fold>summary::after{content:'+';position:absolute;right:2px;top:8px;
  font-weight:700;letter-spacing:0;line-height:1}
.pk-ag-fold[open]>summary::after{content:'\2013'}
.pk-ag-fold>summary b{font-weight:700}
.pk-ag-fold>summary span{display:block;margin-top:3px;font-size:.78rem;letter-spacing:0;
  text-transform:none;color:var(--muted)}
.pk-ag-fold>summary:hover,.pk-ag-fold>summary:focus-visible{color:var(--ink,#0E1B24)}

/* display:flex on .pk-adds and display:block on a group both beat the hidden attribute, which is
   the same trap the Details image fell into. Said once, for both. */
.pk-adds[hidden],.pk-ag[hidden],.pk-ag-fold[hidden],.pk-add[hidden]{display:none}

/* The wired / wireless switch. It sits inside the drawer rather than above it, because it sorts
   the drawer and nothing else on the card. */
.pk-wire{padding:10px 12px 2px}
.pk-wire-b{display:flex;gap:6px;flex-wrap:wrap}
.pk-wire-b button{flex:0 0 auto;cursor:pointer;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:5px 14px;font:600 .82rem/1.4 'Barlow',sans-serif;color:var(--muted)}
.pk-wire-b button:hover{border-color:var(--pk-accent);color:var(--ink,#0E1B24)}
.pk-wire-b button.on{background:var(--pk-accent);border-color:var(--pk-accent);color:#fff}
.pk-wire-n{margin:9px 0 2px;font-size:.84rem;line-height:1.5;color:var(--ink-soft,#33454F)}

/* Wired and wireless, shaded. Two quiet washes and a left edge — this is a list somebody scans for
   a price, not a chart, so the tints stay well under the text they sit behind. Both are light
   enough that the row's own ink keeps well past 7:1 on them.

   Colour is never the only signal: every one of these items carries the word in its NAME, which is
   what travels into the kit list, the quote and the email. The shade is for the eye skimming the
   column; the word is for everything else. */
.pk-adds.w-wireless{background:#F4F8FB;border-left:3px solid #8FA9B8}
.pk-adds.w-wired{background:#FAF6F1;border-left:3px solid #C0A179}
.pk-adds.w-wireless:hover,.pk-adds.w-wired:hover{border-color:var(--pk-accent)}
.pk-adds.w-wireless:hover{border-left-color:#8FA9B8}
.pk-adds.w-wired:hover{border-left-color:#C0A179}

/* An accessory offered against the kit row it belongs to. It is an <li> in the same list, so it
   sits hard under its parent and moves with it, but it carries no count and no price of its own —
   it is a question, and the answer becomes an ordinary row. */
/* Specificity matters here and it bit once: `.pack-list li` is a three-column GRID with a top
   border, at 0,1,1 — a bare `.pk-acc` at 0,1,0 loses to it, and the prompt came out as a narrow
   column with the buttons crushed beside it. Scoped to `.pack-list li.pk-acc` it wins, and the
   border-top is cleared so no rule is drawn between a parent and its own question. */
.pack-list li.pk-acc{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  border-top:0;margin:-2px 0 8px;padding:7px 10px 8px 34px;border-left:2px solid var(--line)}
.pk-acc-l{flex:1 0 100%;font-size:.8rem;color:var(--muted);line-height:1.4}
.pk-acc-b{cursor:pointer;border:1px solid var(--pk-accent);background:#fff;color:var(--pk-accent);
  border-radius:999px;padding:5px 13px;font:600 .82rem/1.3 'Barlow',sans-serif}
.pk-acc-b b{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.8rem}
.pk-acc-b:hover{background:var(--pk-accent);color:#fff}
@media (max-width:520px){ .pack-list li.pk-acc{padding-left:14px} .pk-acc-b{flex:1 0 100%} }

/* The retention choice, under the recording line it changes. Small, because it is a refinement of a
   number already on the screen rather than a new decision — but live, and with both prices on it,
   because the point is that the cheaper one was never being offered. */
.pm-keep{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 8px;padding-left:2px}
.pm-keep>span{flex:1 0 100%;font-size:.78rem;color:var(--muted)}
.pm-keep button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:4px 11px;font:600 .78rem/1.3 'Barlow',sans-serif;color:var(--muted)}
.pm-keep button b{font-family:'IBM Plex Mono',monospace;font-weight:600}
.pm-keep button:hover{border-color:var(--pk-accent);color:var(--ink,#0E1B24)}
.pm-keep button.on{background:var(--pk-accent);border-color:var(--pk-accent);color:#fff}
.pm-keep button i{font-style:normal;font-weight:500;opacity:.85}

/* The kit has outgrown its plan. Said on the card above the total, because it changes the total. */
.pm-up{margin:4px 0 10px;padding:10px 12px;border-left:3px solid var(--pk-accent);
  background:var(--pk-tint,#FBEEEF);border-radius:0 8px 8px 0}
.pm-up p{margin:0 0 8px;font-size:.86rem;line-height:1.5;color:var(--ink,#0E1B24)}
.pm-upb{cursor:pointer;border:0;border-radius:999px;background:var(--pk-accent);color:#fff;
  padding:7px 15px;font:700 .83rem/1.3 'Barlow',sans-serif}
.pm-upb:hover{filter:brightness(1.06)}

/* ---------- the three AlarmNet packages, on the First Alert door ----------
   `.plans` and `.plan` live in ohs.css, which this page does not load — it takes site.css and
   packs.css. Rather than drag that block across with its orange accent and four-column assumptions,
   this is a trimmed three-card version in the door's own red. */
.fa-plans-fold{margin:22px 0 0;border:1px solid var(--line);border-radius:12px;background:#fff}
.fa-plans-fold>summary{cursor:pointer;list-style:none;padding:14px 18px;font-size:1rem}
.fa-plans-fold>summary::-webkit-details-marker{display:none}
.fa-plans-fold>summary::after{content:'\25BE';float:right;color:var(--pk-accent)}
.fa-plans-fold[open]>summary::after{content:'\25B4'}
.fa-plans-fold>summary span{display:block;margin-top:3px;font-size:.84rem;color:var(--muted)}
.fa-plans-sub,.fa-plans-fine{margin:0 18px 14px;font-size:.92rem;line-height:1.55;color:var(--ink-soft,#33454F)}
.fa-plans-fine{margin-top:-4px;font-size:.86rem;color:var(--muted)}
/* The flag on the Smart Home card hangs 11px ABOVE its card (top:-11px, absolute), and this
   grid had no top margin — so it sat on top of the paragraph above and cut a line of it in
   half. It was always true and nobody could see it while the fold was closed by default;
   opening the fold is what put it on screen. Clearance for the flag, not a change to it. */
.fa-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 18px 16px}
@media (max-width:900px){ .fa-plans{grid-template-columns:1fr} }
.fa-plan{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;
  border:1px solid var(--line);border-top:5px solid #5C6E78;border-radius:12px;padding:20px 18px}
.fa-plan.best{border-top-color:var(--pk-accent)}
.fa-plan-flag{display:none;position:absolute;top:-11px;left:16px;background:var(--pk-accent);color:#fff;
  border-radius:999px;padding:3px 11px;font:700 .68rem/1.5 'Barlow',sans-serif;letter-spacing:.04em;
  text-transform:uppercase}
.fa-plan h3{font-size:1.25rem;margin:0}
.fa-plan .tag{color:var(--muted);font-size:.9rem;margin:4px 0 12px;min-height:2.6em}
.fa-plan .price{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);
  padding-bottom:12px;margin-bottom:12px}
.fa-plan .amt{font-family:'IBM Plex Mono',monospace;font-size:2rem;font-weight:600;line-height:1}
.fa-plan .amt sup{font-size:.95rem;font-weight:500;vertical-align:top;top:.35em;position:relative}
.fa-plan .per{color:var(--muted);font-size:.84rem;line-height:1.2;white-space:nowrap}
.fa-plan .promo{margin-left:auto;text-align:right;color:var(--pk-accent);font-weight:700;
  font-size:.84rem;line-height:1.2}
.fa-plan .promo b{font-family:'IBM Plex Mono',monospace}
.fa-plan .adds{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pk-accent);margin-bottom:6px}
.fa-plan ul{margin:0 0 10px;padding-left:18px;font-size:.93rem;line-height:1.45}
.fa-plan li{margin:5px 0}
/* What it does NOT do, which on the two lower packages is the fact that decides it. A list of
   features alone hides exactly the thing somebody needs to know. */
.fa-plan-no{margin:0 0 12px;padding:9px 11px;border-left:3px solid var(--pk-accent);
  background:var(--pk-tint,#FBEEEF);border-radius:0 7px 7px 0;font-size:.85rem;line-height:1.45;
  color:var(--ink,#0E1B24)}
.fa-plan .fa-choose{margin-top:auto;width:100%;font-size:.93rem;padding:11px 14px;text-align:center}
.fa-plan.on{box-shadow:0 0 0 3px var(--pk-accent)}
.fa-plan.on .fa-plan-flag{display:block}

/* The cameras, gathered, with the recording question under them. One plan covers all of them at
   once, so the question belongs to the group — which means the group has to be visible. */
.pack-list li.pk-cams{list-style:none;display:block;border-top:0;margin:4px 0 8px;padding:0;
  border:1px solid var(--line);border-radius:10px;background:var(--wash,#f7f9fb);overflow:hidden}
.pk-cams-l{padding:2px 10px}
.pk-cams-l li{border-top:1px solid var(--line)}
.pk-cams-l li:first-child{border-top:0}
.pk-cams-q{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:9px 11px 11px;border-top:1px solid var(--line);background:#fff}
.pk-cams-ask{flex:1 0 100%;font-size:.8rem;line-height:1.45;color:var(--ink-soft,#33454F)}
.pm-keep-b{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:4px 11px;font:600 .78rem/1.3 'Barlow',sans-serif;color:var(--muted)}
.pm-keep-b b{font-family:'IBM Plex Mono',monospace;font-weight:600}
.pm-keep-b i{font-style:normal;font-weight:500;opacity:.85}
.pm-keep-b:hover{border-color:var(--pk-accent);color:var(--ink,#0E1B24)}
.pm-keep-b.on{background:var(--pk-accent);border-color:var(--pk-accent);color:#fff}
@media (max-width:520px){ .pm-keep-b{flex:1 0 100%;text-align:center} }

/* `.pack-list li i { display:block }` puts a kit row's sub-label on its own line, which is right
   for a kit row and wrong for the pill buttons that now live inside one — it forced "included" onto
   a second line, which nowrap cannot prevent because a block is not an inline box, and collapsed
   every one of these buttons to the width of its longest word at every viewport. (0,1,2) beat
   `.pm-keep-b i` at (0,1,1); this is (0,2,2) and wins, which is the same scoping fix `.pk-acc`
   needed against the same ancestor. */
.pack-list li.pk-cams .pm-keep-b i{display:inline;font-size:inherit;color:inherit;margin-top:0}

/* The accessory prompt's options, now rows rather than pills so they can carry a Details button —
   the one place on the builder that used to ask for money without a way to find out what for. */
.pk-acc .pk-adds{margin:6px 0 0;background:#fff}
.pk-acc-pic{flex:0 0 auto;width:34px;height:34px;object-fit:contain;border-radius:6px;
  background:var(--paper,#F6F8F9);padding:2px}
@media (max-width:520px){ .pk-acc-pic{width:28px;height:28px} }

/* Where to get the free app. It sits with the recording buttons because that is the moment somebody
   picks "free" and needs to know the thing they just chose actually exists. */
.pk-cams-app{flex:0 0 auto;align-self:center;margin-left:2px;font:600 .78rem/1.3 'Barlow',sans-serif;
  color:var(--pk-accent);text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){ .pk-cams-app{flex:1 0 100%;text-align:center;margin-top:2px} }

/* ONE PACKAGE AT A TIME, with the catalogue beside the kit instead of under it.
   The drawer was built to open inside a card, and a card is half the grid — so forty rows of
   catalogue landed in a half-width column with the kit they belong to scrolled off the top. Picking
   one package gives it the whole width and puts the list in a second column, sticky, so you can see
   what you are building while you build it. */
.pk-pick{display:block;width:100%;margin:12px 0 0;cursor:pointer;
  border:1.5px solid var(--pk-accent);border-radius:999px;background:var(--pk-accent);color:#fff;
  padding:10px 16px;font:700 .92rem/1.3 'Barlow',sans-serif}
.pk-pick:hover{filter:brightness(1.06)}
.pk-pick.is-change{background:#fff;color:var(--pk-accent)}

.packs-grid.has-pick{grid-template-columns:minmax(0,1fr)}
.packs-grid.has-pick > .pack:not(.picked){display:none}

@media (min-width:1000px){
  .pack.picked{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    column-gap:26px;align-items:start}
  .pack.picked > *{grid-column:1;min-width:0}
  /* span 99 rather than 1/-1: the rows here are implicit, and an implicit grid has no -1 to reach. */
  .pack.picked > .pk-add{grid-column:2;grid-row:1 / span 99;margin:0;align-self:start;
    position:sticky;top:88px;max-height:calc(100vh - 110px);overflow-y:auto}
}

/* Every catalogue group folds, shut, with its count. A heading and a number is two seconds of
   reading; the whole catalogue is forty rows nobody asked for yet. */
.pk-ag{margin:0 0 6px;border:1px solid var(--line);border-radius:9px;background:#fff}
.pk-ag[hidden]{display:none}
.pk-ag>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:9px 12px;font-size:.84rem}
.pk-ag>summary::-webkit-details-marker{display:none}
.pk-ag>summary>b{font:800 .74rem/1.3 'Barlow',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pk-accent)}
.pk-ag>summary>span{flex:1 0 100%;order:3;font-size:.78rem;color:var(--muted);line-height:1.45}
.pk-ag>summary::after{content:'\25BE';margin-left:auto;color:var(--pk-accent);font-size:.8rem}
.pk-ag[open]>summary::after{content:'\25B4'}
.pk-agc{font-style:normal;font-size:.72rem;font-weight:700;color:var(--muted);
  background:var(--paper,#F6F8F9);border:1px solid var(--line);border-radius:999px;padding:0 7px}
.pk-agc:empty{display:none}
.pk-ag>.pk-adds,.pk-ag>.pk-agn{margin-left:10px;margin-right:10px}
.pk-ag>.pk-adds:last-child{margin-bottom:9px}

/* The pick button now sits under the heading, so it needs air under it rather than over it. */
.pk-pick{margin:10px 0 14px}