/* =========================================================
   Sales-support service sections: FLOW / CASES / PRICING
   ========================================================= */

/* ---- service ribbon under nav brand ---- */
.nav__name b .svc {
  display: inline-block; font-family: var(--mono); font-size: .52rem; font-weight: 700;
  letter-spacing: .12em; background: var(--acid); color: var(--ink);
  padding: .1em .4em; margin-left: .4em; vertical-align: middle; text-transform: uppercase;
}

/* hero badge that screams "this is a service for sales reps" */
.svc-banner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--line); background: var(--paper-3);
}
.svc-banner div {
  padding: .9rem var(--gutter); border-left: var(--line);
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: .6rem;
}
.svc-banner div:first-child { border-left: none; }
.svc-banner b { color: var(--blue); }
@media (max-width: 760px){ .svc-banner { grid-template-columns: 1fr; } .svc-banner div { border-left: none; border-top: 1px dashed color-mix(in srgb,var(--ink) 30%,transparent);} .svc-banner div:first-child{border-top:none;} }

/* ---------------- FLOW (onboarding) ---------------- */
.flow { border-top: var(--line); border-bottom: var(--line-thick); display: grid; grid-template-columns: repeat(4, 1fr); }
.fstep {
  position: relative; padding: clamp(1.8rem,3vw,2.6rem) clamp(1.4rem,2vw,1.9rem);
  border-left: var(--line); background: var(--paper); overflow: hidden;
  transition: background .22s, color .22s;
}
.fstep:first-child { border-left: none; }
.fstep:hover { background: var(--ink); color: var(--paper); }
.fstep:hover .fstep__ico { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.fstep:hover .fstep__no { color: var(--acid); }
.fstep__no { font-family: var(--mono); font-weight: 700; font-size: .76rem; color: var(--blue); letter-spacing: .1em; }
.fstep__ico {
  width: 58px; height: 58px; border: var(--line); margin: 1.2rem 0 1.4rem;
  display: grid; place-items: center; background: var(--paper-3); transition: background .22s, color .22s, border-color .22s;
}
.fstep__ico svg { width: 30px; height: 30px; }
.fstep h4 { font-family: var(--gothic); font-weight: 900; font-size: 1.22rem; line-height: 1.2; margin-bottom: .7rem; }
.fstep p { font-size: .9rem; color: var(--ink-soft); }
.fstep:hover p { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.fstep__arrow {
  position: absolute; top: 50%; right: -13px; z-index: 5; transform: translateY(-50%);
  width: 26px; height: 26px; background: var(--blue); color: #fff;
  display: grid; place-items: center; font-size: .8rem; border: var(--line);
}
.fstep:last-child .fstep__arrow { display: none; }
.fstep__meta { margin-top: 1.2rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; opacity: .6; }
@media (max-width: 900px){
  .flow { grid-template-columns: 1fr 1fr; }
  .fstep:nth-child(2n+1){ border-left: none; }
  .fstep:nth-child(n+3){ border-top: var(--line); }
  .fstep:nth-child(2n) .fstep__arrow { display: none; }
}
@media (max-width: 520px){
  .flow { grid-template-columns: 1fr; }
  .fstep { border-left: none !important; border-top: var(--line); }
  .fstep:first-child { border-top: none; }
  .fstep__arrow { right: 50%; top: auto; bottom: -13px; transform: translateX(50%) rotate(90deg); }
}

/* ---------------- CASES ---------------- */
.cases { border-bottom: var(--line-thick); }
.case-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: var(--line); }
.case {
  border-left: var(--line); padding: clamp(1.8rem,3vw,2.6rem); display: flex; flex-direction: column;
  background: var(--paper); transition: background .2s, color .2s;
}
.case:first-child { border-left: none; }
.case:hover { background: var(--blue); color: #fff; }
.case__co { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: .6rem; }
.case__co .pin { width: 9px; height: 9px; background: var(--blue); }
.case:hover .case__co .pin { background: var(--acid); }
.case__dir { width: 50px; height: 50px; display: grid; place-items: center; border: 2px solid var(--acid); color: var(--acid); font-size: 1.5rem; margin: 1.6rem 0 1.2rem; }
.case:hover .case__dir { border-color: var(--acid); color: var(--acid); }
.case__eff { font-family: var(--gothic); font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.case__efflab { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; opacity: .55; margin-top: .8rem; }
.case__quote { margin-top: 1.4rem; font-family: var(--mincho); font-weight: 400; font-size: 1.02rem; line-height: 1.7; }
.case:hover .case__quote { color: #fff; }
.case__who { margin-top: auto; padding-top: 1.6rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; opacity: .65; }
@media (max-width: 900px){ .case-grid { grid-template-columns: 1fr; } .case { border-left: none; border-top: var(--line);} .case:first-child{border-top:none;} }

/* ---------------- PRICING ---------------- */
.pricing { border-bottom: var(--line-thick); }
.plan-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: var(--line); }
.plan {
  border-left: var(--line); padding: clamp(1.8rem,3vw,2.6rem); display: flex; flex-direction: column;
  background: var(--paper); position: relative;
}
.plan:first-child { border-left: none; }
.plan--hot { background: var(--ink); color: var(--paper); }
.plan__flag {
  position: absolute; top: 0; right: 0; background: var(--acid); color: var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: .62rem; letter-spacing: .1em;
  padding: .4em .7em; text-transform: uppercase;
}
.plan__name { font-family: var(--gothic); font-weight: 900; font-size: 1.4rem; }
.plan__for { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-top: .4rem; }
.plan__price { font-family: var(--gothic); font-weight: 900; font-size: clamp(2.2rem,3.5vw,3rem); line-height: 1; margin: 1.6rem 0 .2rem; letter-spacing: -.02em; }
.plan__price .cur { font-size: 1.1rem; vertical-align: top; }
.plan__price .per { font-family: var(--mono); font-size: .8rem; font-weight: 700; margin-left: .3em; }
.plan--hot .plan__price { color: var(--acid); }
.plan__note { font-size: .82rem; color: var(--ink-soft); }
.plan--hot .plan__note { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: .8rem; margin: 1.6rem 0; padding-top: 1.6rem; border-top: 1px dashed color-mix(in srgb,var(--ink) 28%,transparent); }
.plan--hot ul { border-top-color: color-mix(in srgb,var(--paper) 28%,transparent); }
.plan li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; font-size: .9rem; }
.plan li .ck { color: var(--blue); font-weight: 700; }
.plan--hot li .ck { color: var(--acid); }
.plan .btn { margin-top: auto; justify-content: center; }
.plan--hot .btn { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.plan--hot .btn:hover { background: var(--paper); border-color: var(--paper); }
@media (max-width: 880px){ .plan-grid { grid-template-columns: 1fr; } .plan { border-left: none; border-top: var(--line);} .plan:first-child{border-top:none;} }

/* =========================================================
   TONE RHYTHM — break the monotony with dark anchor bands
   (toggled via body.rhythm from the Tweaks panel)
   ========================================================= */
/* --- stats band goes dark --- */
body.rhythm .stats { background: var(--ink); color: var(--paper); }
body.rhythm .stat { border-left-color: color-mix(in srgb, var(--paper) 22%, transparent); }
body.rhythm .stat__lab { color: color-mix(in srgb, var(--paper) 68%, transparent); }
body.rhythm .stat__num .u { color: var(--acid); }

/* --- method band goes dark --- */
/* --- method band: kept LIGHT so USE CASES is the standout --- */

/* --- subtle tinted panels to add cadence --- */
body.rhythm .about { background: var(--paper-3); }
body.rhythm .pricing { background: var(--paper-2); }
body.rhythm .svc-banner { background: var(--paper-2); }

/* =========================================================
   CATALOG MATRIX — 対応業種 × 対応テーマ
   ========================================================= */
.matrix-legend { display: flex; flex-wrap: wrap; gap: 0; border: var(--line); margin-bottom: 1.4rem; }
.matrix-legend .lg { flex: 1 1 0; min-width: 150px; padding: .8rem 1rem; border-left: var(--line); }
.matrix-legend .lg:first-child { border-left: none; }
.matrix-legend .lg b { display: block; font-family: var(--gothic); font-weight: 900; font-size: .92rem; }
.matrix-legend .lg span { font-size: .76rem; color: var(--ink-soft); }
@media (max-width: 760px){ .matrix-legend .lg { flex-basis: 50%; border-left: var(--line); border-top: var(--line);} }

.matrix-wrap { overflow-x: auto; border-top: var(--line); border-bottom: var(--line-thick); -webkit-overflow-scrolling: touch; }
.matrix { display: grid; grid-template-columns: minmax(132px, 1.2fr) repeat(6, minmax(94px, 1fr)); min-width: 760px; }
.mx { border-left: var(--line); border-top: var(--line); }
.mx--corner {
  border-left: none; border-top: none; background: var(--paper-3);
  font-family: var(--mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .9rem; display: flex; align-items: flex-end; opacity: .65;
}
.mx--head {
  border-top: none; background: var(--paper-3);
  font-family: var(--gothic); font-weight: 900; font-size: .84rem; line-height: 1.2;
  padding: .9rem .8rem; display: flex; align-items: flex-end; transition: background .15s, color .15s;
}
.mx--rowhead {
  border-left: none; background: var(--paper-3);
  font-family: var(--gothic); font-weight: 900; font-size: .95rem; line-height: 1.15;
  padding: .9rem 1rem; display: flex; align-items: center; transition: background .15s, color .15s;
}
.mx--cell {
  cursor: pointer; display: grid; place-items: center; min-height: 56px;
  color: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: background .14s, color .14s;
}
.mx--cell::before { content: "●"; font-size: .56rem; }
.mx--cell:hover { background: var(--ink); color: var(--paper); }
.mx--cell.rowhl, .mx--cell.colhl { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--ink); }
.mx--cell.sel { background: var(--blue); color: #fff; }
.mx--cell.sel::before { content: "↗"; font-size: .95rem; }
.mx--rowhead.rowhl { background: var(--ink); color: var(--paper); }
.mx--head.colhl { background: var(--ink); color: var(--paper); }

/* ---- generated output card ---- */
.cat-out { display: grid; grid-template-columns: 1.05fr 2.3fr .95fr; border-bottom: var(--line-thick); }
.cat-out__cell { padding: clamp(1.6rem,3vw,2.4rem); border-left: var(--line); }
.cat-out__cell:first-child { border-left: none; }
.co-kicker { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); font-weight: 700; }
.co-cross { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.4rem; }
.co-chip { border: var(--line); background: var(--paper-3); padding: .5rem .8rem; font-family: var(--gothic); font-weight: 900; font-size: 1.05rem; }
.co-chip.t { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.co-x { font-family: var(--mono); font-size: .8rem; opacity: .5; padding-left: .2rem; }
.cat-out__title { font-family: var(--gothic); font-weight: 900; font-size: clamp(1.4rem,2.6vw,2rem); line-height: 1.22; text-wrap: balance; }
.cat-out__sum { color: var(--ink-soft); margin-top: 1rem; font-size: 1rem; line-height: 1.7; }
.co-layers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.co-layers span { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; border: var(--line); padding: .35em .6em; }
.co-layers span .n { color: var(--blue); font-weight: 700; margin-right: .35em; }
.cat-out__side { display: flex; flex-direction: column; gap: 1rem; }
.co-spec { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-bottom: .8rem; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.co-spec__k { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; opacity: .55; flex: none; }
.co-spec__v { font-family: var(--gothic); font-weight: 700; font-size: .96rem; text-align: right; }
.co-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; }
.co-meta .big { font-family: var(--gothic); font-weight: 900; font-size: 2rem; display: block; line-height: 1; letter-spacing: -.02em; }
.cat-out__side .btn { margin-top: auto; justify-content: center; }
@media (max-width: 880px){ .cat-out { grid-template-columns: 1fr; } .cat-out__cell { border-left: none; border-top: var(--line);} .cat-out__cell:first-child{border-top:none;} }

/* =========================================================
   TWO-TONE — クールグレーのページに、ホワイトのパネルを交互に
   (html.two-tone, applied when bg = クール×ホワイト)
   ========================================================= */
.two-tone .about,
.two-tone .flow,
.two-tone .pricing,
.two-tone #knowledge { background: var(--paper-3); }      /* white bands */
/* knowledge: cards + filter chips also white so the whole block reads white */
.two-tone #knowledge .report { background: var(--paper-3); }
.two-tone #knowledge .filters button { background: var(--paper-3); }
.two-tone #knowledge .filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.two-tone #knowledge .filters button:hover { background: var(--blue); color: #fff; }
.two-tone #knowledge .report:hover { background: var(--ink); color: var(--paper); }
.two-tone .matrix-wrap,
.two-tone .cat-out { background: var(--paper-3); }       /* white catalog */
.two-tone .cat-out__cell { background: transparent; }