/* Money overview — editorial household finance landing page */
.money-overview{
  width:min(100%,1760px);
  margin:0 auto;
  padding:14px 22px 48px;
  color:#45483a;
  box-sizing:border-box;
  font-family:Inter,"Source Sans 3",system-ui,sans-serif;
}
.money-overview *{box-sizing:border-box}
.money-overview a{color:inherit}
.money-overview-kicker{
  margin:0 0 5px;
  color:#7c7654;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.money-overview-hero{
  display:grid;
  grid-template-columns:minmax(520px,.95fr) minmax(420px,.85fr);
  gap:20px;
  align-items:stretch;
  margin-bottom:24px;
}
.money-overview-title-card,
.money-overview-principle,
.money-overview-ribbon-card,
.money-overview-card{
  border:1px solid rgba(99,101,72,.16);
  box-shadow:0 12px 32px rgba(53,54,39,.08),0 2px 8px rgba(53,54,39,.035),inset 0 1px rgba(255,255,255,.82);
}
.money-overview-title-card{
  min-height:142px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 118px;
  gap:18px;
  align-items:center;
  padding:17px 22px 15px;
  border-radius:20px;
  background:linear-gradient(135deg,#f7f3e7 0%,#ece8d8 58%,#e1dfc8 100%);
}
.money-overview-title-card h1{
  margin:0;
  color:#3f4538;
  font:500 clamp(2.65rem,4vw,4.2rem)/.93 "Cormorant Garamond",Georgia,serif;
  letter-spacing:-.025em;
}
.money-overview-script{
  margin:6px 0 0;
  color:#6c735f;
  font:600 1.22rem/1.15 Caveat,"Segoe Script",cursive;
}
.money-overview-ledger-art{
  position:relative;
  min-height:104px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(127,113,66,.16);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.54),rgba(201,201,166,.32));
}
.money-overview-ledger-art>span{
  position:relative;
  z-index:3;
  color:#8c8358;
  font:500 3.15rem Georgia,serif;
  transform:rotate(45deg);
}
.money-overview-ledger-art>i{
  position:absolute;
  left:17px;
  right:17px;
  height:1px;
  background:rgba(117,113,78,.22);
}
.money-overview-ledger-art>i:nth-of-type(1){top:30px}
.money-overview-ledger-art>i:nth-of-type(2){top:51px}
.money-overview-ledger-art>i:nth-of-type(3){top:72px}
.money-overview-principle{
  position:relative;
  min-height:142px;
  padding:27px 27px 19px;
  overflow:hidden;
  border-radius:20px;
  background:linear-gradient(135deg,#e9eadc 0%,#dfe2cf 60%,#d4d8bd 100%);
}
.money-overview-principle::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-68px;
  bottom:-100px;
  border:1px solid rgba(108,112,78,.15);
  border-radius:50%;
  box-shadow:0 0 0 14px rgba(255,255,255,.11),0 0 0 30px rgba(108,112,78,.045);
}
.money-overview-principle p{
  position:relative;
  z-index:2;
  margin:11px 0 8px;
  max-width:640px;
  color:#525846;
  font:600 1.08rem/1.45 Caveat,"Segoe Script",cursive;
}
.money-overview-principle small{
  position:relative;
  z-index:2;
  color:#7a7556;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.money-overview-quote{
  position:absolute;
  left:16px;
  top:4px;
  color:rgba(166,148,90,.45);
  font:700 3.8rem/1 Georgia,serif;
}
.money-overview-return{display:grid;gap:12px;margin-bottom:22px}
.money-overview-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.money-overview-section-heading h2{
  margin:0;
  color:#41483a;
  font:500 clamp(2rem,2.6vw,3rem)/1 "Cormorant Garamond",Georgia,serif;
}
.money-overview-section-heading>a{
  color:#786a42;
  text-decoration:none;
  font-size:.8rem;
  font-weight:800;
}
.money-overview-ribbon{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.money-overview-ribbon-card{
  min-height:100px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 13px;
  align-content:center;
  padding:15px 16px;
  border-radius:18px;
  text-decoration:none;
}
.money-overview-ribbon-card>span{
  grid-row:1/3;
  min-width:70px;
  align-self:center;
  color:#8d7444;
  font:500 1.75rem/1 "Cormorant Garamond",Georgia,serif;
}
.money-overview-ribbon-card strong{
  align-self:end;
  color:#444b3d;
  font:600 1rem/1.15 "Cormorant Garamond",Georgia,serif;
}
.money-overview-ribbon-card small{
  color:#747461;
  font-size:.71rem;
  line-height:1.35;
}
.money-overview-ribbon-card--sage{background:linear-gradient(145deg,#f5f4e9,#e7ead8)}
.money-overview-ribbon-card--olive{background:linear-gradient(145deg,#eeefdf,#dce1c8)}
.money-overview-ribbon-card--linen{background:linear-gradient(145deg,#f7f2e7,#ebe2cf)}
.money-overview-ribbon-card--brass{background:linear-gradient(145deg,#f0ead8,#e4d4af)}
.money-overview-collage{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:17px;
}
.money-overview-card{
  position:relative;
  min-width:0;
  padding:22px;
  overflow:hidden;
  border-radius:21px;
}
.money-overview-card h2{
  margin:0 0 12px;
  color:#41473a;
  font:500 1.7rem/1.05 "Cormorant Garamond",Georgia,serif;
}
.money-overview-card--picture{grid-column:span 8}
.money-overview-card--upcoming{grid-column:span 4}
.money-overview-card--flow{grid-column:span 5}
.money-overview-card--plan{grid-column:span 3}
.money-overview-card--composition{grid-column:span 4}
.money-overview-card--protect{grid-column:span 5}
.money-overview-card--archive{grid-column:span 7}
.money-overview-card--wide{grid-column:span 7}
.money-overview-card--sagewash{background:linear-gradient(145deg,#f7f6ec,#e9ebdc)}
.money-overview-card--parchment{background:linear-gradient(145deg,#f7f3e8,#eee4cf)}
.money-overview-card--linen{background:linear-gradient(145deg,#fbf8ef,#efe9db)}
.money-overview-card--olivewash{background:linear-gradient(145deg,#edefe1,#dde2ca)}
.money-overview-card--cream{background:linear-gradient(145deg,#faf7ee,#eee7d6)}
.money-overview-card--mist{background:linear-gradient(145deg,#f1f2e8,#e2e5d5)}
.money-overview-card--brasswash{background:linear-gradient(145deg,#f4efe1,#e7ddc0)}
.money-overview-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.money-overview-card-heading>span{
  padding:6px 10px;
  border:1px solid rgba(104,105,75,.15);
  border-radius:999px;
  background:rgba(255,255,255,.44);
  color:#73755f;
  font-size:.68rem;
  white-space:nowrap;
}
.money-overview-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.money-overview-metrics>div{
  padding:13px 14px;
  border:1px solid rgba(103,105,76,.12);
  border-radius:14px;
  background:rgba(255,255,255,.43);
}
.money-overview-metrics span{
  display:block;
  margin-bottom:4px;
  color:#747661;
  font-size:.69rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.money-overview-metrics strong{
  color:#46503f;
  font:600 1.4rem/1 "Cormorant Garamond",Georgia,serif;
}
.money-overview-completion{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  margin-top:14px;
  color:#6f725d;
  font-size:.72rem;
}
.money-overview-completion>div{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(104,106,77,.16);
}
.money-overview-completion i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#778063,#a68b4e);
}
.money-overview-link-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}
.money-overview-link-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(104,105,75,.15);
  border-radius:10px;
  background:rgba(255,255,255,.42);
  color:#686445;
  text-decoration:none;
  font-size:.72rem;
  font-weight:800;
  box-shadow:0 4px 12px rgba(55,56,40,.035);
}
.money-overview-text-link{
  display:inline-block;
  margin-top:11px;
  color:#756a48;
  text-decoration:none;
  font-size:.76rem;
  font-weight:800;
}
.money-overview-upcoming{display:grid;gap:0}
.money-overview-upcoming>div:not(.money-empty){
  display:grid;
  grid-template-columns:92px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(104,105,75,.12);
}
.money-overview-upcoming>div:not(.money-empty) span{color:#8a7954;font-size:.69rem}
.money-overview-upcoming>div:not(.money-empty) strong{color:#4a4f42;font:600 .86rem "Cormorant Garamond",Georgia,serif}
.money-overview-upcoming>div:not(.money-empty) b{color:#4d5845;font:600 .88rem "Cormorant Garamond",Georgia,serif}
.money-overview-upcoming .money-empty,
.money-overview-composition .money-empty,
.money-overview-empty{
  display:grid;
  gap:4px;
  place-items:start;
  padding:15px;
  border:1px dashed rgba(105,107,77,.19);
  border-radius:14px;
  background:rgba(255,255,255,.28);
  text-align:left;
  color:#6f7160;
}
.money-overview-upcoming .money-empty>span,
.money-overview-composition .money-empty>span{display:none}
.money-overview-upcoming .money-empty strong,
.money-overview-composition .money-empty strong,
.money-overview-empty strong{color:#4b5043;font:600 1rem "Cormorant Garamond",Georgia,serif}
.money-overview-upcoming .money-empty small,
.money-overview-composition .money-empty small,
.money-overview-empty span{color:#777866;font-size:.73rem;line-height:1.45}
.money-overview-feature-list{display:grid;gap:9px}
.money-overview-feature-list>div{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:10px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid rgba(104,105,75,.11);
}
.money-overview-feature-list>div:last-child{border-bottom:0}
.money-overview-feature-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(126,128,87,.09);
  color:#8a7445;
  font:600 1rem Georgia,serif;
}
.money-overview-feature-list strong{display:block;color:#4a5042;font:600 .95rem "Cormorant Garamond",Georgia,serif}
.money-overview-feature-list small{display:block;margin-top:2px;color:#747662;font-size:.72rem;line-height:1.4}
.money-overview-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.money-overview-list li{display:grid;gap:3px;padding:9px 0;border-bottom:1px solid rgba(104,105,75,.12)}
.money-overview-list li:last-child{border-bottom:0}
.money-overview-list strong{color:#4a5042;font:600 .91rem "Cormorant Garamond",Georgia,serif}
.money-overview-list span{color:#747662;font-size:.71rem;line-height:1.4}
.money-overview-composition{display:grid;gap:8px}
.money-overview-composition>div:not(.money-empty){
  display:grid;
  grid-template-columns:118px minmax(0,1fr) 24px;
  gap:8px;
  align-items:center;
  color:#656954;
  font-size:.69rem;
}
.money-overview-composition i{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(104,106,77,.14);
}
.money-overview-composition b{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#798166,#a78a4c);
}
.money-overview-protection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.money-overview-protection-grid a{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 8px;
  padding:12px;
  border:1px solid rgba(104,105,75,.12);
  border-radius:14px;
  background:rgba(255,255,255,.34);
  text-decoration:none;
}
.money-overview-protection-grid a>span{grid-row:1/3;color:#8a7447;font-size:1.1rem}
.money-overview-protection-grid strong{color:#495042;font:600 .88rem "Cormorant Garamond",Georgia,serif}
.money-overview-protection-grid small{color:#737560;font-size:.68rem;line-height:1.38}
.money-overview-card--archive{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:20px;
  align-items:center;
}
.money-overview-card--archive p:not(.money-overview-kicker){margin:0;color:#6f705f;font-size:.8rem;line-height:1.55}
.money-overview-archive-art{
  position:relative;
  min-height:140px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(137,116,65,.16);
  border-radius:17px;
  background:linear-gradient(145deg,#e5d9b9,#cfc397);
}
.money-overview-archive-art>span{position:relative;z-index:3;color:#72663e;font:500 3.3rem/1 Georgia,serif}
.money-overview-archive-art>i{position:absolute;border:1px solid rgba(255,252,236,.46);transform:rotate(-4deg)}
.money-overview-archive-art>i:first-of-type{inset:16px}
.money-overview-archive-art>i:last-of-type{inset:26px;transform:rotate(3deg)}

@media(max-width:1250px){
  .money-overview-hero{grid-template-columns:1fr 1fr}
  .money-overview-ribbon{grid-template-columns:1fr 1fr}
  .money-overview-card--picture,.money-overview-card--upcoming,.money-overview-card--flow,.money-overview-card--plan,.money-overview-card--composition,.money-overview-card--protect,.money-overview-card--archive{grid-column:span 6}
}
@media(max-width:850px){
  .money-overview{padding:10px 14px 36px}
  .money-overview-hero,.money-overview-ribbon{grid-template-columns:1fr}
  .money-overview-card--picture,.money-overview-card--upcoming,.money-overview-card--flow,.money-overview-card--plan,.money-overview-card--composition,.money-overview-card--protect,.money-overview-card--archive{grid-column:1/-1}
  .money-overview-metrics,.money-overview-protection-grid{grid-template-columns:1fr 1fr}
  .money-overview-card--archive{grid-template-columns:1fr}
}
@media(max-width:560px){
  .money-overview-title-card{grid-template-columns:1fr}
  .money-overview-section-heading{align-items:flex-start;flex-direction:column}
  .money-overview-metrics,.money-overview-protection-grid{grid-template-columns:1fr}
  .money-overview-completion{grid-template-columns:1fr auto}
  .money-overview-completion>div{grid-column:1/-1;grid-row:2}
  .money-overview-upcoming>div:not(.money-empty){grid-template-columns:1fr auto}
  .money-overview-upcoming>div:not(.money-empty) span{grid-column:1/-1}
}
