/* ===========================================================================
   SolutionsChatops -- 特長 (alternating rows: framed product crop + text) and
   選ばれる理由 (photo band + ruled reason rows with micro-UI crops).
   Loaded by SolutionsChatops.html only, after solutions-chatops-mock.css.
   Self-contained: every class is .co-feat-* / .co-why-*. Product colours are
   copied from the mockup tokens so the crops read as the 画面イメージ mockup.
   Affordance rule (R6/R7): nothing inside a crop is clickable, so nothing in
   it has a border, a shadow, a hover or a filled accent chip. The only live
   controls in these two sections are the blue "?" term buttons.
   Popovers: no ancestor of a .dc-term here may clip (overflow) or create a
   stacking context (transform / opacity / container-type) -- only the crops
   themselves (.co-feat-stage, .co-why-ui, .co-why-frame) clip. The reason
   titles and texts move only before their row latches (final: opacity 1,
   transform none), so a popover never sits in a stacking context.
   =========================================================================== */
.co-feat, .co-why {
  --cf-rule: #C6D3E0;      /* grid / row rules: visible on white (R7), still quiet */
  --cf-stage: #ECF0F4;     /* grey stage behind each screen crop */
  --cf-hair: #E3E6EA;      /* hairlines inside a crop (product header divider) */
  --cf-flat: #F1F3F5;      /* flat decoration chip, --muted on it 4.93:1 */
  --cf-tint: #EBF3EF;      /* light accent tint: AI draft, changed row */
  --cf-chrome: #006B43;    /* product top bar / sidebar, #FFF 6.60:1 */
  --cf-brand: #42B34F;     /* logo tile, star, presence dot (graphics only) */
  --cf-canvas: #EEEDF0;    /* kanban canvas */
  --cf-col: #E6E8EC;       /* kanban column */
  --cf-strip: #F2F8F4;     /* card header strip */
  --cf-chip: #231A1E;      /* card label chip, #FFF 16.96:1 */
  --st-todo: #1B6FB3; --st-doing: #9A5700; --st-done: #237A52;
  --cf-due-bg: #E8EBEF; --cf-due-tx: #46566A;   /* due badge while not done, 6.27:1 */
  --cf-due-late: #C23B34;  /* overdue badge, #FFF 5.29:1 (mockup --due-late) */
}

/* ---------- 特長: alternating rows (zig-zag). Each row = a framed product crop
   (.co-feat-stage, aria-hidden decoration) + a text column (eyebrow, h3, p).
   DOM order is crop -> text, so stacked rows (< 760px) show the picture first.
   From 760px even rows swap sides by grid placement, never by DOM order.
   The text column is centred against the crop (align-items: center). */
