/* The same editorial bento, now ordered from setup through monthly delivery. */
.features--journey .journey-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto;
  grid-template-areas:"setup import" "sales split" "sales share" "retry refund" "closing closing";
  gap:1px;
  background:var(--color-border);
  border-color:var(--color-border);
}
.features--journey .journey-card {
  display:flex;
  flex-direction:column;
  padding:50px;
  min-width:0;
  order:0;
}
.features--journey .journey-card--setup { grid-area:setup; }
.features--journey .journey-card--import { grid-area:import; }
.features--journey .journey-card--sales { grid-area:sales; justify-content:center; }
.features--journey .journey-card--split { grid-area:split; }
.features--journey .journey-card--share { grid-area:share; }
.features--journey .journey-card--retry { grid-area:retry; }
.features--journey .journey-card--refund { grid-area:refund; }
.features--journey .journey-card--closing { grid-area:closing; }
.features--journey .journey-card__heading { display:block; margin:0; }
.journey-card__toggle {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:20px;
  width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-align:left;
  appearance:none;
}
.journey-card__toggle:disabled { cursor:default; opacity:1; color:inherit; -webkit-text-fill-color:currentColor; }
.journey-card__meta { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.features--journey .journey-card__meta .feature-icon { width:36px; height:36px; margin:0; }
/* Keep the Phosphor outline and its silver gradient; remove the secondary fill. */
.features--journey .journey-icon--stroke {
  --icon-front:url(#notasy-icon-silver);
  --icon-back:none;
}
.journey-card__step { color:var(--color-caption); font:400 12px/1.5 var(--font-label); letter-spacing:1px; }
.journey-card__title { display:block; }
.journey-card__indicator { display:none; }
.features--journey .journey-card__panel > p { margin:12px 0 0; }
.journey-card__panel[hidden] { display:none !important; }
.journey-card--sales .journey-visual { margin-top:26px; }
.features--journey .journey-card--closing {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:60px;
}
.journey-card--closing .journey-card__heading { grid-column:1; grid-row:1; align-self:end; }
.journey-card--closing .journey-card__panel { display:contents; }
.journey-card--closing .journey-card__panel > p { grid-column:1; grid-row:2; align-self:start; }
.journey-card--closing .journey-visual { grid-column:2; grid-row:1 / 3; align-self:center; }
@media(min-width:1001px) {
  .journey-card--sales .journey-visual { margin-top:0; padding-top:50px; height:auto; }
}
@media(min-width:701px) and (max-width:1000px) {
  .features--journey .journey-card { padding:28px 24px; }
  .features--journey .journey-card--closing { column-gap:28px; }
}
@media(max-width:700px) {
  .features--journey .journey-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:none; margin-top:36px; }
  .features--journey .journey-card { grid-area:auto; display:block; padding:0; }
  .journey-card__toggle { flex-direction:row; align-items:center; gap:14px; padding:24px 4px; }
  .features--journey .journey-card__heading { font-size:18px; line-height:1.4; }
  .journey-card__title { flex:1; }
  .journey-card__meta { flex:0 0 30px; }
  .features--journey .journey-card__meta .feature-icon { width:30px; height:30px; }
  .journey-card__step { display:none; }
  .features--journey .journey-card__panel { display:block; padding:0 4px 26px 48px; }
  .features--journey .journey-card__panel > p { margin:0; font-size:15px; line-height:1.75; }
  .journey-card--sales .journey-visual,
.journey-card--closing .journey-visual { margin:20px 0 0 -44px; width:calc(100% + 44px); }
  .features--journey.is-accordion .journey-card__toggle { cursor:pointer; }
  .features--journey.is-accordion .journey-card__toggle:focus-visible { outline:2px solid var(--color-accent-soft); outline-offset:-2px; border-radius:6px; }
  .is-accordion .journey-card__indicator {
    position:relative;
    display:block;
    flex:0 0 26px;
    width:26px;
    height:26px;
    border:1px solid #818cf850;
    border-radius:50%;
    color:#c0c7fc;
    background:#555ae81c;
  }
  .journey-card__indicator::before,
.journey-card__indicator::after { content:""; position:absolute; top:50%; left:50%; width:10px; height:1.5px; background:currentColor; border-radius:1px; transform:translate(-50%,-50%); }
  .journey-card__indicator::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .25s ease; }
  .is-open .journey-card__indicator::after { transform:translate(-50%,-50%) rotate(0deg); }
  .is-hinted .journey-card__indicator { animation:journey-hint 3.8s ease-in-out infinite; }
  :root:root .journey-card__indicator { color:var(--lt-accent); background:var(--lt-accent-wash); border-color:#555ae826; }
}
@keyframes journey-hint { 0%,
65%,
100% { box-shadow:0 0 0 0 #7378ef00; } 35% { box-shadow:0 0 0 5px #7378ef12; } }
@keyframes journey-panel-enter { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }

/* Closing illustration beside the stacked refund and retry cards. */
@media(min-width:701px) {
  .features--journey .journey-grid {
    grid-template-areas:"setup import" "sales split" "sales share" "retry closing" "refund closing";
  }
  .features--journey .journey-card--closing {
    grid-template-columns:minmax(0,1fr);
    align-content:center;
    column-gap:0;
  }
  .journey-card--closing .journey-visual {
    grid-column:1;
    grid-row:1;
    height:auto;
    margin:0 0 50px;
  }
  .journey-card--closing .journey-card__heading { grid-column:1; grid-row:2; }
  .journey-card--closing .journey-card__panel > p { grid-column:1; grid-row:3; }
}

:root:root .features--journey .journey-card--sales {
  background:radial-gradient(ellipse 100% 75% at 100% 100%,#edf2f8 0%,#f5f7fb 42%,#ffffff00 76%),#fff;
}
:root:root .features--journey .journey-card--closing {
  background:radial-gradient(ellipse 100% 75% at 0% 0%,#edf2f8 0%,#f5f7fb 42%,#ffffff00 76%),#fff;
}