/* The non-Wi-Fi baby monitor pillar page (guide-nowifi): only its three drawings of the designs. The chart, the case
   cards, the fit picker and the number tiles are the shared ones in page-visuals.css, loaded before this file; the
   scene palette for the drawings is below. */

/* ---------- the three designs ---------- */
.designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 8px;
  --fg:#3B2A22;--card:#FFFDF9;--oat:#F3E7D7;--wrap:#E9D8C1;--latte:#EAD9C3;--honey:#F2CF8C;--caramel2:#8A5C30;--phone:#3B2A22;--screen:#2A1F19;--sage:#C9D2B7;--rose2:#B33A48}
.design{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 20px 44px -40px rgba(60,30,10,.5)}
.design svg{display:block;width:100%;height:auto;max-width:200px;margin:0 auto 4px;background:var(--card);border:1px solid #EEE3D4;border-radius:16px}
.design .ink{fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.design .f-card{fill:var(--card)}.design .f-oat{fill:var(--oat)}.design .f-wrap{fill:var(--wrap)}.design .f-latte{fill:var(--latte)}
.design .f-honey{fill:var(--honey)}.design .f-phone{fill:var(--phone)}.design .f-screen{fill:var(--screen)}.design .f-sage{fill:var(--sage)}
.design .sig{fill:none;stroke:var(--caramel2);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.5 6;animation:nw-flow 1s linear infinite}
.design .wall{fill:none;stroke:var(--caramel2);stroke-width:2;stroke-dasharray:4 5;opacity:.55}
.design .cut{fill:none;stroke:var(--rose2);stroke-width:2.4;stroke-linecap:round}
.design b{font:650 16px/1.3 var(--sans);color:var(--ink)}
.design p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.design small{font:500 12.5px/1.4 var(--sans);color:var(--caramel)}
@keyframes nw-flow{to{stroke-dashoffset:-6.5}}
@media (prefers-reduced-motion:reduce){.design .sig{animation:none}}
@media (max-width:760px){.designs{grid-template-columns:minmax(0,1fr)}
  .design{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start}
  .design svg{grid-row:1/span 4;max-width:104px;margin:0}}