/* ==========================================================================
   IdeaSweetSpot — Explorer + entry-point UI  (Apps 4 That Studio)
   Additive layer: the Home three-door chooser, the persistent "you are here"
   view-switcher, and the Pressures Explorer (engine) cards + opportunity meter.
   Reuses shared brand tokens from styles.css and the scorer's --ss-* circle
   colors. Studio purple accent + Inter throughout. One token source.
   ========================================================================== */

/* ---- shared rhythm ---------------------------------------------------- */
.iss-home, .iss-explore {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1rem, 4vw, 2rem) 3rem;
}

/* ======================================================================
   PERSISTENT "YOU ARE HERE" — header view-switcher
   ====================================================================== */
.iss-where {
  display: flex;
  gap: 0.25rem;
  margin: 0 auto;
  padding: 0.25rem;
  background: var(--cloud, #F7F8FA);
  border: 1px solid var(--border);
  border-radius: var(--r-pill, 999px);
}
.iss-where__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.35rem 0.85rem;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill, 999px);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast, 0.15s) var(--ease, ease), color var(--t-fast, 0.15s) var(--ease, ease);
}
.iss-where__tab svg { color: currentColor; opacity: 0.8; }
.iss-where__tab:hover { color: var(--midnight); }
.iss-where__tab.is-on {
  background: #fff;
  color: var(--purple);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(17,24,39,0.08));
}
.iss-where__tab.is-on svg { opacity: 1; }
.iss-where__tab:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
@media (max-width: 720px) {
  .iss-where__tab span { display: none; }       /* icons-only on small screens */
  .iss-where__tab { padding: 0.35rem 0.6rem; min-width: 40px; justify-content: center; }
}

/* ======================================================================
   HOME — the three doors
   ====================================================================== */
.iss-home__hero { text-align: center; max-width: 1000px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.iss-home__eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--purple); margin: 0 0 0.9rem;
}
.iss-home__title {
  font-size: clamp(1.7rem, 4.4vw, 2.7rem);
  line-height: 1.1; letter-spacing: -0.02em; font-weight: 900;
  color: var(--midnight); margin: 0 0 0.9rem;
}
.iss-home__lede {
  font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.55; color: var(--muted);
  margin: 0 auto; max-width: 600px;
}
.iss-home__lede strong { color: var(--midnight); }

