/* ============================================================================
   HOW TO USE HABITUALLY U  +  BUILD YOUR WIDGET WALL
   Live recreation of the two artwork panels that used to sit here as one
   313 KB JPEG. Colours sampled straight from that original.
   Prefix "hw-" — clear of the global -card / -tile / -tag / hero wildcards.
   Every accent is a variable in .hw-wrap, so the palette is a one-line change.
   ============================================================================ */
#page-home .hw-wrap{
  --hw-navy:#172238;
  --hw-ink:#2B3547;
  --hw-muted:#5A6374;
  --hw-line:#EDEAE4;
  --hw-rose:#C9506F;          /* panel 1 accent, as sampled from the artwork */
  --hw-rose-soft:#FBEDEF;
  --hw-rose-band:#FFF6F7;
  --hw-green:#4E7A50;         /* panel 2 accent */
  --hw-green-deep:#3F6440;
  --hw-green-band:#D1E4D0;
  --hw-green-soft:#EDF3EC;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
}
#page-home .hw-wrap *{ box-sizing:border-box; }
#page-home .hw-panel{
  background:#fff !important; border:1px solid var(--hw-line); border-radius:24px;
  padding:30px 28px 26px; position:relative; overflow:hidden;
  box-shadow:0 6px 26px rgba(23,34,56,.05);
}
#page-home .hw-top{ display:grid; grid-template-columns:1fr 214px; gap:20px; align-items:start; }
#page-home .hw-col{ min-width:0; }

/* ── headings ───────────────────────────────────────────────────────────── */
#page-home .hw-eyebrow{
  font-size:.74rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase; margin:0 0 14px;
}
#page-home .hw-journey .hw-eyebrow{ color:var(--hw-rose) !important; -webkit-text-fill-color:var(--hw-rose) !important; }
#page-home .hw-widgets .hw-eyebrow{ color:var(--hw-green-deep) !important; -webkit-text-fill-color:var(--hw-green-deep) !important; }
#page-home .hw-h{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; line-height:1.04; letter-spacing:-.015em;
  font-size:clamp(1.75rem,2.7vw,2.45rem); margin:0 0 13px;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-sub{ font-size:1rem; font-weight:800; margin:0 0 12px; line-height:1.35; }
#page-home .hw-journey .hw-sub{ color:var(--hw-rose) !important; -webkit-text-fill-color:var(--hw-rose) !important; }
#page-home .hw-widgets .hw-sub{ color:var(--hw-green) !important; -webkit-text-fill-color:var(--hw-green) !important; }
#page-home .hw-lede{
  font-size:.95rem; line-height:1.65; margin:0 0 4px; max-width:44ch;
  color:var(--hw-muted) !important; -webkit-text-fill-color:var(--hw-muted) !important;
}

/* ── numbered step list (panel 1) ───────────────────────────────────────── */
#page-home .hw-steps{ list-style:none; padding:0; margin:16px 0 0; position:relative;
  text-align:left; }
#page-home .hw-steps::before{
  content:''; position:absolute; left:14px; top:18px; bottom:18px; width:0;
  border-left:1.5px dashed rgba(201,80,111,.32);
}
#page-home .hw-step{ display:grid; grid-template-columns:30px 34px 1fr; gap:9px; align-items:start; margin-bottom:11px; }
#page-home .hw-num{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
  background:var(--hw-rose); color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-size:.86rem; font-weight:800;
}
#page-home .hw-sico{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--hw-rose-soft); color:var(--hw-rose);
}
#page-home .hw-sico svg{ width:19px; height:19px; }
#page-home .hw-st{
  display:block; font-size:.92rem; font-weight:800; margin:1px 0 3px; line-height:1.25;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-sd{
  display:block; font-size:.8rem; line-height:1.45; margin:0;
  color:var(--hw-muted) !important; -webkit-text-fill-color:var(--hw-muted) !important;
}

/* ── pink band (panel 1) ────────────────────────────────────────────────── */
#page-home .hw-band{ background:var(--hw-rose-band) !important; border-radius:16px; padding:15px 14px 13px; margin-top:18px; }
#page-home .hw-band-h{
  text-align:center; font-size:.9rem; font-weight:800; margin:0 0 13px;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-band-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
#page-home .hw-band-i{ text-align:center; }
#page-home .hw-band-i svg{ width:26px; height:26px; color:var(--hw-rose); margin-bottom:6px; }
#page-home .hw-band-i span{
  display:block; font-size:.7rem; font-weight:800; line-height:1.32;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-sign{
  display:flex; align-items:baseline; justify-content:center; gap:12px; flex-wrap:wrap; margin:18px 0 0;
}
#page-home .hw-script{
  font-family:'Caveat','Segoe Script',cursive; font-size:1.85rem; font-weight:700; line-height:1;
  color:var(--hw-rose) !important; -webkit-text-fill-color:var(--hw-rose) !important;
}
#page-home .hw-signoff{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.3rem;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-sign svg{ width:19px; height:19px; color:var(--hw-rose); align-self:center; }

/* ── widget pills (panel 2) ─────────────────────────────────────────────── */
#page-home .hw-sech{
  font-size:.94rem; font-weight:800; margin:16px 0 10px;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-widgs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#page-home .hw-widg{
  /* small white rounded-square cards rather than tinted pills */
  display:flex; align-items:center; gap:9px; background:#fff !important;
  border:1px solid #F0EAE0; border-radius:14px; padding:11px 12px;
  font-size:.78rem; font-weight:700; min-height:48px;
  box-shadow:0 1px 3px rgba(23,34,56,.05), 0 4px 12px rgba(23,34,56,.04);
  color:var(--hw-ink) !important; -webkit-text-fill-color:var(--hw-ink) !important;
}
#page-home .hw-widg svg{ width:19px; height:19px; flex:0 0 auto; color:var(--hw-navy); }
#page-home .hw-widg.is-rose svg{ color:var(--hw-rose); }

