/* 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;--door-accent:#F25E0F;--door-tint:#FFF3ED }body.fa{ --pk-accent:#D2232A;--door-accent:#D2232A;--door-tint:#FBEDEE; --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)}.pack-list li.off{opacity:.45}.pack-list li.off .pk-line{font-style:italic}.pack .btn{white-space:normal;text-align:center;display:block}@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}}.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}@media (max-width:520px){
  .pk-adds{flex-wrap:wrap;row-gap:6px}}.packs-seg .pks-q{font-weight:700;font-size:.92rem;margin-right:4px}.pkseg.on{background:var(--pk-accent);border-color:var(--pk-accent);color:#fff}.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%}}@media (max-width:520px){
  .pack[data-pack="doorbell"]::after,.pack[data-pack="camera"]::after{width:150px;height:120px;opacity:.45}}@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}}/* 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}/* ---- the quote modal the configurator sends through (js/quote.js), same copy-not-move as above ---- */
.qmsg.ok{background:#EAF6EE;color:var(--green)}.qmsg.err{background:#FDECEC;color:var(--red)}.att-drop:hover,.att.over .att-drop{border-color:var(--pk-accent);background:var(--pk-tint)}/* the section's own wrapper on the First Alert door */
.packs .wrap{max-width:var(--wrap,1160px)}/* 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-wire-b button.on{background:var(--pk-accent);border-color:var(--pk-accent);color:#fff}/* 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}@media (max-width:520px){ .pack-list li.pk-acc{padding-left:14px}}/* 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}/* THE LADDER, IN THE ORDER EVERYBODY ALREADY READS. Geo, 4 Oct: "they need the proper border
   colors maybe gold platinum and bronze or something rather than 1 red and the others nothing".

   One variable per tile carries the metal, and everything inside the tile that was reaching for
   the house red now reaches for that instead \u2014 the rule across the top, the chip, the ADDS
   label and the bar on the "not on this package" note. The tile reads as one thing.

   The CTA stays red on all three. Three differently coloured buttons in a row is three different
   buttons, not a ladder.

   Silver, not platinum, for the plain reason that on a screen they are the same colour and these
   three have to be told apart at a glance. */
.tier{--tier:#5C6E78;--tier-tint:#F2F5F6}.tier-bronze{--tier:#9C5A24;--tier-tint:#F8EFE7}.tier-silver{--tier:#6F7C8A;--tier-tint:#F1F4F7}.tier-gold{--tier:#9A7513;--tier-tint:#FBF4DF}.fa-plan.tier{border-top-color:var(--tier)}/* THE RING MARKS THE ONE MOST PEOPLE PICK, not the top of the ladder. Those are different facts
   and for a while this rule had them confused: the ring was welded to gold, so moving the
   recommendation would have meant moving a colour. It follows `best` now \u2014 one word in the
   markup \u2014 and wears whichever metal that tile already has. */
.fa-plan.best.tier{box-shadow:0 0 0 3px var(--tier-tint)}.tier-pop{margin:0;color:var(--tier);
  border:1px solid var(--tier);border-radius:999px;padding:2px 9px;
  font:700 .64rem/1.6 'Barlow',sans-serif;letter-spacing:.07em;text-transform:uppercase}/* ONE ROW FOR THE CHIPS, AND IT IS THE SAME HEIGHT ON ALL THREE. As separate children of a
   column flexbox the second chip took a line of its own, which pushed Smart Security's name down
   and left the three headings out of line with each other \u2014 the exact misalignment this
   section had already been pulled up on once. */
.tier-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px;min-height:23px}.tier-chip{background:var(--tier-tint);color:var(--tier);
  border-radius:999px;padding:3px 10px;margin:0;
  font:800 .66rem/1.6 'Barlow',sans-serif;letter-spacing:.11em;text-transform:uppercase}.fa-plan.tier .adds{color:var(--tier)}.fa-plan.tier .fa-plan-no{border-left-color:var(--tier);background:var(--tier-tint)}/* Kept for the Alarm.com door, which still prices its cards on a chosen package. */
.fa-plan.best:not(.tier){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;
  white-space:normal;line-height:1.3}.fa-plan.on{box-shadow:0 0 0 3px var(--pk-accent)}.fa-plan.on .fa-plan-flag{display:block}.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}}` 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}@media (max-width:520px){ .pk-acc-pic{width:28px;height:28px}}@media (max-width:520px){ .pk-cams-app{flex:1 0 100%;text-align:center;margin-top:2px}}.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}}

/* 146 rules were removed from this file on 5 October: the .pack / .pk- /
   .packs-grid families for the two package configurators that came off the First
   Alert and Alarm.com doors, the .b-bar running total they filled, and an older
   .builder / .wizard widget that had been dead longer than either. Every one was
   checked against every HTML and PHP file in the tree first: none of the classes
   they named appears in any page. The monitoring heading block both doors now use
   — .packs-top, .packs-top-copy, .packs-panel, .packs-sub — is untouched. */