.iss-doors3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 2vw, 1.3rem);
  align-items: stretch;
}
.iss-door3 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem;
  text-align: left;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 18px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(17,24,39,0.06));
  cursor: pointer;
  font: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s var(--ease, ease), box-shadow 0.18s var(--ease, ease), border-color 0.18s var(--ease, ease);
}
.iss-door3::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--purple); opacity: 0.85;
}
.iss-door3--explore::before { background: var(--ss-need); }
.iss-door3--score::before   { background: var(--ss-cap); }
.iss-door3--journey::before { background: var(--purple); }
.iss-door3:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 8px 24px rgba(17,24,39,0.12)); border-color: color-mix(in srgb, var(--purple) 30%, var(--border)); }
.iss-door3:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.iss-door3__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--purple-soft, #F1EEFF); color: var(--purple);
  margin-bottom: 0.2rem;
}
.iss-door3--explore .iss-door3__icon { background: color-mix(in srgb, var(--ss-need) 16%, #fff); color: color-mix(in srgb, var(--ss-need) 70%, var(--ink)); }
.iss-door3--score .iss-door3__icon   { background: color-mix(in srgb, var(--ss-cap) 16%, #fff);  color: color-mix(in srgb, var(--ss-cap) 65%, var(--ink)); }
.iss-door3__tag {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.iss-door3__title { font-size: 1.18rem; font-weight: 800; color: var(--midnight); line-height: 1.2; }
.iss-door3__desc { font-size: 0.92rem; line-height: 1.5; color: var(--muted); margin: 0; flex: 1; }
.iss-door3__desc em { font-style: normal; color: var(--midnight); font-weight: 600; }
.iss-door3__go {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.86rem; font-weight: 800; color: var(--purple);
}
.iss-door3__go svg { transition: transform 0.18s var(--ease, ease); }
.iss-door3:hover .iss-door3__go svg { transform: translateX(3px); }

.iss-home__fine {
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0; max-width: 720px; text-align: center;
  font-size: 0.78rem; line-height: 1.5; color: var(--muted);
}

@media (max-width: 820px) {
  .iss-doors3 { grid-template-columns: 1fr; }
}

/* ======================================================================
   EXPLORE — intro
   ====================================================================== */
.iss-explore__intro { max-width: 820px; margin: 0 0 1.6rem; }
.iss-explore__eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--purple); margin: 0 0 0.7rem;
}
.iss-explore__title {
  font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em;
  font-weight: 900; color: var(--midnight); margin: 0 0 0.8rem;
}
.iss-explore__title em { font-style: italic; color: var(--purple); }
.iss-explore__lede { font-size: 1.02rem; line-height: 1.6; color: var(--muted); margin: 0 0 1rem; }
.iss-explore__lede strong { color: var(--midnight); }
.iss-explore__honest {
  display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.88rem; line-height: 1.5; color: var(--midnight);
  background: color-mix(in srgb, var(--mustard) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--mustard) 40%, var(--border));
  border-radius: var(--r-md, 12px);
  padding: 0.7rem 0.9rem; margin: 0;
}
.iss-explore__honest svg { flex: none; color: color-mix(in srgb, var(--mustard) 70%, var(--ink)); margin-top: 1px; }
.iss-explore__honest em { font-style: normal; font-weight: 700; }

/* ---- controls: filter + sort + count --------------------------------- */
.iss-explore__controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem;
  margin: 0 0 1.4rem; padding: 0.2rem 0;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--cloud, #F7F8FA) 72%, transparent);
}
.iss-seg {
  display: inline-flex; gap: 0.2rem; padding: 0.25rem;
  background: var(--cloud, #F7F8FA); border: 1px solid var(--border); border-radius: var(--r-pill, 999px);
}
.iss-seg__btn {
  min-height: 40px; padding: 0.35rem 1rem; border: 0; background: transparent;
  border-radius: var(--r-pill, 999px); font: inherit; font-size: 0.86rem; font-weight: 700;
  color: var(--muted); cursor: pointer;
  transition: background var(--t-fast, 0.15s) var(--ease, ease), color var(--t-fast, 0.15s) var(--ease, ease);
}
.iss-seg__btn:hover { color: var(--midnight); }
.iss-seg__btn.is-on { background: #fff; color: var(--purple); box-shadow: var(--shadow-sm, 0 1px 2px rgba(17,24,39,0.08)); }
.iss-seg__btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.iss-sortwrap { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.iss-sort {
  min-height: 40px; padding: 0.4rem 0.7rem; font: inherit; font-size: 0.86rem; font-weight: 600;
  color: var(--midnight); background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
  cursor: pointer;
}
.iss-sort:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.iss-explore__count { margin: 0 0 0 auto; font-size: 0.85rem; font-weight: 600; color: var(--muted); }

/* ======================================================================
   THE PRESSURE CARDS
   ====================================================================== */
.iss-pgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
}
.iss-pcard {
  display: flex; flex-direction: column; gap: 0.7rem;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg, 18px);
  padding: clamp(1rem, 2vw, 1.35rem);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(17,24,39,0.06));
  transition: box-shadow 0.18s var(--ease, ease), border-color 0.18s var(--ease, ease), transform 0.18s var(--ease, ease);
}
.iss-pcard:hover { box-shadow: var(--shadow-md, 0 8px 24px rgba(17,24,39,0.1)); border-color: color-mix(in srgb, var(--purple) 18%, var(--border)); }

.iss-pcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.iss-pcard__meta { display: flex; flex-direction: column; gap: 0.3rem; }
.iss-pcard__side {
  align-self: flex-start;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: var(--r-pill, 999px);
}
.iss-pcard__side--companies { background: color-mix(in srgb, var(--ss-cap) 16%, #fff);  color: color-mix(in srgb, var(--ss-cap) 60%, var(--ink)); }
.iss-pcard__side--families  { background: color-mix(in srgb, var(--ss-care) 14%, #fff); color: color-mix(in srgb, var(--ss-care) 60%, var(--ink)); }
.iss-pcard__domain { font-size: 0.76rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.iss-pcard__score {
  flex: none; text-align: center; min-width: 58px;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding: 0.4rem 0.5rem; border-radius: var(--r-md, 12px);
  background: var(--purple-soft, #F1EEFF);
}
.iss-pcard__score b { font-size: 1.35rem; font-weight: 900; color: var(--purple); }
.iss-pcard__score span { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--purple) 70%, var(--ink)); margin-top: 0.15rem; }

.iss-pcard__title { font-size: 1.16rem; font-weight: 800; line-height: 1.22; color: var(--midnight); margin: 0; }

.iss-pcard__rows { display: flex; flex-direction: column; gap: 0.55rem; }
.iss-pcard__row { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.iss-pcard__k {
  display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.15rem;
}
.iss-pcard__row--help {
  background: var(--purple-soft, #F1EEFF);
  border-radius: var(--r-md, 12px); padding: 0.6rem 0.75rem;
  color: var(--midnight); font-weight: 500;
}
.iss-pcard__row--help .iss-pcard__k { color: var(--purple); }

/* signals: meter + evidence side by side */
.iss-pcard__signals { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.iss-pcard__meter-cap, .iss-pcard__ev-tag, .iss-pcard__caveat-tag {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.3rem;
}
.iss-pcard__meter-cap { color: var(--muted); }
.iss-pcard__meter { min-width: 138px; }
.iss-meter__svg { width: 138px; height: auto; display: block; }
.iss-meter__lbl { font-size: 8.5px; font-weight: 700; fill: var(--muted); font-family: var(--font-sans, Inter, sans-serif); }
.iss-meter__track { fill: var(--cloud, #EDEFF4); }
.iss-meter__fill { fill: var(--purple); }
.iss-meter__fill[data-axis="0"] { fill: var(--ss-need); }
.iss-meter__fill[data-axis="1"] { fill: var(--ss-paid); }
.iss-meter__fill[data-axis="2"] { fill: var(--ss-cap); }

.iss-pcard__ev-tag { color: color-mix(in srgb, var(--teal) 60%, var(--ink)); }
.iss-pcard__ev-tag svg { color: var(--teal); }
.iss-pcard__ev-body { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink); }

/* the honest catch — never visually buried */
.iss-pcard__caveat {
  background: color-mix(in srgb, var(--coral) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--coral) 28%, var(--border));
  border-radius: var(--r-md, 12px); padding: 0.6rem 0.75rem;
}
.iss-pcard__caveat-tag { color: color-mix(in srgb, var(--coral) 70%, var(--ink)); margin-bottom: 0.3rem; }
.iss-pcard__caveat-tag svg { color: var(--coral); }
.iss-pcard__caveat-body { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink); }
.iss-pcard__merged { margin: 0; font-size: 0.72rem; color: var(--muted); font-style: italic; }

.iss-pcard__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.3rem; }
.iss-pcard__shape { width: 100%; justify-content: center; }
.iss-pcard__foot-note { margin: 0; font-size: 0.76rem; line-height: 1.4; color: var(--muted); text-align: center; }
.iss-pcard__foot-note strong { color: var(--midnight); }

.iss-explore__src { margin: 1.8rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); max-width: 820px; }

@media (max-width: 520px) {
  .iss-pgrid { grid-template-columns: 1fr; }
  .iss-pcard__signals { grid-template-columns: 1fr; }
  .iss-pcard__meter { min-width: 0; }
  .iss-explore__count { margin-left: 0; width: 100%; }
}

/* ======================================================================
   MOTION + A11Y
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .iss-door3, .iss-pcard, .iss-door3__go svg, .iss-where__tab { transition: none; }
  .iss-door3:hover { transform: none; }
}

/* When printing, only the active overlay/plan should show — keep views out. */
@media print {
  .iss-home, .iss-explore, .iss-where { display: none !important; }
}

/* ==========================================================================
   MARKETING LANDING — spring-zen sections between the hero and the doors.
   (What-it-is · How-it-works · Pricing preview · Start-here.) One token source:
   Playfair display, moss accents, the four --ss-* circle colours, soft paper.
   ========================================================================== */
.iss-land {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 3.8rem) 0 0;
  text-align: center;
}
.iss-land__eyebrow {
  font-family: var(--iss-font-body);
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--iss-accent-ink, #4F6B3E);
  margin: 0 0 .7rem;
}
.iss-land__h {
  font-family: var(--iss-font-display);
  font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  color: var(--iss-ink, #23262F);
  margin: 0 auto .7rem; max-width: 20ch;
}
.iss-land__sub {
  font-size: clamp(1rem, 2vw, 1.1rem); line-height: 1.55;
  color: var(--muted); margin: 0 auto; max-width: 58ch;
}

/* -------- hero CTAs + trust line -------- */
.iss-land__cta {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
  margin: 1.5rem 0 .9rem;
}
.iss-land__trust {
  font-size: .82rem; color: var(--muted); margin: 0;
}

/* -------- what it is — four circle cards -------- */
.iss-land__circles {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.7rem, 1.6vw, 1rem);
  text-align: left;
}
.iss-circlecard {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--iss-n-200, #E7E0D2);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: var(--iss-shadow-sm);
}
.iss-circlecard__dot {
  display: block; width: 30px; height: 30px; border-radius: 999px;
  margin-bottom: .7rem;
  border: 2px solid rgba(35,38,47,.14);
}
.iss-circlecard--care .iss-circlecard__dot { background: var(--ss-care); }
.iss-circlecard--cap  .iss-circlecard__dot { background: var(--ss-cap); }
.iss-circlecard--need .iss-circlecard__dot { background: var(--ss-need); }
.iss-circlecard--paid .iss-circlecard__dot { background: var(--ss-paid); }
.iss-circlecard__name {
  display: block; font-family: var(--iss-font-display); font-weight: 700;
  font-size: 1.1rem; color: var(--iss-ink); margin-bottom: .25rem;
}
.iss-circlecard__desc { display: block; font-size: .9rem; line-height: 1.45; color: var(--muted); }

/* -------- how it works — three steps -------- */
.iss-land__steps {
  list-style: none; margin: 1.7rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.3rem);
  text-align: left; counter-reset: step;
}
.iss-lstep {
  position: relative;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--iss-n-200, #E7E0D2);
  border-radius: 20px;
  padding: 1.4rem 1.3rem 1.5rem;
  box-shadow: var(--iss-shadow);
}
.iss-lstep__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  font-family: var(--iss-font-display); font-weight: 700; font-size: 1.2rem;
  background: var(--iss-accent-soft, #EAF3E4); color: var(--iss-accent-ink, #4F6B3E);
  border: 1px solid var(--iss-accent-line, #D6E3CC);
  margin-bottom: .8rem;
}
.iss-lstep__h {
  font-family: var(--iss-font-display); font-weight: 700; font-size: 1.18rem;
  color: var(--iss-ink); margin: 0 0 .4rem;
}
.iss-lstep__p { font-size: .94rem; line-height: 1.5; color: var(--muted); margin: 0 0 .9rem; }
.iss-lstep__tag {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px;
}
.iss-lstep__tag--free   { background: var(--iss-accent-soft, #EAF3E4); color: var(--iss-accent-ink, #4F6B3E); }
.iss-lstep__tag--builder{ background: var(--iss-butter, #FFE09A); color: #6B4E12; }

/* -------- pricing preview — two mini cards -------- */
.iss-priceprev {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.3rem);
  margin: 1.7rem auto 0; max-width: 720px; text-align: left;
}
.iss-priceprev__card {
  position: relative;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--iss-n-200, #E7E0D2);
  border-radius: 22px;
  padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: var(--iss-shadow);
  display: flex; flex-direction: column;
}
.iss-priceprev__card.is-featured {
  border-color: color-mix(in srgb, var(--iss-butter, #FFE09A) 70%, var(--iss-n-200));
  box-shadow: var(--iss-shadow-lg);
}
.iss-priceprev__ribbon {
  position: absolute; top: -.7rem; right: 1.2rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--iss-butter, #FFE09A); color: #6B4E12;
  padding: .3rem .7rem; border-radius: 999px;
  box-shadow: var(--iss-shadow-sm);
}
.iss-priceprev__name {
  font-family: var(--iss-font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--iss-ink); margin: 0 0 .2rem;
}
.iss-priceprev__price { display: flex; align-items: baseline; gap: .3rem; margin: 0 0 .6rem; }
.iss-priceprev__price b { font-family: var(--iss-font-display); font-size: 2rem; font-weight: 700; color: var(--iss-ink); }
.iss-priceprev__price span { font-size: .82rem; color: var(--muted); }
.iss-priceprev__sub { font-size: .9rem; line-height: 1.45; color: var(--muted); margin: 0 0 .9rem; }
.iss-priceprev__list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .45rem; flex: 1; }
.iss-priceprev__list li { display: flex; align-items: flex-start; gap: .45rem; font-size: .9rem; line-height: 1.4; color: var(--iss-n-700, #3C3A33); }
.iss-priceprev__list li svg { flex: 0 0 auto; margin-top: .15rem; color: var(--iss-moss, #6F8F5B); }
.iss-priceprev__fine { grid-column: 1 / -1; text-align: center; margin: .3rem 0 0; }
.iss-linkbtn {
  background: none; border: 0; padding: .3rem; cursor: pointer; font: inherit;
  font-weight: 700; color: var(--iss-accent-ink, #4F6B3E); text-decoration: underline; text-underline-offset: .2em;
}
.iss-linkbtn:hover { color: var(--iss-accent-deep, #3E5730); }
.iss-linkbtn:focus-visible { outline: 3px solid var(--iss-focus, #4F6B3E); outline-offset: 2px; border-radius: 6px; }

/* -------- start-here wrapper for the doors -------- */
.iss-land--start { max-width: 1080px; }
.iss-land--start .iss-doors3 { margin-top: 1.6rem; text-align: left; }

/* -------- responsive -------- */
@media (max-width: 820px) {
  .iss-land__circles { grid-template-columns: repeat(2, 1fr); }
  .iss-land__steps   { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .iss-land__circles { grid-template-columns: 1fr; }
  .iss-priceprev     { grid-template-columns: 1fr; }
  .iss-land__cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .iss-lstep, .iss-priceprev__card { transition: none; }
}

/* ==========================================================================
   HOME v2 — calm hero (copy + product preview), two primary paths, privacy.
   One token source: spring palette, Playfair display, the four --ss-* circle
   colours, soft paper cards. Additive; loads after the base home rules above.
   ========================================================================== */

/* -------- two-column hero: the promise + a live product preview -------- */
.iss-hero2 {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  text-align: left;
}
.iss-hero2__copy { max-width: 34rem; }
.iss-hero2__copy .iss-home__title { margin: 0 0 0.9rem; }
.iss-hero2__copy .iss-home__lede { margin: 0; max-width: 34rem; }
.iss-hero2__copy .iss-land__cta { justify-content: flex-start; }
.iss-hero2__copy .iss-land__trust { text-align: left; }

/* -------- the product preview card (illustrative, live SVG + text) -------- */
.iss-preview {
  background: rgba(255,255,255,.84);
  border: 1px solid var(--iss-n-200, #E7E0D2);
  border-radius: 24px;
  box-shadow: var(--iss-shadow-lg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  text-align: left;
}
.iss-preview__cap {
  font-family: var(--iss-font-body);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--iss-accent-ink, #4F6B3E);
  margin: 0 0 .5rem;
}
.iss-preview__bloom { display: flex; justify-content: center; margin: .1rem 0 .9rem; }
.iss-preview__bloom svg { width: min(240px, 76%); height: auto; }
.iss-preview__petals { mix-blend-mode: multiply; }
.iss-preview__petals circle { fill-opacity: .72; stroke: #fff; stroke-width: 2.5; }
.iss-preview__spark { filter: drop-shadow(0 1px 3px rgba(35,38,47,.18)); }
.iss-preview__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.iss-preview__rows li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; }
.iss-preview__dot {
  width: 12px; height: 12px; border-radius: 999px; flex: 0 0 auto;
  border: 1.5px solid rgba(35,38,47,.14);
}
.iss-preview__k { flex: 0 0 5.6rem; font-weight: 600; color: var(--iss-ink); }
.iss-preview__bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--iss-n-100, #F1ECE1); overflow: hidden;
}
.iss-preview__bar i { display: block; height: 100%; border-radius: 999px; opacity: .92; }
.iss-preview__rows li.is-weak .iss-preview__k { color: var(--mustard, #9A6A1A); }
.iss-preview__result {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 1rem 0 0; padding: .7rem .85rem;
  font-size: .88rem; line-height: 1.45; color: var(--iss-ink);
  background: var(--iss-accent-soft, #EAF3E4);
  border: 1px solid var(--iss-accent-line, #D6E3CC);
  border-radius: 14px;
}
.iss-preview__result svg { flex: 0 0 auto; margin-top: 1px; color: var(--iss-accent-ink, #4F6B3E); }
.iss-preview__result strong { color: var(--mustard, #9A6A1A); font-weight: 700; }

/* -------- two primary paths (bring an idea / find one) -------- */
.iss-paths {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.5rem);
  margin: 1.7rem 0 0; text-align: left;
}
.iss-path {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--iss-n-200, #E7E0D2);
  border-radius: var(--iss-radius-card, 28px);
  box-shadow: var(--iss-shadow);
  cursor: pointer; font: inherit; position: relative; overflow: hidden;
  transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), border-color .18s var(--ease, ease);
}
.iss-path::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.iss-path--score::before   { background: var(--ss-cap); }
.iss-path--explore::before { background: var(--ss-need); }
.iss-path:hover { transform: translateY(-3px); box-shadow: var(--iss-shadow-lg); border-color: var(--iss-accent-line, #D6E3CC); }
.iss-path:focus-visible { outline: 3px solid var(--iss-focus, #4F6B3E); outline-offset: 3px; }
.iss-path__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: .2rem;
}
.iss-path--score .iss-path__icon   { background: color-mix(in srgb, var(--ss-cap) 20%, #fff);  color: color-mix(in srgb, var(--ss-cap) 60%, var(--iss-ink)); }
.iss-path--explore .iss-path__icon { background: color-mix(in srgb, var(--ss-need) 26%, #fff); color: color-mix(in srgb, var(--ss-need) 68%, var(--iss-ink)); }
.iss-path__tag {
  font-family: var(--iss-font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--iss-accent-ink, #4F6B3E);
}
.iss-path__title { font-family: var(--iss-font-display); font-weight: 700; font-size: 1.28rem; color: var(--iss-ink); line-height: 1.2; }
.iss-path__desc { font-size: .95rem; line-height: 1.55; color: var(--muted); margin: 0; flex: 1; }
.iss-path__desc em { font-style: normal; color: var(--iss-ink); font-weight: 600; }
.iss-path__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .9rem; font-weight: 700; color: var(--iss-accent-ink, #4F6B3E); }
.iss-path__go svg { transition: transform .18s var(--ease, ease); }
.iss-path:hover .iss-path__go svg { transform: translateX(3px); }

.iss-paths__more { margin: 1.3rem 0 0; font-size: .92rem; color: var(--muted); }
.iss-paths__sep { margin: 0 .5rem; color: var(--iss-n-300, #D8D2C6); }

/* -------- reusable privacy reassurance chip -------- */
.iss-privacy {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: .8rem 0 0; padding: .4rem .8rem;
  font-size: .82rem; font-weight: 600; line-height: 1.3;
  color: var(--iss-accent-ink, #4F6B3E);
  background: var(--iss-accent-soft, #EAF3E4);
  border: 1px solid var(--iss-accent-line, #D6E3CC);
  border-radius: 999px;
}
.iss-privacy svg { flex: 0 0 auto; opacity: .9; }

/* -------- responsive + reduced-motion -------- */
@media (max-width: 860px) {
  .iss-hero2 { grid-template-columns: 1fr; text-align: center; }
  .iss-hero2__copy { max-width: none; }
  .iss-hero2__copy .iss-home__lede { margin: 0 auto; }
  .iss-hero2__copy .iss-land__cta { justify-content: center; }
  .iss-hero2__copy .iss-land__trust { text-align: center; }
  .iss-preview { max-width: 420px; margin: .4rem auto 0; }
}
@media (max-width: 720px) {
  .iss-paths { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .iss-path { transition: none; }
  .iss-path:hover { transform: none; }
}

/* ==========================================================================
   ZEN FLOW v2 — soften every landing surface into floating rice-paper, give
   the preview bloom an enso + a gentle breath, and let cards drift on hover.
   ========================================================================== */

/* softer, glassier surfaces (low-contrast white edge, more blur, airy shadow) */
.iss-circlecard,
.iss-lstep,
.iss-priceprev__card,
.iss-preview,
.iss-path {
  background: rgba(255,253,247,.70);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 20px 48px -26px rgba(35,38,47,.20),
    0 4px 14px -10px rgba(111,143,91,.12);
  -webkit-backdrop-filter: blur(13px) saturate(1.05);
          backdrop-filter: blur(13px) saturate(1.05);
}
.iss-preview { background: rgba(255,253,247,.80); }

/* gentle idle float so the cards feel alive, not pinned in 2017 boxes */
.iss-circlecard, .iss-lstep {
  transition: transform .4s var(--ease, cubic-bezier(.16,.72,.24,1)), box-shadow .4s ease;
}
.iss-circlecard:hover, .iss-lstep:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 30px 64px -28px rgba(35,38,47,.26),
    0 8px 20px -12px rgba(111,143,91,.16);
}

/* -------- the hero preview bloom: enso behind, four circles breathing -------- */
.iss-preview__bloom { position: relative; }
.iss-preview__svg { position: relative; z-index: 1; }
.iss-preview__petals {
  transform-box: fill-box; transform-origin: center;
  animation: iss-bloom-breathe 9s ease-in-out infinite;
}
.iss-preview__spark {
  transform-box: fill-box; transform-origin: center;
  animation: iss-spark-twinkle 6s ease-in-out infinite;
}
@keyframes iss-bloom-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes iss-spark-twinkle { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* a slim flowing thread flourish above each landing heading — the "thread" motif */
.iss-land__eyebrow { position: relative; }
.iss-land--circles .iss-land__eyebrow::before,
.iss-land--how .iss-land__eyebrow::before,
.iss-land--pricing .iss-land__eyebrow::before,
.iss-land--start .iss-land__eyebrow::before {
  content: "";
  display: block;
  width: 132px; height: 14px;
  margin: 0 auto .9rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14' fill='none'%3E%3Cpath d='M2 8C24 2 34 12 56 7S90 2 108 8' stroke='%23C9A24B' stroke-width='1.3' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='66' cy='7' r='2.4' fill='%23E9C46A' opacity='.8'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .iss-preview__petals, .iss-preview__spark { animation: none; }
  .iss-circlecard, .iss-lstep { transition: none; }
  .iss-circlecard:hover, .iss-lstep:hover { transform: none; }
}