/* ── add-widget steps (panel 2) ─────────────────────────────────────────── */
#page-home .hw-add{ list-style:none; padding:0; margin:12px 0 0; border-top:1px solid var(--hw-line); }
#page-home .hw-arow{
  display:grid; grid-template-columns:24px 22px 1fr; gap:8px; align-items:center;
  padding:6px 2px; border-bottom:1px solid var(--hw-line);
}
#page-home .hw-anum{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--hw-green); color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-size:.74rem; font-weight:800;
}
#page-home .hw-arow > svg{ width:20px; height:20px; color:var(--hw-navy); }
#page-home .hw-arow p{
  margin:0; font-size:.74rem; line-height:1.35; font-weight:600;
  color:var(--hw-ink) !important; -webkit-text-fill-color:var(--hw-ink) !important;
}

/* ── green banner (panel 2) ─────────────────────────────────────────────── */
#page-home .hw-gband{
  background:var(--hw-green-band) !important; border-radius:15px; padding:15px 18px; margin-top:18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
#page-home .hw-gband > svg{ width:30px; height:30px; flex:0 0 auto; color:var(--hw-navy); }
#page-home .hw-gband p{
  flex:1; min-width:190px; margin:0; font-size:.88rem; line-height:1.55; font-weight:600;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-gscript{
  font-family:'Caveat','Segoe Script',cursive; font-size:1.5rem; font-weight:700; white-space:nowrap;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}

/* ── phone mockups ──────────────────────────────────────────────────────── */
#page-home .hw-phone{
  width:206px; border-radius:34px; background:#1B1B1F; padding:9px;
  box-shadow:0 18px 44px rgba(23,34,56,.22); position:relative; justify-self:end;
}
#page-home .hw-journey .hw-phone{ transform:rotate(2deg); margin-right:2px; }
#page-home .hw-widgets .hw-phone{ transform:rotate(-1.6deg); margin-right:2px; }
#page-home .hw-screen{ background:#fff; border-radius:26px; overflow:hidden; padding:8px 11px 10px; }
#page-home .hw-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:78px; height:19px; background:#1B1B1F; border-radius:11px; z-index:2;
}
#page-home .hw-statusbar{
  display:flex; justify-content:space-between; align-items:center; font-size:.56rem; font-weight:800;
  color:var(--hw-navy); padding:2px 4px 12px;
}
#page-home .hw-statusbar svg{ width:34px; height:9px; }
#page-home .hw-hi{ font-size:.66rem; color:var(--hw-muted); margin:0; line-height:1.3; }
#page-home .hw-name{
  font-family:'Playfair Display',Georgia,serif; font-size:1.02rem; font-weight:700; margin:1px 0 8px;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-name svg{ width:12px; height:12px; color:var(--hw-rose); vertical-align:-1px; }
#page-home .hw-ask{ font-size:.58rem; color:var(--hw-muted); margin:0 0 8px; }
#page-home .hw-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
#page-home .hw-t{
  border-radius:11px; padding:12px 6px 9px; text-align:center; min-height:60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
#page-home .hw-t svg{ width:17px; height:17px; color:var(--hw-navy); }
#page-home .hw-t span{ font-size:.55rem; font-weight:700; color:var(--hw-navy); line-height:1.2; }
#page-home .hw-t.is-dark{ background:#132038 !important; }
#page-home .hw-t.is-dark svg,#page-home .hw-t.is-dark span{ color:#fff; }
#page-home .hw-tabs{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 8px 3px; margin-top:9px; border-top:1px solid #F0EEE9;
}
#page-home .hw-tabs svg{ width:15px; height:15px; color:#B9BDC4; }
#page-home .hw-tabs svg:first-child{ color:var(--hw-navy); }
#page-home .hw-bar{ width:64px; height:3px; border-radius:2px; background:#D8DADE; margin:6px auto 0; }

/* widget-wall phone screen */
#page-home .hw-wgrid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
#page-home .hw-w{ border-radius:12px; padding:9px 10px; }
#page-home .hw-w-h{
  display:flex; align-items:center; gap:5px; font-size:.55rem; font-weight:800; margin-bottom:6px;
  color:var(--hw-navy) !important; -webkit-text-fill-color:var(--hw-navy) !important;
}
#page-home .hw-w-h svg{ width:11px; height:11px; }
#page-home .hw-w li,#page-home .hw-w p{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-size:.55rem; line-height:1.75; margin:0; color:var(--hw-ink);
}
#page-home .hw-w ul{ list-style:none; padding:0; margin:0; }
#page-home .hw-w li svg{ width:9px; height:9px; color:#4E7A50; flex:0 0 auto; }
#page-home .hw-w.is-wide{ grid-column:1/-1; }
#page-home .hw-w-b{ font-size:.55rem; color:var(--hw-muted); line-height:1.7; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  #page-home .hw-wrap{ grid-template-columns:1fr; }
  #page-home .hw-panel{ padding:32px 30px 30px; }
}
@media (max-width:720px){
  #page-home .hw-panel{ padding:26px 20px 24px; border-radius:20px; }
  #page-home .hw-top{ grid-template-columns:1fr; }
  #page-home .hw-phone{ justify-self:center; margin-top:20px; transform:none !important; }
  #page-home .hw-band-row{ grid-template-columns:repeat(2,1fr); gap:16px 8px; }
  #page-home .hw-widgs{ grid-template-columns:1fr; }
  #page-home .hw-sign{ gap:8px; }
  #page-home .hw-gband{ justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  #page-home .hw-phone{ transform:none !important; }
}