.co-feat { display: grid; row-gap: clamp(64px, 7.4vw, 112px); margin-top: clamp(36px, 4vw, 60px); }
.co-feat-row { --stage-h: 360px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: center; }
.co-feat-text { min-width: 0; }
.co-feat-eye { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.5; color: #1E6946; }
.co-feat-eye svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.co-feat-h { margin: 0 0 14px; font-size: clamp(20px, 1.8vw, 25px); font-weight: 700; line-height: 1.55; color: var(--navy); }
.co-feat-h > span { display: inline-block; }   /* phrase spans, like .co-why-h (Safari: ひ|とつ) */
.co-feat-p { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 2; color: var(--muted); }
@media (min-width: 760px) {
  .co-feat-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4.4vw, 72px); }
  .co-feat-row:nth-child(even) > .co-feat-stage { grid-column: 2; grid-row: 1; }
  .co-feat-row:nth-child(even) > .co-feat-text { grid-column: 1; grid-row: 1; }
}
/* Desktop: crop about 55%, text about 45% (11fr / 9fr, mirrored on even rows). */
@media (min-width: 1024px) {
  .co-feat-row { --stage-h: 400px; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  .co-feat-row:nth-child(even) { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
}
/* Required 画面イメージ caption; --muted on the tint section = 5.20:1 (AA). */
.co-feat-cap { margin: clamp(48px, 5vw, 72px) 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* ---------- The crop: tinted stage with a ChatOps window inset from the top
   left and running off the right and bottom edges, so it reads as a picture
   cut from a larger screen, not as a widget. The stage is the size container
   for everything inside; windows get a fixed height from 440px of crop width
   and grow with their content below that (phones, tablets). */
.co-feat-stage { --inset: 16px; position: relative; overflow: hidden; padding: var(--inset) 0 0 var(--inset); border-radius: 12px; background: linear-gradient(145deg, #D6E7DD 0%, #E0E9EF 60%, #E4EAF1 100%); container-type: inline-size; pointer-events: none; user-select: none; -webkit-user-select: none; }
@media (min-width: 760px) { .co-feat-stage { --inset: 24px; border-radius: 14px; } }
@media (min-width: 1024px) { .co-feat-stage { --inset: 32px; border-radius: 16px; } }
.co-feat-win, .co-why-win { height: 100%; overflow: hidden; border-radius: 6px 0 0 0; background: var(--white); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.6; color: var(--ink); }
.co-feat-stage > .co-feat-win { display: flex; flex-direction: column; height: calc(var(--stage-h) - var(--inset)); border-radius: 8px 0 0 0; }
@container (max-width: 439.98px) { .co-feat-stage > .co-feat-win { height: auto; } }
.co-feat-stage p, .co-feat-stage ul, .co-why-ui p, .co-why-ui ul { margin: 0; }
.co-feat-stage ul, .co-why-ui ul { padding: 0; list-style: none; }
.co-feat-stage svg, .co-why-ui svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Product top bar: app grid, logo + ChatOps, search, header icons. */
.co-feat-top { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: var(--cf-chrome); color: var(--white); white-space: nowrap; }
.co-feat-stage .co-feat-gridic { width: 12px; height: 12px; fill: currentColor; stroke: none; opacity: 0.86; }
.co-feat-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.co-feat-stage .co-feat-brand svg { width: 18px; height: 18px; stroke: none; }
.co-feat-find { flex: 0 1 184px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 22px; margin-left: 12px; padding: 0 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.2); font-size: 13px; color: rgba(255, 255, 255, 0.82); }
.co-feat-stage .co-feat-find svg { width: 12px; height: 12px; }
.co-feat-tools { display: inline-flex; align-items: center; gap: 12px; margin-left: 6px; }
.co-feat-stage .co-feat-tools svg { width: 14px; height: 14px; }
@container (max-width: 419.98px) { .co-feat-tools { display: none; } }
@container (max-width: 299.98px) { .co-feat-find { display: none; } }
/* Channel header as in the product: white, star, name, purpose, member count. */
.co-feat-ch { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--cf-hair); white-space: nowrap; }
.co-feat-ch b { font-size: 13px; color: var(--navy); }
.co-feat-ch .co-feat-star { width: 14px; height: 14px; fill: var(--cf-brand); stroke: none; }
.co-feat-ch__desc { font-size: 13px; color: var(--muted); }
.co-feat-ch__meta { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: var(--muted); }
@container (max-width: 359.98px) { .co-feat-ch__desc { display: none; } }
/* Panel header for the side-panel crops (rooms, schedule). */
.co-feat-ph { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--cf-hair); font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.co-feat-ph svg { color: var(--muted); }
/* Date divider and message box: flat, like the product (decoration only). */
.co-feat-win .co-feat-date { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 14px; color: var(--muted); }
.co-feat-date::before, .co-feat-date::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--cf-hair); }
.co-feat-win .co-feat-compose { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; margin-top: auto; padding: 0 12px; border-radius: 6px; background: var(--cf-flat); font-size: 13px; color: var(--muted); white-space: nowrap; }
.co-feat-compose svg { color: #8A97A5; }
/* Extra rows (.co-feat-more) only where the crop has room for them. */
@container (max-width: 459.98px) { .co-feat-win .co-feat-date, .co-feat-win .co-feat-compose { display: none; } }
@container (max-width: 519.98px) { .co-feat-v1 .co-feat-more { display: none; } }
@container (max-width: 439.98px) { .co-feat-v3 .co-feat-more, .co-feat-win .co-feat-call__bar { display: none; } .co-feat-v3 .co-feat-screen { aspect-ratio: 2 / 1; } }
@container (max-width: 559.98px) { .co-feat-v4 .co-feat-more { display: none !important; } }

/* Messages: Mattermost-style rows (avatar, name, time, text), no bubbles. */
.co-feat-msgs { padding: 12px 14px 0; }
.co-feat-v2 .co-feat-msgs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 14px; }
.co-feat-msg { display: flex; align-items: flex-start; gap: 10px; }
.co-feat-msg + .co-feat-msg { margin-top: 10px; }
.co-feat-msg > div { min-width: 0; flex: 1 1 auto; }
.co-feat-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.co-feat-meta b { font-size: 13px; color: var(--navy); }
.co-feat-at { font-weight: 700; color: #1E6946; }
.co-feat-badge { padding: 0 5px; border-radius: 3px; background: var(--cf-flat); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 16px; color: var(--muted); }
.co-feat-sys { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 36px !important; font-size: 13px; color: var(--muted); }
.co-feat-sys svg { color: var(--st-done); }
.co-feat-sys b { color: var(--navy); }
.co-feat-draft { margin-top: 4px !important; padding: 7px 10px; border-radius: 4px; background: var(--cf-tint); color: var(--navy); }
.co-feat-av { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); font-size: 13px; font-weight: 700; line-height: 1; color: var(--white); }
.co-feat-av--s { flex-basis: 20px; width: 20px; height: 20px; font-size: 13px; }
.co-feat-av[data-c="2"] { background: var(--blue); }
.co-feat-av[data-c="3"] { background: #B55922; }
.co-feat-av[data-c="4"] { background: #795C03; }
.co-feat-av[data-c="ai"] { background: #FFF url("assets/chatops-ai-face.webp") center / cover no-repeat; color: transparent; box-shadow: 0 0 0 1px rgba(16, 42, 67, 0.14); }   /* NAL's AI character "Avatar" wherever the assistant speaks; the "AI" text stays in the markup */
.co-feat-av[data-c="bot"] { border-radius: 6px; background: var(--navy-mid); }
.co-feat-av[data-c="bot"] svg { width: 14px; height: 14px; stroke: var(--white); }
.co-feat-avs { display: inline-flex; }
.co-feat-avs .co-feat-av { margin-right: -5px; box-shadow: 0 0 0 2px var(--white); }

/* Kanban column and card: D6 anatomy, drawn flat (no border, no shadow). */
.co-feat-kb { padding: 12px 12px 0; background: var(--cf-canvas); }
.co-feat-col { padding: 8px 8px 0; border-top: 4px solid var(--st-todo); border-radius: 8px 8px 0 0; background: var(--cf-col); }
.co-feat-col__h { display: flex; align-items: center; gap: 6px; margin: 0 2px 8px !important; font-size: 13px; font-weight: 700; color: var(--navy); }
.co-feat-pill { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--st-todo); font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; color: var(--white); }
.co-feat-card { border-radius: 6px; background: var(--white); }
.co-feat-card + .co-feat-card { margin-top: 6px; }
.co-feat-card__h { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px 6px 0 0; background: var(--cf-strip); font-weight: 700; color: var(--navy); white-space: nowrap; }
.co-feat-ck { flex: none; width: 12px; height: 12px; border: 1.5px solid #B9C2CC; border-radius: 50%; }
.co-feat-no { padding: 0 5px; border-radius: 3px; background: var(--navy); font-size: 12px; line-height: 17px; color: var(--white); }
.co-feat-card__f { display: flex; align-items: center; gap: 6px; padding: 6px 8px 7px; }
.co-feat-card__f .co-feat-av { margin-left: auto; }
.co-feat-chip { padding: 0 6px; border-radius: 3px; background: var(--cf-chip); font-size: 13px; font-weight: 700; line-height: 18px; color: var(--white); }
.co-feat-due { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 4px; background: var(--cf-due-bg); font-size: 13px; font-weight: 700; line-height: 18px; color: var(--cf-due-tx); white-space: nowrap; }
.co-feat-card__f > * { flex-shrink: 0; }
.co-feat-due svg { width: 11px; height: 11px; }
/* Overdue: red, plus an "!" icon and 「期限切れ」, so it never relies on colour alone. */
.co-feat-due--late { background: var(--cf-due-late); color: var(--white); }
.co-feat-late { margin-left: 2px; }

/* V1: chat beside the ToDo column once the crop is 440px wide. The column
   always runs past the crop's bottom edge, so the board reads as cut from a
   larger screen. In narrower crops chat sits above a board of fixed height
   (#12 and #13 whole, #14 cut halfway) and the window grows around them. */
.co-feat-v1__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
.co-feat-v1__chat { display: flex; flex-direction: column; min-height: 0; padding: 12px 16px 14px; }
.co-feat-v1 .co-feat-col { min-height: calc(100% + 16px); }
.co-feat-v1__reply { display: none !important; }
@container (max-width: 439.98px) {
  .co-feat-v1 .co-feat-kb { height: 208px; }
  .co-feat-v1__chat { padding: 12px 14px; }
}
@container (min-width: 440px) {
  .co-feat-v1__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .co-feat-v1 .co-feat-kb { border-left: 1px solid var(--cf-hair); }
  .co-feat-v1__reply { display: flex !important; }
}
/* Board beside the chat but still narrow: drop the label chips so the overdue
   badge fits on one line. */
@container (min-width: 440px) and (max-width: 509.98px) {
  .co-feat-v1 .co-feat-chip { display: none; }
}

/* Rows for the panel crops (rooms / schedule / files / notifications). */
.co-feat-rows { padding: 2px 14px 0 !important; }
.co-feat-rows li { display: flex; align-items: center; gap: 8px; min-height: 36px; border-bottom: 1px solid var(--cf-hair); white-space: nowrap; }
.co-feat-rows li:last-child { border-bottom: 0; }
.co-feat-rows svg { color: var(--muted); }
.co-feat-rows b { font-weight: 700; color: var(--navy); }
.co-feat-2l { display: grid; line-height: 1.45; }
.co-feat-2l small { font-size: 13px; color: var(--muted); }
.co-feat-val { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.co-feat-flat { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 3px; background: var(--cf-flat); font-size: 13px; font-weight: 700; line-height: 18px; color: var(--muted); }
.co-feat-flat svg { width: 11px; height: 11px; }
.co-feat-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--st-done); }
.co-feat-ok svg { width: 11px; height: 11px; }
.co-feat-day { flex: 0 0 32px; display: grid; place-items: center; padding: 1px 0 2px; border-top: 3px solid var(--st-done); background: var(--cf-flat); line-height: 1.2; }
.co-feat-day b { font-size: 14px; color: var(--navy); }
.co-feat-day small { font-size: 13px; color: var(--muted); }
.co-feat-ext { flex: 0 0 32px; padding: 3px 0; border-radius: 3px; background: #FBE9E8; font-size: 12px; font-weight: 700; text-align: center; color: #B8322C; }
.co-feat-ext--doc { background: #E4EEF8; color: #1B5F9E; }
.co-feat-ext--img { background: var(--cf-flat); color: var(--muted); }
.co-feat-sub { padding: 8px 14px 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.co-feat-hl { margin: 0 -14px; padding: 0 14px; background: var(--cf-tint); }
.co-feat-hl .co-feat-val { color: #1E6946; }

/* V3: rooms list + the call being shared (dark call view, flat controls). */
.co-feat-v3__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.co-feat-v3 .co-feat-rows li { min-height: 46px; }
.co-feat-v3 .co-feat-rows .co-feat-avs { margin-left: auto; padding-right: 5px; }
.co-feat-live { font-weight: 700; color: #1E6946 !important; }
.co-feat-call { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; background: var(--navy); color: var(--white); }
.co-feat-call__h { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; white-space: nowrap; }
.co-feat-call__h svg { color: rgba(255, 255, 255, 0.8); }
.co-feat-call__h .co-feat-val { font-weight: 400; color: rgba(255, 255, 255, 0.78); }
.co-feat-screen { display: flex; flex-direction: column; gap: 6px; aspect-ratio: 16 / 9; padding: 10px 12px 12px; border-radius: 4px; background: var(--white); }
.co-feat-screen p { font-size: 13px; font-weight: 700; line-height: 14px; color: var(--navy); }
.co-feat-screen > i { display: block; flex: none; height: 4px; border-radius: 2px; background: #D5DCE4; }
.co-feat-screen > i:nth-of-type(1) { width: 78%; }
.co-feat-screen > i:nth-of-type(2) { width: 54%; }
.co-feat-screen > span { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 9%; margin-top: 4px; padding: 0 6%; border-bottom: 1px solid #C9D1DA; }
.co-feat-screen > span i { flex: 1 1 0; border-radius: 2px 2px 0 0; background: #B7C6D4; }
.co-feat-screen > span i:nth-child(1) { height: 36%; }
.co-feat-screen > span i:nth-child(2) { height: 58%; }
.co-feat-screen > span i:nth-child(3) { height: 48%; }
.co-feat-screen > span i:nth-child(4) { height: 84%; background: var(--navy-mid); }
/* Participant tiles under the shared screen; the speaker gets a wave icon. */
.co-feat-tiles { display: flex; gap: 6px; }
.co-feat-tiles > span { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.co-feat-tiles small { font-size: 13px; color: rgba(255, 255, 255, 0.86); white-space: nowrap; }
.co-feat-call .co-feat-av { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.co-feat-stage .co-feat-tile--talk svg { width: 12px; height: 12px; margin-left: auto; color: #8FD3A6; }
.co-feat-win .co-feat-call__bar { display: flex; align-items: center; justify-content: center; margin-top: auto; }
.co-feat-ctl { display: inline-flex; gap: 6px; }
.co-feat-stage .co-feat-ctl svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--white); }
/* Side by side the call view is as tall as the crop: the shared screen gives
   up height first, so the tiles and controls always stay in view. */
@container (min-width: 440px) {
  .co-feat-v3__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .co-feat-v3 .co-feat-screen { flex: 0 1 auto; min-height: 0; }
}

/* V4: this month's events and the channel's shared files, side by side from
   560px of crop width. */
.co-feat-v4__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.co-feat-v4__body > div + div { border-top: 1px solid var(--cf-hair); }
.co-feat-v4 .co-feat-sub { padding-top: 10px; }
@container (min-width: 560px) {
  .co-feat-v4__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-content: stretch; }
  .co-feat-v4__body > div + div { border-top: 0; border-left: 1px solid var(--cf-hair); }
}

/* V5: flat search field, filters, two hits, then per-channel notifications;
   the row being changed gets a light tint. */
.co-feat-win .co-feat-q { display: flex; align-items: center; gap: 8px; height: 32px; margin: 12px 14px 0; padding: 0 10px; border-radius: 6px; background: var(--cf-flat); white-space: nowrap; }
.co-feat-q > svg { color: var(--muted); }
.co-feat-q b { font-size: 13px; color: var(--navy); }
.co-feat-q .co-feat-val { font-weight: 400; }
.co-feat-filt { display: flex; gap: 6px; padding: 8px 14px 0; white-space: nowrap; }
.co-feat-hits { padding: 12px 14px 12px; border-bottom: 1px solid var(--cf-hair); }
.co-feat-hits .co-feat-msg + .co-feat-msg { margin-top: 8px; }
.co-feat-hits .co-feat-meta span { font-size: 13px; }
.co-feat-hits p:not(.co-feat-meta) { font-size: 13px; color: var(--navy); }
.co-feat-hits mark { padding: 0 2px; background: var(--mark); color: var(--ink); }
.co-feat-v5 .co-feat-rows li { min-height: 32px; }

/* V2: typing dots before the AI draft (only while motion plays). */
.co-feat-ai { display: grid; }
.co-feat-ai > * { grid-area: 1 / 1; }
.co-feat-dots { display: none; }
.co-feat-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }

/* Two-state swap: the final value shows by default (no JS / reduced motion). */
.co-feat-swap { display: inline-grid; justify-items: end; }
.co-feat-swap > i { grid-area: 1 / 1; font-style: normal; }
.co-feat-swap > i:first-child { opacity: 0; }

/* ---------- 選ばれる理由: photo band + ruled spec-sheet rows ------------------ */
.co-why { margin-top: clamp(24px, 2.6vw, 36px); }
.co-why-band { margin: 0 0 clamp(32px, 3.4vw, 48px); }
/* Wide band 2400:974 (about 2.46:1, 1176x477 at 1440), cut from _TIM7417.jpg
   at (0, 876, 5900, 3270): three faces, the laptop keyboard and the typing
   hands, with the armband text (x >= 5950) left out. Phones get their own 4:3
   cut (<picture>) with both pairs of hands. */
.co-why-frame { overflow: hidden; aspect-ratio: 2400 / 974; background: var(--surface-2); }
.co-why-frame > picture { display: block; height: 100%; }
.co-why-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 599.98px) { .co-why-frame { aspect-ratio: 4 / 3; } }
.co-why-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--navy); }
.co-why-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 24px 0 28px; }
/* Row rule as a pseudo-element (not a border) so it can draw from the left. */
.co-why-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cf-rule); transform-origin: left; }
.co-why-h { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--navy); }
/* Titles are split into phrase spans so lines break between phrases (文節). */
.co-why-h > span { display: inline-block; }
.co-why-p { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 2; color: var(--muted); }
@media (min-width: 600px) {
  .co-why-item { grid-template-columns: 264px minmax(0, 1fr); column-gap: 32px; row-gap: 8px; }
  .co-why-ui { grid-row: 1 / span 2; }
}
/* Desktop: crop | title | text on one line per reason. */
@media (min-width: 1024px) {
  .co-why-item { grid-template-columns: 264px minmax(0, 17em) minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 56px); align-items: start; padding: 32px 0; }
  .co-why-ui { grid-row: auto; }
}

/* Micro-UI crop, about 232x112: same grey stage + bleeding window as 特長. */
.co-why-ui { position: relative; width: 264px; height: 128px; overflow: hidden; padding: 10px 0 0 10px; background: var(--cf-stage); pointer-events: none; user-select: none; -webkit-user-select: none; }
.co-why-win { font-size: 13px; line-height: 1.5; }
/* 01: app frame with the product bar and the five functions. */
.co-why-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: var(--cf-chrome); font-size: 12px; font-weight: 700; color: var(--white); }
.co-why-bar .co-why-logo { width: 15px; height: 15px; stroke: none; }
.co-why-fn { display: flex; gap: 0; padding: 10px 4px 0 !important; }
.co-why-fn li { flex: 1 1 0; display: grid; justify-items: center; gap: 3px; font-size: 13px; letter-spacing: -0.06em; color: var(--navy); white-space: nowrap; }
.co-why-fn span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--cf-flat); color: var(--navy); }
.co-why-fn svg { width: 16px; height: 16px; }
/* 02: product sidebar with the three kinds of channel. */
.co-why-side { padding: 6px 0 0; background: var(--cf-chrome); color: var(--white); }
.co-why-side p { padding: 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 17px; color: rgba(255,255,255,0.84); }
.co-why-side span { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; padding: 0 12px; font-size: 13px; line-height: 18px; }
.co-why-side b { width: 11px; text-align: center; font-weight: 400; }
.co-why-side svg { width: 11px; height: 11px; }
.co-why-dot { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); font-size: 13px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; }
.co-why-dot::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--cf-brand); box-shadow: 0 0 0 1.5px var(--cf-chrome); }
/* 03: status bar of the board, 4px colour bar + count per column. */
.co-why-kb { display: flex; gap: 6px; padding: 8px 8px 0; background: var(--cf-canvas); }
.co-why-kb > div { --st: var(--st-todo); flex: 1 1 0; min-width: 0; padding: 6px 5px 0; border-top: 3px solid var(--st); border-radius: 6px 6px 0 0; background: var(--cf-col); }
.co-why-kb > div:nth-child(2) { --st: var(--st-doing); }
.co-why-kb > div:nth-child(3) { --st: var(--st-done); }
.co-why-kb p { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin: 0 1px 6px !important; font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.co-why-kb .co-feat-pill { min-width: 16px; padding: 0 4px; background: var(--st); font-size: 12px; line-height: 15px; }
/* Card stubs: white card with a title bar and one text line, drawn flat. */
.co-why-kb > div > i { display: block; height: 24px; margin-bottom: 4px; border-radius: 4px; background: linear-gradient(#C9D1DA, #C9D1DA) 6px 7px / 55% 3px no-repeat, linear-gradient(#E3E7EC, #E3E7EC) 6px 15px / 70% 3px no-repeat, var(--white); }
/* 04: a post from another system, delivered into a channel. */
.co-why-post { display: flex; gap: 8px; padding: 8px 10px 0; }
.co-why-post > div { min-width: 0; }
.co-why-win .co-feat-ch { height: 26px; padding: 0 10px; gap: 6px; }
.co-why-win .co-feat-ch b { font-size: 13px; }
.co-why-win .co-feat-ch .co-feat-star { width: 12px; height: 12px; }
.co-why-win .co-feat-meta b { font-size: 13px; }
.co-why-post .co-feat-av { flex-basis: 22px; width: 22px; height: 22px; }
.co-why-post .co-feat-av svg { width: 13px; height: 13px; }
.co-why-post p { font-size: 13px; line-height: 1.55; color: var(--navy); }

/* ---------- Line breaks: break Japanese body text between phrases (文節) where
   the browser can (Chrome/Edge). .co-nw keeps a few words whole everywhere,
   as the fallback for other browsers. */
.co-feat-p, .co-why-p, .co-feat-msg p { word-break: auto-phrase; overflow-wrap: break-word; }
.co-nw { white-space: nowrap; }
/* Page-wide (also the 仕組み and 画面イメージ leads, the two captions):
   Safari and Firefox have no auto-phrase and break Japanese between any two
   characters (会|議, いま|す。 alone on the last line). A .co-kp lead keeps
   its phrases there: keep-all leaves breaks only after 、。・ and at the <wbr>
   between phrases in the markup (placed where Chrome breaks, so Chrome does
   not change); body overflow-wrap: anywhere still splits a phrase wider than
   the line. Its glossary popover keeps normal breaks. Headings use
   inline-block phrase spans instead. */
@supports not (word-break: auto-phrase) {
  .co-kp { word-break: keep-all; }
  .co-kp .dc-term-pop { word-break: normal; }
}

/* ---------- Terms in these sections: underline the word itself, so the line
   under the button does not land on the next text line (sections critic 14). */
.co-feat .dc-term-btn, .co-why .dc-term-btn { margin-block: -6px; box-shadow: none; }
.co-term-t { text-decoration: underline; text-decoration-color: #9BB0C4; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- Motion: each crop plays once. solutions-chatops-sections.js adds
   html.co-feat-motion (never with reduced motion) and latches the first .is-in
   from home-motion.js into a permanent .co-feat-seen. Without that class every
   crop shows its final state. --t = step time, --o = crop offset (160ms). */
/* Transitions exist only once latched: entering the start state is instant,
   so a page loaded mid-scroll never shows a crop fading OUT first. */
html.co-feat-motion .co-feat-seen :is(.co-feat-step, .co-feat-push, .co-feat-swap > i, .co-feat-ans) {
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  transition-delay: calc(var(--o, 0) * 160ms + var(--t, 0ms));
}
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-feat-step { opacity: 0; transform: translateY(6px); }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-feat-slide { transform: translateX(-28px); }
/* The card under the new one waits in the new card's slot, then moves down. */
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-feat-push { transform: translateY(calc(-100% - 6px)); }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-feat-swap > i:first-child { opacity: 1; }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-feat-swap > i:last-child { opacity: 0; }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-feat-ans { opacity: 0; }
html.co-feat-motion .co-feat-dots { display: inline-flex; align-items: center; gap: 3px; height: 20px; opacity: 0; }
html.co-feat-motion .co-feat-seen .co-feat-dots { animation: co-feat-dots-life 1.1s var(--ease-soft) calc(var(--o, 0) * 160ms + 450ms) both; }
html.co-feat-motion .co-feat-seen .co-feat-dots i { animation: co-feat-dot 0.5s ease-in-out calc(var(--o, 0) * 160ms + 450ms) 2 alternate; }
html.co-feat-motion .co-feat-seen .co-feat-dots i:nth-child(2) { animation-delay: calc(var(--o, 0) * 160ms + 570ms); }
html.co-feat-motion .co-feat-seen .co-feat-dots i:nth-child(3) { animation-delay: calc(var(--o, 0) * 160ms + 690ms); }
@keyframes co-feat-dots-life { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes co-feat-dot { to { transform: translateY(-3px); opacity: 0.5; } }
/* 選ばれる理由, the same gesture as Home 選ばれる理由 (.reason): the photo opens
   left to right (clip-path wipe, the image settles from 1.04), then each row
   draws its bottom rule from the left while its title (+90ms) and text
   (+170ms) rise 12px. The micro-UI steps keep their own --t. The band and each
   row are latches of their own; rows that latch in the same frame get --o =
   0, 1, 2... from solutions-chatops-sections.js (160ms apart). Final state =
   no clip, no transform, full opacity: that is also the no-JS default. */
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-why-frame { clip-path: inset(0 100% 0 0); }
html.co-feat-motion [data-co-feat-latch]:not(.co-feat-seen) .co-why-img { transform: scale(1.04); }
html.co-feat-motion .co-feat-seen .co-why-frame { clip-path: inset(0); transition: clip-path var(--dur-2) var(--ease-out) calc(var(--o, 0) * 160ms); }
html.co-feat-motion .co-feat-seen .co-why-img { transition: transform 1.4s var(--ease-out) calc(var(--o, 0) * 160ms); }
html.co-feat-motion .co-why-item[data-co-feat-latch]:not(.co-feat-seen)::after { transform: scaleX(0); }
html.co-feat-motion .co-why-item.co-feat-seen::after { transition: transform var(--dur-2) var(--ease-out) calc(var(--o, 0) * 160ms); }
html.co-feat-motion .co-why-item[data-co-feat-latch]:not(.co-feat-seen) :is(.co-why-h, .co-why-p) { opacity: 0; transform: translateY(12px); }
html.co-feat-motion .co-why-item.co-feat-seen :is(.co-why-h, .co-why-p) { transition: opacity var(--dur-1) var(--ease-soft), transform var(--dur-1) var(--ease-out); transition-delay: calc(var(--o, 0) * 160ms + 90ms); }
html.co-feat-motion .co-why-item.co-feat-seen .co-why-p { transition-delay: calc(var(--o, 0) * 160ms + 170ms); }
/* Keyboard focus inside a latch (solutions-chatops-sections.js adds
   .co-feat-now and latches it): its parts jump to the final state, so the
   focused control and its term popover are opaque as soon as they scroll in. */
html.co-feat-motion .co-feat-now :is(.co-feat-step, .co-feat-push, .co-feat-swap > i, .co-feat-ans, .co-why-frame, .co-why-img, .co-why-h, .co-why-p),
html.co-feat-motion .co-feat-now::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .co-feat-step, .co-feat-push, .co-feat-swap > i, .co-feat-ans, .co-why-img, .co-why-frame, .co-why-item::after, .co-why-h, .co-why-p { transition: none !important; }
  .co-feat-dots { display: none !important; }
}

/* Text floor (design-qa-gate §7: 12px for any text, 13px with Japanese). The
   glossary "?" is 11px in home-prototype.css; this page sets 12px, as the
   DataHub and Coding pages do (the shared file stays as it is). */
.dc-term-q { font-size: 12px; }