/**
 * Service Detail
 *
 * Loaded only on a single service page (see inc/enqueue.php).
 * Every value comes from tokens.css — no colour or spacing is hardcoded here.
 *
 * The v1 sections run in the order the page renders them. The four blocks
 * above them are shared plumbing: the article's layout, the CTA component the
 * hero, the closing band and the mobile bar all render, the market links under
 * the article, and the bar's own fixed position and page reserve.
 *
 * Index
 *  - Layout
 *  - CTA (shared component)
 *  - Related markets
 *  - Mobile sticky CTA
 *  - Service Hero v4
 *  - Service summary v1 (3行でわかる) and features v1 (主な特徴)
 *  - Service price v1 (料金)
 *  - Service safety v1 (安全性・本人確認)
 *  - Service benefits v1 (メリット・デメリット)
 *  - Service audience v1 (向いている人・向いていない人)
 *  - Service registration v1 (登録方法)
 *  - Service reviews v1 (口コミ・評判)
 *  - Service editorial review v1 (編集部レビュー)
 *  - Service comparison v1 (他サービスと比較)
 *  - Service basic info v1 (基本情報)
 *  - Service FAQ v1 (よくある質問)
 *  - Service research v1 (調査・出典情報)
 *  - Service related v1 (関連サービス)
 *  - Service Final CTA / Sticky CTA v1
 *  - Service Detail v1.1 — contents, editorial prose and evidence
 *  - Service Detail v1.1 — the pricing questions a price table cannot answer
 *  - Service Detail v1.1 — real-experience research
 *  - Service Detail v1.1 — using it, leaving it, and who wrote the page
 */

/* =====================================================================
 * Layout
 * ================================================================== */

/*
 * 12px is where a source line stops being small print and starts being
 * unreadable — and the advertising disclosure, the price notes and the
 * verification dates are exactly the text a reader has the most right to be
 * able to read. One step up, in one place.
 */
.ms-service__body,
.ms-sticky-cta {
	--ms-font-size-meta: 0.8125rem; /* 13px */
}

/*
 * Service Detail runs wider than the rest of the site: its sections are
 * side-by-side comparisons — price cards, safety states, a five-column table —
 * and at the global 1120px they were leaving a quarter of a desktop empty.
 * Only this template is widened; the global container is untouched.
 */
.ms-service__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	max-width: 1200px;
	padding-block: var(--space-8) var(--space-12);
}

@media (min-width: 768px) {
	.ms-service__body {
		gap: var(--space-12);
	}
}

@media (min-width: 1024px) {
	.ms-service__body {
		gap: var(--space-16);
	}
}

.ms-service-section > * + * {
	margin-top: var(--space-4);
}

/*
 * The article keeps a comfortable reading width on wide screens, but stays
 * aligned with the section headings above it: centring it would make its own
 * heading look accidentally indented next to every other section.
 */
.ms-service-section .ms-entry-content {
	margin-inline: 0;
	max-width: var(--content-width-narrow);
	width: 100%;
}

/* Full width where a thumb reaches it, a button-sized button where a cursor
 * does: a 650px-wide call to action on a desktop reads as a banner. */
/* Three columns once there is room for them: mark, identity, facts.
 *
 * The widths are proportional rather than fixed. `auto` sized the brand column
 * to the logo, which left a 104px sliver against a 1200px page and made the
 * centre column the only thing carrying the hero. At 22% / 27% the mark and the
 * fact card both have presence and the identity column still keeps ~46% — the
 * largest share, which is what it should be. */
/* =====================================================================
 * CTA (shared component)
 * ================================================================== */

.ms-service-cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ms-service-cta--hero {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

.ms-service-cta--final {
	background-color: var(--color-primary-light);
	border-radius: var(--radius-xl);
	margin-inline: auto;
	max-width: var(--content-width-narrow);
	padding: var(--space-6);
	text-align: center;
	width: 100%;
}

.ms-service-cta__heading {
	font-size: var(--font-size-xl);
	margin: 0 0 var(--space-4);
}

.ms-service-cta--final .ms-service-cta__button {
	margin-inline: auto;
	max-width: 420px;
}

.ms-service-cta__disclosure,
.ms-service-cta__note {
	color: var(--color-text-secondary);
	font-size: var(--ms-font-size-meta);
	line-height: var(--line-height-heading);
	margin: 0;
}

.ms-service-cta__note {
	background-color: var(--color-warning-light);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	font-size: var(--font-size-sm);
	padding: var(--space-3);
	text-align: left;
}

/* =====================================================================
 * Related markets
 * ================================================================== */

.ms-service-related {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-8);
}

.ms-service-related__title {
	font-size: var(--font-size-lg);
	margin: 0 0 var(--space-4);
}

.ms-service-related__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =====================================================================
 * Mobile sticky CTA
 * ================================================================== */

.ms-sticky-cta {
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
	bottom: 0;
	box-shadow: var(--shadow-lg);
	left: 0;
	padding: var(--space-2) var(--content-gutter);
	padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
	position: fixed;
	right: 0;
	z-index: var(--z-sticky);
}

.ms-sticky-cta__inner {
	margin-inline: auto;
	max-width: var(--content-width-narrow);
}

/* Compact inside the bar: the page content must stay readable behind it. */
.ms-sticky-cta .ms-service-cta {
	gap: var(--space-1);
}

.ms-sticky-cta .ms-button {
	min-height: 48px;
}

.ms-sticky-cta .ms-service-cta__disclosure {
	text-align: center;
}

/*
 * Reserve the bar's height so it never covers the footer.
 *
 * The old 72px was the height of a bare button; an affiliate CTA adds a
 * disclosure line and reaches 115px at 320px wide, so the last 43px of the page
 * sat underneath it (DEV-28 QA-002). The reserve is now taken from the tallest
 * the bar can be — button, two-line disclosure and the external-link note —
 * plus the phone's own safe area. It applies only when the bar is on the page:
 * a service with no CTA gets no empty strip at the bottom.
 */
.ms-main--sticky-cta {
	padding-bottom: var(--space-8);
}

/*
 * The document's own reserve, below the footer: <main> ends long before the
 * page does, so padding there never protected the footer's last line. The
 * class is set only when the bar is rendered.
 */
body.ms-has-sticky-cta {
	/*
	 * Measured against the v1 bar, across 320 / 360 / 390 / 767:
	 *
	 *   71px   one-line official label
	 *   83px   a label that wraps, no disclosure
	 *   92px   affiliate — one-line label plus its disclosure
	 *   104px  affiliate — a label that wraps to two lines, plus disclosure
	 *   125px  the same at 320px wide, where that label wraps to three —
	 *          the tallest the bar has been measured
	 *
	 * 140px leaves 15px of page below the footer's last line at that tallest
	 * case and more at every other, which is what the reserve is for: the label
	 * is typed by an editor, and the cost of being short is the copyright line
	 * disappearing under the bar. It replaces the 150px the old bar needed —
	 * that bar reached 118px on a two-line label alone.
	 */
	padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
	.ms-sticky-cta {
		display: none;
	}

	.ms-main--sticky-cta {
		padding-bottom: 0;
	}

	body.ms-has-sticky-cta {
		padding-bottom: 0;
	}
}

.ms-price-group {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-6);
}

.ms-price-group:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.ms-price-group__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-3);
}

.ms-price-group__title {
	font-size: var(--font-size-lg);
	margin: 0;
}

.ms-price-group__type {
	background-color: var(--color-background-alt);
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin: 0;
	padding: 2px var(--space-3);
}

.ms-price-group__rate {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin: 0;
}

.ms-price-group__rate-value {
	color: var(--color-text-primary);
	font-weight: var(--font-weight-bold);
	margin-left: var(--space-1);
}

.ms-price-group__free {
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--space-3);
}

.ms-price-table {
	border-collapse: collapse;
	min-width: 520px;
	width: 100%;
}

.ms-price-table th,
.ms-price-table td {
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
	overflow-wrap: anywhere;
	padding: var(--space-3);
	text-align: left;
	vertical-align: top;
}

.ms-price-table thead th {
	background-color: var(--color-background-alt);
	border-bottom: 1px solid var(--color-border-strong);
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.ms-price-table tbody th {
	font-weight: var(--font-weight-bold);
}

/* Amounts read as a column of numbers, not as a column of sentences. */
.ms-price-table__num {
	font-family: var(--font-family-numeric);
	white-space: nowrap;
}

.ms-price-table tbody tr:last-child th,
.ms-price-table tbody tr:last-child td {
	border-bottom: 0;
}

.ms-price-group__note {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin: var(--space-3) 0 0;
}

/*
 * A phone screenshot is portrait, so at a 300px column it sat in the left half
 * of its own cell and left a 130px hole between the picture and the step it
 * illustrates. The column now matches the picture.
 */
/*
 * One criterion, one line: label, score, bar, reason. Stacked over three lines
 * each, five criteria read as fifteen rows of unrelated text; on one line the
 * eye can run down the scores and pick up the reasons beside them.
 *
 * This replaces a 768px rule that set grid columns on an element that was never
 * a grid — it had no effect, and being later in the file it would have silently
 * overridden the columns below.
 */
/*
 * Reviews read as a set of cards rather than as a column of paragraphs. Two
 * across once there is room, three once there is room for three — the same
 * breakpoints the rest of the page uses, and the disclosure list below inherits
 * the grid so opening it does not change the shape of the section.
 */
/* 44px on the small buttons too: these are the "詳細を見る" controls in the
 * comparison table and the related cards, and on a phone they are thumb
 * targets like any other. */
.ms-service__body .ms-button--sm {
	min-height: 44px;
}

/* Research: the dates read as a compact grid on a desktop, one column on a
 * phone, and the sources stay a list either way. */
/* =====================================================================
 * Service Hero v4
 *
 * Ported from the approved v4 markup and stylesheet. Its own namespace: the v2
 * and v3 hero rules it replaced have been removed.
 *
 * Values are the approved ones. The only addition is the section padding at the
 * top, for the same reason v3 needed it: this hero renders outside
 * .ms-container, so without a gutter the card sits flush against both screen
 * edges at every width below 1200px. The card's own width and padding are
 * untouched.
 * ================================================================== */

.ms-service-hero-v4 {
	padding-block: var(--space-8);
	padding-inline: var(--content-gutter);

	--hero-navy: #163455;
	--hero-text: #243b57;
	--hero-muted: #66758a;

	--hero-coral: #ff645f;
	--hero-coral-aa: #c74e4a;
	--hero-coral-label: #c64d4b;
	--hero-coral-score: #fa625d;

	--hero-pink-1: #fff7f7;
	--hero-pink-2: #fdeced;
	--hero-pink-3: #fff0f0;

	--hero-border: #e4e9ef;
	--hero-border-soft: #edf0f4;

	color: var(--hero-text);
	width: 100%;
}

.ms-service-hero-v4__inner {
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--hero-border);
	border-radius: 20px;
	box-shadow:
		0 1px 2px rgba(22, 52, 85, 0.03),
		0 10px 30px rgba(22, 52, 85, 0.035);
	display: grid;
	gap: 28px;
	grid-template-columns:
		minmax(240px, 0.95fr)
		minmax(0, 1.8fr)
		minmax(280px, 0.9fr);
	margin-inline: auto;
	padding: 28px;
	width: min(100%, 1200px);
}

/* Visual ------------------------------------------------------------------ */

.ms-service-hero-v4__visual {
	min-width: 0;
}

.ms-service-hero-v4__visual-frame {
	align-items: center;
	background: linear-gradient(145deg, var(--hero-pink-1) 0%, var(--hero-pink-2) 100%);
	border: 1px solid #f3d8da;
	border-radius: 16px;
	display: flex;
	height: 100%;
	justify-content: center;
	min-height: 360px;
	overflow: hidden;
	padding: 24px;
	position: relative;
	width: 100%;
}

.ms-service-hero-v4__visual-decoration {
	background: rgba(255, 100, 95, 0.075);
	border-radius: 50%;
	bottom: -70px;
	height: 180px;
	pointer-events: none;
	position: absolute;
	right: -64px;
	width: 180px;
}

.ms-service-hero-v4__visual-decoration::before {
	background: rgba(255, 255, 255, 0.58);
	border-radius: 50%;
	bottom: 110px;
	content: "";
	height: 90px;
	position: absolute;
	right: 90px;
	width: 90px;
}

.ms-service-hero-v4__media {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	position: relative;
	width: 100%;
	z-index: 1;
}

.ms-service-hero-v4__image {
	border-radius: 12px;
	display: block;
	width: 100%;
}

.ms-service-hero-v4__image--contain {
	height: auto;
	max-height: 320px;
	max-width: 260px;
	object-fit: contain;
}

/*
 * Two overrides are load-bearing here, and the mode is an inset crop without
 * either of them:
 *
 *   flex: none      the image is a flex item inside __media, so the default
 *                   flex-shrink:1 pulls `width: calc(100% + 48px)` back down to
 *                   the container width
 *   max-width: none the base stylesheet caps every img at max-width:100%, which
 *                   caps it again at the same width
 *
 * Height was never affected by either, which is why the box grew downward but
 * not outward before this.
 */
.ms-service-hero-v4__image--cover {
	border-radius: 16px;
	flex: none;
	height: calc(100% + 48px);
	margin: -24px;
	max-width: none;
	object-fit: cover;
	width: calc(100% + 48px);
}

.ms-service-hero-v4__image--logo {
	height: auto;
	max-height: 170px;
	max-width: 170px;
	object-fit: contain;
	width: auto;
}

.ms-service-hero-v4__brand-fallback {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	justify-content: center;
	min-height: 300px;
	position: relative;
	width: 100%;
	z-index: 1;
}

.ms-service-hero-v4__brand-mark {
	background: linear-gradient(145deg, #ff746f, #f25250);
	border-radius: 26px;
	box-shadow: 0 14px 30px rgba(255, 100, 95, 0.2);
	color: #fff;
	display: grid;
	font-size: 44px;
	font-weight: 850;
	height: 112px;
	line-height: 1;
	place-items: center;
	width: 112px;
}

.ms-service-hero-v4__brand-name {
	color: var(--hero-navy);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.5;
	max-width: 220px;
	text-align: center;
}

/* Main -------------------------------------------------------------------- */

.ms-service-hero-v4__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-block: 4px;
}

.ms-service-hero-v4__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.ms-service-hero-v4__chip {
	align-items: center;
	background: #fff0f0;
	border-radius: 999px;
	color: #c54141;
	display: inline-flex;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.4;
	min-height: 28px;
	padding: 4px 11px;
}

.ms-service-hero-v4__chip--soft {
	background: #f3f5f8;
	color: #52647d;
}

.ms-service-hero-v4__heading {
	margin-bottom: 14px;
}

.ms-service-hero-v4__title {
	color: var(--hero-navy);
	font-size: clamp(34px, 3vw, 42px);
	font-weight: 850;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-hero-v4__lead {
	color: #4c6078;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	margin: 11px 0 0;
	max-width: 650px;
}

/* Rating ------------------------------------------------------------------ */

.ms-service-hero-v4__rating {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 2px 0 18px;
}

.ms-service-hero-v4__rating-label {
	color: var(--hero-coral-label);
	font-size: 13px;
	font-weight: 750;
	margin-right: 2px;
}

.ms-service-hero-v4__rating-score {
	color: var(--hero-coral-score);
	font-size: 36px;
	font-weight: 850;
	line-height: 1;
}

.ms-service-hero-v4__rating-max {
	color: #53667e;
	font-size: 18px;
	font-weight: 750;
}

.ms-service-hero-v4__stars {
	color: #f6b51b;
	font-size: 17px;
	letter-spacing: 1px;
	margin-left: 4px;
}

/* Quick facts ------------------------------------------------------------- */

.ms-service-hero-v4__facts {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 0 20px;
}

.ms-service-hero-v4__fact {
	background: #fff;
	border: 1px solid var(--hero-border);
	border-radius: 11px;
	min-width: 0;
	padding: 10px 8px;
	text-align: center;
}

.ms-service-hero-v4__fact dt {
	align-items: center;
	color: #617086;
	display: flex;
	flex-direction: column;
	font-size: 11px;
	font-weight: 700;
	gap: 6px;
	line-height: 1.35;
	margin: 0 0 5px;
}

.ms-service-hero-v4__fact-icon {
	background: #fff0f0;
	border-radius: 50%;
	color: #e45251;
	display: grid;
	font-size: 13px;
	font-weight: 850;
	height: 30px;
	place-items: center;
	width: 30px;
}

.ms-service-hero-v4__fact dd {
	color: var(--hero-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0;
	overflow-wrap: anywhere;
}

/* CTA --------------------------------------------------------------------- */

.ms-service-hero-v4__action {
	border-top: 1px solid var(--hero-border-soft);
	margin-top: auto;
	padding-top: 18px;
}

.ms-service-hero-v4__action .ms-service-cta,
.ms-service-hero-v4__action .service-cta,
.ms-service-hero-v4__action a[data-service-cta] {
	border-radius: 14px;
	font-size: 16px;
	font-weight: 800;
	margin-inline: 0;
	min-height: 58px;
	width: min(100%, 460px);
}

/*
 * .ms-service-cta--hero draws its own rule above the button — it was the only
 * divider in the previous hero. Here __action already provides one, so the
 * component's would print a second, shorter line 19px under the first. Visual
 * only: the component's markup, attributes and disclosure are untouched.
 */
.ms-service-hero-v4__action .ms-service-cta--hero {
	border-top: 0;
	padding-top: 0;
}

/* Summary ----------------------------------------------------------------- */

.ms-service-hero-v4__summary {
	align-self: stretch;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
	border: 1px solid var(--hero-border);
	border-radius: 16px;
	min-width: 0;
	padding: 22px 20px;
}

.ms-service-hero-v4__summary-eyebrow {
	color: var(--hero-coral-aa);
	font-size: 12px;
	font-weight: 800;
	margin: 0 0 4px;
	text-align: center;
}

.ms-service-hero-v4__summary-title {
	color: var(--hero-navy);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.45;
	margin: 0 0 16px;
	overflow-wrap: anywhere;
	text-align: center;
}

.ms-service-hero-v4__summary-list {
	margin: 0;
}

.ms-service-hero-v4__summary-row {
	border-top: 1px solid var(--hero-border-soft);
	padding: 14px 0;
}

.ms-service-hero-v4__summary-row:first-child {
	border-top: 0;
	padding-top: 4px;
}

.ms-service-hero-v4__summary-row dt {
	align-items: center;
	color: #53667e;
	display: flex;
	font-size: 12px;
	font-weight: 750;
	gap: 8px;
	margin: 0 0 6px;
}

.ms-service-hero-v4__summary-row dd {
	color: var(--hero-navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
	margin: 0 0 0 34px;
	overflow-wrap: anywhere;
}

.ms-service-hero-v4__summary-icon {
	background: #fff0f0;
	border-radius: 50%;
	color: #dc4e4d;
	display: grid;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 850;
	height: 26px;
	place-items: center;
	width: 26px;
}

/* Tablet ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.ms-service-hero-v4__inner {
		gap: 24px;
		grid-template-columns:
			210px
			minmax(0, 1fr);
	}

	.ms-service-hero-v4__summary {
		display: grid;
		gap: 18px 28px;
		grid-column: 1 / -1;
		grid-template-columns:
			190px
			1fr;
	}

	.ms-service-hero-v4__summary-eyebrow,
	.ms-service-hero-v4__summary-title {
		grid-column: 1;
	}

	.ms-service-hero-v4__summary-list {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.ms-service-hero-v4__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ms-service-hero-v4__inner {
		border-radius: 16px;
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding: 16px;
	}

	.ms-service-hero-v4__visual-frame {
		min-height: 210px;
		padding: 18px;
	}

	.ms-service-hero-v4__image--contain {
		max-height: 210px;
		max-width: 190px;
	}

	.ms-service-hero-v4__image--logo {
		max-height: 130px;
		max-width: 130px;
	}

	.ms-service-hero-v4__brand-fallback {
		min-height: 180px;
	}

	.ms-service-hero-v4__brand-mark {
		border-radius: 20px;
		font-size: 36px;
		height: 88px;
		width: 88px;
	}

	.ms-service-hero-v4__title {
		font-size: 30px;
	}

	.ms-service-hero-v4__lead {
		font-size: 15px;
		line-height: 1.7;
	}

	.ms-service-hero-v4__rating-score {
		font-size: 31px;
	}

	.ms-service-hero-v4__facts {
		gap: 8px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-hero-v4__fact {
		padding: 10px 8px;
	}

	.ms-service-hero-v4__action {
		padding-top: 16px;
	}

	.ms-service-hero-v4__action .ms-service-cta,
	.ms-service-hero-v4__action .service-cta,
	.ms-service-hero-v4__action a[data-service-cta] {
		max-width: none;
		width: 100%;
	}

	.ms-service-hero-v4__summary {
		display: block;
		padding: 18px;
	}
}

/* Small mobile ------------------------------------------------------------ */

@media (max-width: 359px) {
	.ms-service-hero-v4__facts {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * Service summary v1 (3行でわかる) and features v1 (主な特徴)
 *
 * Ported from the approved v1 markup and stylesheet. Their own namespaces; the
 * .ms-highlights / .ms-features rules they replaced have been removed.
 *
 * No page gutter is added here, unlike the hero — both sections render inside
 * .ms-container.ms-service__body, which already supplies one.
 * ================================================================== */

.ms-service-summary-v1 {
	--summary-navy: #163455;
	--summary-text: #304860;
	--summary-muted: #6a788b;

	--summary-coral: #ff645f;
	--summary-coral-aa: #c74e4a;

	--summary-border: #e5eaf0;
	--summary-soft: #fff8f7;

	width: 100%;
}

.ms-service-summary-v1__inner {
	background: linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);
	border: 1px solid var(--summary-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

.ms-service-summary-v1__heading {
	align-items: center;
	display: flex;
	gap: 14px;
	margin-bottom: 20px;
}

.ms-service-summary-v1__heading-icon {
	background: linear-gradient(145deg, #ff746f, #f25250);
	border-radius: 14px;
	color: #fff;
	display: grid;
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-summary-v1__heading-copy {
	min-width: 0;
}

.ms-service-summary-v1__eyebrow {
	color: var(--summary-coral-aa);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-summary-v1__title {
	color: var(--summary-navy);
	font-size: 24px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
	overflow-wrap: anywhere;
}

/* The service's summary sentence, when the hero showed the catchphrase instead
 * (see the template). Negative top margin pulls it under the heading block. */
.ms-service-summary-v1__lead {
	color: #4c6078;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.75;
	margin: -4px 0 20px;
	max-width: 900px;
}

.ms-service-summary-v1__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ms-service-summary-v1__item {
	align-items: center;
	background: linear-gradient(145deg, #fffafa 0%, #fff 100%);
	border: 1px solid #f0dddd;
	border-radius: 14px;
	display: grid;
	gap: 14px;
	grid-template-columns:
		46px
		minmax(0, 1fr);
	min-height: 112px;
	padding: 18px;
	position: relative;
}

.ms-service-summary-v1__number {
	background: linear-gradient(145deg, #ff746f, #f25552);
	border-radius: 50%;
	color: #fff;
	display: grid;
	font-size: 14px;
	font-weight: 850;
	height: 46px;
	line-height: 1;
	place-items: center;
	width: 46px;
}

.ms-service-summary-v1__text {
	color: var(--summary-navy);
	font-size: 15px;
	font-weight: 750;
	line-height: 1.65;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Features ---------------------------------------------------------------- */

.ms-service-features-v1 {
	--features-navy: #163455;
	--features-text: #334b63;
	--features-muted: #718095;

	--features-border: #e5eaf0;

	width: 100%;
}

.ms-service-features-v1__inner {
	background: #fff;
	border: 1px solid var(--features-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

.ms-service-features-v1__heading {
	display: block;
	margin-bottom: 20px;
}

.ms-service-features-v1__eyebrow {
	color: #c74e4a;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-features-v1__title {
	color: var(--features-navy);
	font-size: 24px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

.ms-service-features-v1__heading-note {
	/* 本文なので AA 4.5:1 が要る。--features-muted (#718095) では 4.02:1 だった。
	 * トークン自体は据え置き（他所で使われうるため）。 */
	color: #69778b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.55;
	margin: 5px 0 0;
	max-width: 680px;
	text-align: left;
}

.ms-service-features-v1__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Columns follow the cards. A service that states one feature was getting a
 * quarter-width card and three empty columns; one that states two got half a
 * row of nothing. The count comes from the template as a modifier because CSS
 * cannot see how many children a grid has before it lays them out.
 *
 * Desktop only: below 1024px the responsive rules further down cap the grid at
 * two columns and then one, and they are meant to win.
 */
@media (min-width: 1024px) {
	.ms-service-features-v1__grid--count-1 {
		/* Left-aligned and held to a readable width: a lone card stretched
		 * across 1148px is a paragraph in a box, not a card. */
		grid-template-columns: minmax(0, 560px);
	}

	.ms-service-features-v1__grid--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-features-v1__grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ms-service-features-v1__grid--count-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * The sentences the grid did not take. The trigger matches the disclosures the
 * registration steps and the research sources already use, so a reader meets
 * the same control wherever a section holds more than it shows.
 */
.ms-service-features-v1__more {
	margin-top: 16px;
}

.ms-service-features-v1__more-trigger {
	align-items: center;
	background: #fff;
	border: 1px solid var(--features-border);
	border-radius: 12px;
	color: #52667c;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 750;
	justify-content: center;
	line-height: 1.4;
	list-style: none;
	min-height: 44px;
	padding: 9px 14px;
}

.ms-service-features-v1__more-trigger::-webkit-details-marker {
	display: none;
}

.ms-service-features-v1__more-trigger::after {
	color: #758396;
	content: "+";
	font-size: 16px;
	font-weight: 700;
	margin-left: 8px;
}

.ms-service-features-v1__more[open] .ms-service-features-v1__more-trigger::after {
	content: "\2212";
}

.ms-service-features-v1__grid--rest {
	margin-top: 16px;
}

.ms-service-features-v1__card {
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
	border: 1px solid var(--features-border);
	border-radius: 14px;
	min-height: 156px;
	min-width: 0;
	padding: 20px;
}

.ms-service-features-v1__icon {
	border-radius: 13px;
	display: grid;
	font-size: 13px;
	font-weight: 850;
	height: 42px;
	line-height: 1;
	margin-bottom: 14px;
	place-items: center;
	width: 42px;
}

.ms-service-features-v1__icon--coral {
	background: #fff0f0;
	color: #c54141;
}

.ms-service-features-v1__icon--pink {
	background: #fdf0f5;
	color: #b94f75;
}

.ms-service-features-v1__icon--green {
	background: #eef8f4;
	color: #277b64;
}

.ms-service-features-v1__icon--blue {
	background: #eef4fa;
	color: #396b9b;
}

.ms-service-features-v1__text {
	color: var(--features-navy);
	font-size: 15px;
	font-weight: 750;
	line-height: 1.65;
	margin: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
	.ms-service-summary-v1__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ms-service-features-v1__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two columns holding one card is the same empty half, one breakpoint down. */
	.ms-service-features-v1__grid--count-1 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.ms-service-summary-v1__inner,
	.ms-service-features-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-summary-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-summary-v1__heading-icon {
		border-radius: 12px;
		height: 38px;
		width: 38px;
	}

	.ms-service-summary-v1__title,
	.ms-service-features-v1__title {
		font-size: 21px;
	}

	.ms-service-summary-v1__lead {
		font-size: 14px;
		line-height: 1.7;
		margin-bottom: 16px;
	}

	.ms-service-summary-v1__grid {
		gap: 10px;
		grid-template-columns: 1fr;
	}

	.ms-service-summary-v1__item {
		gap: 12px;
		grid-template-columns:
			40px
			minmax(0, 1fr);
		min-height: 0;
		padding: 15px;
	}

	.ms-service-summary-v1__number {
		font-size: 12px;
		height: 40px;
		width: 40px;
	}

	.ms-service-summary-v1__text {
		font-size: 14px;
	}

	.ms-service-features-v1__heading {
		margin-bottom: 16px;
	}

	.ms-service-features-v1__grid {
		gap: 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-features-v1__grid--count-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-service-features-v1__card {
		min-height: 0;
		padding: 15px;
	}

	.ms-service-features-v1__icon {
		height: 38px;
		margin-bottom: 11px;
		width: 38px;
	}

	.ms-service-features-v1__text {
		font-size: 14px;
		line-height: 1.6;
	}
}

@media (max-width: 420px) {
	.ms-service-features-v1__grid {
		grid-template-columns: 1fr;
	}

	.ms-service-features-v1__card {
		align-items: center;
		display: grid;
		gap: 12px;
		grid-template-columns:
			38px
			minmax(0, 1fr);
	}

	.ms-service-features-v1__icon {
		margin-bottom: 0;
	}
}

/* =====================================================================
 * Service price v1 (料金)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-price-details / .ms-price-summary rules it replaced have been removed. No
 * page gutter is added — this section renders
 * inside .ms-container.ms-service__body, which already supplies one.
 *
 * .ms-price-group and .ms-price-table keep their existing class names and
 * rules: the group markup, its ids and its dedupe logic are unchanged, and the
 * table is restyled from inside .ms-service-price-v1 rather than renamed.
 * ================================================================== */

.ms-service-price-v1 {
	--price-navy: #163455;
	--price-text: #304860;
	--price-muted: #69778b;

	--price-coral: #ff645f;
	--price-coral-aa: #c74e4a;

	--price-female-bg: #fff5f6;
	--price-female-border: #f3dadd;

	--price-male-bg: #f4f8fc;
	--price-male-border: #dbe7f1;

	--price-neutral-bg: #f8fafc;

	--price-border: #e5eaf0;
	--price-border-soft: #edf0f4;

	width: 100%;
}

.ms-service-price-v1__inner {
	background: #fff;
	border: 1px solid var(--price-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ----------------------------------------------------------------- */

.ms-service-price-v1__heading {
	align-items: end;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin-bottom: 22px;
}

.ms-service-price-v1__heading-main {
	align-items: center;
	display: flex;
	gap: 12px;
}

.ms-service-price-v1__heading-icon {
	background: linear-gradient(145deg, #ff746f, #f25250);
	border-radius: 14px;
	color: #fff;
	display: grid;
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-price-v1__eyebrow {
	color: var(--price-coral-aa);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-price-v1__title {
	color: var(--price-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

.ms-service-price-v1__lead {
	color: var(--price-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	margin: 0;
	max-width: 520px;
	text-align: right;
}

/* Summary grid ------------------------------------------------------------ */

.ms-service-price-v1__summary-grid {
	display: grid;
	gap: 16px;
	margin-bottom: 30px;
}

.ms-service-price-v1__summary-grid--count-1 {
	grid-template-columns: minmax(0, 560px);
}

.ms-service-price-v1__summary-grid--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Summary card ------------------------------------------------------------ */

.ms-service-price-v1__summary-card {
	border: 1px solid var(--price-border);
	border-radius: 16px;
	min-height: 150px;
	min-width: 0;
	padding: 22px;
}

.ms-service-price-v1__summary-card--female {
	background: linear-gradient(145deg, #fffafa 0%, var(--price-female-bg) 100%);
	border-color: var(--price-female-border);
}

.ms-service-price-v1__summary-card--male {
	background: linear-gradient(145deg, #fbfdff 0%, var(--price-male-bg) 100%);
	border-color: var(--price-male-border);
}

.ms-service-price-v1__summary-card--neutral {
	background: var(--price-neutral-bg);
}

.ms-service-price-v1__summary-head {
	align-items: center;
	display: flex;
	gap: 14px;
}

.ms-service-price-v1__summary-symbol {
	background: #eef2f6;
	border-radius: 14px;
	color: #4f6278;
	display: grid;
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 850;
	height: 46px;
	place-items: center;
	width: 46px;
}

.ms-service-price-v1__summary-symbol--female {
	background: #fde9ed;
	color: #c64d61;
}

.ms-service-price-v1__summary-symbol--male {
	background: #e8f1f8;
	color: #386d9d;
}

.ms-service-price-v1__summary-label {
	color: #5d6e82;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 4px;
}

.ms-service-price-v1__summary-value {
	color: var(--price-navy);
	font-size: 28px;
	font-weight: 850;
	line-height: 1.2;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-price-v1__summary-note {
	color: #53667e;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	margin: 15px 0 0 60px;
	overflow-wrap: anywhere;
}

/* Details ----------------------------------------------------------------- */

.ms-service-price-v1__details {
	padding-top: 4px;
}

.ms-service-price-v1__details-heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
}

.ms-service-price-v1__details-accent {
	background: var(--price-coral);
	border-radius: 999px;
	display: block;
	flex: 0 0 auto;
	height: 36px;
	width: 4px;
}

.ms-service-price-v1__details-title {
	color: var(--price-navy);
	font-size: 18px;
	font-weight: 850;
	line-height: 1.4;
	margin: 0;
}

.ms-service-price-v1__details-note {
	color: var(--price-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	margin: 2px 0 0;
}

/* Table ------------------------------------------------------------------- */

.ms-service-price-v1__table-scroll {
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid var(--price-border);
	border-radius: 14px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	width: 100%;
}

.ms-service-price-v1__table-scroll:focus-visible {
	outline: 3px solid rgba(31, 111, 178, 0.26);
	outline-offset: 3px;
}

.ms-service-price-v1 table {
	border-collapse: collapse;
	color: var(--price-text);
	font-size: 13px;
	min-width: 720px;
	width: 100%;
}

.ms-service-price-v1 thead th {
	background: #f5f7fa;
	border-bottom: 1px solid #dfe5ec;
	color: #52647a;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	padding: 12px 14px;
	text-align: left;
	white-space: nowrap;
}

.ms-service-price-v1 tbody th,
.ms-service-price-v1 tbody td {
	border-top: 1px solid var(--price-border-soft);
	line-height: 1.55;
	padding: 12px 14px;
	vertical-align: top;
}

.ms-service-price-v1 tbody th {
	color: var(--price-navy);
	font-weight: 750;
	text-align: left;
}

.ms-service-price-v1 tbody tr:first-child th,
.ms-service-price-v1 tbody tr:first-child td {
	border-top: 0;
}

/* Footnote ---------------------------------------------------------------- */

.ms-service-price-v1__footnote {
	/* 本文なので AA 4.5:1 が要る。#748195 では 3.95:1 だった。 */
	color: #69778b;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	margin: 12px 0 0;
}

/* Tablet ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.ms-service-price-v1__heading {
		display: block;
	}

	.ms-service-price-v1__lead {
		margin-top: 8px;
		max-width: none;
		text-align: left;
	}
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ms-service-price-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-price-v1__heading {
		margin-bottom: 18px;
	}

	.ms-service-price-v1__heading-icon {
		border-radius: 12px;
		height: 38px;
		width: 38px;
	}

	.ms-service-price-v1__title {
		font-size: 22px;
	}

	.ms-service-price-v1__lead {
		font-size: 13px;
	}

	.ms-service-price-v1__summary-grid {
		gap: 10px;
		grid-template-columns: 1fr;
		margin-bottom: 24px;
	}

	.ms-service-price-v1__summary-card {
		min-height: 0;
		padding: 17px;
	}

	.ms-service-price-v1__summary-symbol {
		border-radius: 13px;
		height: 42px;
		width: 42px;
	}

	.ms-service-price-v1__summary-value {
		font-size: 23px;
	}

	.ms-service-price-v1__summary-note {
		font-size: 13px;
		margin: 12px 0 0 56px;
	}

	.ms-service-price-v1__details-title {
		font-size: 17px;
	}

	.ms-service-price-v1 table {
		font-size: 12px;
		min-width: 680px;
	}

	.ms-service-price-v1 thead th,
	.ms-service-price-v1 tbody th,
	.ms-service-price-v1 tbody td {
		padding: 11px 12px;
	}
}

/* =====================================================================
 * Service safety v1 (安全性・本人確認)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-safety rules it replaced have been removed.
 *
 * Three additions to the approved sheet, each because the data has a shape the
 * mock did not show: a state-coloured row mark, a status pill that places
 * itself in the second column so a row with no note still lines its pill up
 * with the others, and the measure blocks (監視・サポート体制 / 個人情報保護 /
 * セキュリティ対策) that the record can carry and the mock had no slot for.
 * ================================================================== */

.ms-service-safety-v1 {
	--safety-navy: #163455;
	--safety-text: #304860;
	--safety-muted: #69778b;

	--safety-coral: #ff645f;
	--safety-coral-aa: #c74e4a;

	--safety-green: #24775e;
	--safety-green-bg: #edf8f3;

	--safety-red: #b84b4b;
	--safety-red-bg: #fff0f0;

	/*
	 * #687789 as approved measured 4.19:1 against its own #f3f5f7 pill, and
	 * 「不明」 is 12px bold body text, so it needs 4.5:1. Darkened by the least
	 * that clears it; the pill background is unchanged.
	 */
	--safety-gray: #626f80;
	--safety-gray-bg: #f3f5f7;

	--safety-border: #e5eaf0;
	--safety-border-soft: #edf0f4;

	width: 100%;
}

.ms-service-safety-v1__inner {
	background: #fff;
	border: 1px solid var(--safety-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-safety-v1__heading {
	margin-bottom: 22px;
}

.ms-service-safety-v1__heading-main {
	align-items: center;
	display: flex;
	gap: 12px;
}

.ms-service-safety-v1__heading-icon {
	background: linear-gradient(145deg, #ff746f, #f25250);
	border-radius: 14px;
	color: #fff;
	display: grid;
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-safety-v1__eyebrow {
	color: var(--safety-coral-aa);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-safety-v1__title {
	color: var(--safety-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Layout ----------------------------------------------------------------- */

.ms-service-safety-v1__layout {
	align-items: start;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.85fr);
}

/* Nothing to put beside the list: it takes the row rather than leaving a gap
 * where a card would have been. */
.ms-service-safety-v1__layout--facts-only {
	grid-template-columns: minmax(0, 1fr);
}

/* Facts panel ------------------------------------------------------------ */

.ms-service-safety-v1__facts-panel {
	background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
	border: 1px solid var(--safety-border);
	border-radius: 16px;
	min-width: 0;
	padding: 22px;
}

.ms-service-safety-v1__facts-heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}

.ms-service-safety-v1__facts-symbol {
	background: #fff0f0;
	border-radius: 13px;
	color: #c94a4a;
	display: grid;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 850;
	height: 40px;
	place-items: center;
	width: 40px;
}

.ms-service-safety-v1__facts-eyebrow {
	color: var(--safety-coral-aa);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-safety-v1__facts-title {
	color: var(--safety-navy);
	font-size: 20px;
	font-weight: 850;
	line-height: 1.4;
	margin: 0;
}

.ms-service-safety-v1__facts-lead {
	color: #53667e;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	margin: 0 0 16px;
	max-width: 720px;
}

/* List ------------------------------------------------------------------- */

.ms-service-safety-v1__list {
	margin: 0;
}

.ms-service-safety-v1__row {
	border-top: 1px solid var(--safety-border-soft);
	display: grid;
	gap: 16px;
	grid-template-columns: 190px minmax(0, 1fr);
	padding: 15px 0;
}

.ms-service-safety-v1__row:first-child {
	border-top: 0;
}

.ms-service-safety-v1__row dt {
	align-items: center;
	display: flex;
	gap: 10px;
	margin: 0;
	min-width: 0;
}

.ms-service-safety-v1__row-icon {
	background: #fff0f0;
	border-radius: 50%;
	color: #d14f4f;
	display: grid;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 850;
	height: 34px;
	place-items: center;
	width: 34px;
}

/*
 * The mark carries the state it sits beside: a tick next to なし would say
 * something the record does not. Same shape and size in every row, so the
 * column still reads as one column.
 */
.ms-service-safety-v1__row-icon--no {
	background: var(--safety-red-bg);
	color: var(--safety-red);
}

.ms-service-safety-v1__row-icon--unknown {
	background: var(--safety-gray-bg);
	color: var(--safety-gray);
}

.ms-service-safety-v1__row-icon--plain {
	background: var(--safety-gray-bg);
	color: var(--safety-gray);
}

.ms-service-safety-v1__row-label {
	color: var(--safety-navy);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
}

.ms-service-safety-v1__row-content {
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0;
}

.ms-service-safety-v1__row-note {
	color: #53667e;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.65;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Status ----------------------------------------------------------------- */

.ms-service-safety-v1__status {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	/* Second column always, so the pills line up whether or not the row above
	 * had something to say. */
	grid-column: 2;
	justify-content: center;
	line-height: 1.3;
	min-height: 32px;
	min-width: 62px;
	padding: 5px 11px;
	white-space: nowrap;
}

.ms-service-safety-v1__status--yes {
	background: var(--safety-green-bg);
	color: var(--safety-green);
}

.ms-service-safety-v1__status--no {
	background: var(--safety-red-bg);
	color: var(--safety-red);
}

.ms-service-safety-v1__status--unknown {
	background: var(--safety-gray-bg);
	color: var(--safety-gray);
}

/* Measures --------------------------------------------------------------- */

/*
 * The service's own account of monitoring, privacy and security. It is prose,
 * not a state, so it reads in the right-hand column with the other prose
 * instead of interrupting a list of あり / なし — and it is the service
 * speaking rather than the editors, so the card is neutral rather than coral.
 */
.ms-service-safety-v1__measures {
	background: #f8fafc;
	border: 1px solid var(--safety-border);
	border-radius: 16px;
	padding: 20px;
}

.ms-service-safety-v1__measures-heading {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.ms-service-safety-v1__measures-icon {
	background: #edf2f6;
	border-radius: 12px;
	color: #52677d;
	display: grid;
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 850;
	height: 36px;
	place-items: center;
	width: 36px;
}

.ms-service-safety-v1__measures-title {
	color: var(--safety-navy);
	font-size: 16px;
	font-weight: 850;
	line-height: 1.45;
	margin: 0;
}

.ms-service-safety-v1__measures-list {
	display: grid;
	gap: 14px;
}

.ms-service-safety-v1__measure {
	border-top: 1px solid var(--safety-border-soft);
	padding-top: 14px;
}

.ms-service-safety-v1__measure:first-child {
	border-top: 0;
	padding-top: 0;
}

.ms-service-safety-v1__measure-label {
	color: var(--safety-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	margin: 0 0 4px;
}

.ms-service-safety-v1__measure-text {
	color: #53667e;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.65;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Right side ------------------------------------------------------------- */

.ms-service-safety-v1__side {
	display: grid;
	gap: 14px;
	min-width: 0;
}

.ms-service-safety-v1__editorial {
	background: linear-gradient(145deg, #fffafa 0%, #fff4f4 100%);
	border: 1px solid #f1d8da;
	border-radius: 16px;
	padding: 20px;
}

.ms-service-safety-v1__editorial-heading {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}

.ms-service-safety-v1__editorial-icon {
	background: #ffe5e7;
	border-radius: 12px;
	color: #c94a4a;
	display: grid;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 850;
	height: 36px;
	place-items: center;
	width: 36px;
}

.ms-service-safety-v1__editorial-title {
	color: #b84444;
	font-size: 17px;
	font-weight: 850;
	line-height: 1.4;
	margin: 0;
}

.ms-service-safety-v1__editorial-text {
	color: #53667e;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.75;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Caution ---------------------------------------------------------------- */

.ms-service-safety-v1__caution {
	background: #fffdfd;
	border: 1px solid #efdede;
	border-radius: 16px;
	padding: 20px;
}

.ms-service-safety-v1__caution-heading {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}

.ms-service-safety-v1__caution-icon {
	background: #fff0f0;
	border-radius: 50%;
	color: #b94a4a;
	display: grid;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 850;
	height: 36px;
	place-items: center;
	width: 36px;
}

.ms-service-safety-v1__caution-title {
	color: var(--safety-navy);
	font-size: 16px;
	font-weight: 850;
	line-height: 1.45;
	margin: 0;
}

.ms-service-safety-v1__caution-text {
	color: #53667e;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.ms-service-safety-v1__caution-text > :first-child {
	margin-top: 0;
}

.ms-service-safety-v1__caution-text > :last-child {
	margin-bottom: 0;
}

/* Evidence (optional media) ---------------------------------------------- */

/*
 * The screenshot as a reference card rather than a centred picture: laid out
 * sideways with the capture held to a thumbnail's height, because a 400px-tall
 * image in the middle of the page made the section about the screenshot.
 */
.ms-service-safety-v1__evidence {
	background: #fff;
	border: 1px solid var(--safety-border);
	border-radius: 16px;
	margin-top: 20px;
	padding: 20px;
}

.ms-service-safety-v1__evidence-heading {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.ms-service-safety-v1__evidence-icon {
	background: #eef2f6;
	border-radius: 12px;
	color: #52677d;
	display: grid;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 850;
	height: 36px;
	place-items: center;
	width: 36px;
}

.ms-service-safety-v1__evidence-eyebrow {
	color: var(--safety-muted);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-safety-v1__evidence-title {
	color: var(--safety-navy);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.4;
	margin: 0;
}

.ms-service-safety-v1__evidence-body {
	align-items: center;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

/* A source and a date with no usable picture: the column goes, the card stays. */
.ms-service-safety-v1__evidence-body--meta-only {
	grid-template-columns: minmax(0, 1fr);
}

.ms-service-safety-v1__evidence-media {
	align-items: center;
	background: #f8fafc;
	border: 1px solid var(--safety-border-soft);
	border-radius: 14px;
	display: flex;
	justify-content: center;
	margin: 0;
	min-width: 0;
	padding: 14px;
}

.ms-service-safety-v1__evidence-media img {
	border-radius: 10px;
	display: block;
	height: auto;
	max-height: 300px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.ms-service-safety-v1__evidence-meta {
	color: #53667e;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	min-width: 0;
}

.ms-service-safety-v1__evidence-meta p {
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.ms-service-safety-v1__evidence-meta p:last-child {
	margin-bottom: 0;
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ms-service-safety-v1__layout {
		grid-template-columns: 1fr;
	}

	.ms-service-safety-v1__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Three cards across two columns leaves the third stranded in half a row,
	 * so the measures card — the one that is a list rather than a paragraph —
	 * takes the second row whole.
	 */
	.ms-service-safety-v1__measures {
		grid-column: 1 / -1;
	}

	.ms-service-safety-v1__evidence-body {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.ms-service-safety-v1__evidence-body--meta-only {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-safety-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-safety-v1__heading {
		margin-bottom: 18px;
	}

	.ms-service-safety-v1__heading-icon {
		border-radius: 12px;
		height: 38px;
		width: 38px;
	}

	.ms-service-safety-v1__title {
		font-size: 22px;
	}

	.ms-service-safety-v1__facts-panel {
		padding: 17px;
	}

	.ms-service-safety-v1__facts-title {
		font-size: 18px;
	}

	.ms-service-safety-v1__row {
		gap: 9px;
		grid-template-columns: 1fr;
		padding: 14px 0;
	}

	.ms-service-safety-v1__row-content {
		grid-template-columns: minmax(0, 1fr) auto;
		padding-left: 44px;
	}

	.ms-service-safety-v1__side {
		grid-template-columns: 1fr;
	}

	.ms-service-safety-v1__editorial,
	.ms-service-safety-v1__caution,
	.ms-service-safety-v1__measures,
	.ms-service-safety-v1__evidence {
		padding: 17px;
	}

	/* The picture stacks over what is known about it, and gets shorter: on a
	 * phone a 300px capture is a third of the screen. */
	.ms-service-safety-v1__evidence-body {
		gap: 14px;
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-service-safety-v1__evidence-media img {
		max-height: 260px;
	}
}

@media (max-width: 390px) {
	.ms-service-safety-v1__row-content {
		display: block;
		padding-left: 44px;
	}

	.ms-service-safety-v1__status {
		margin-top: 9px;
	}
}

/* =====================================================================
 * Service benefits v1 (メリット・デメリット)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-pros-cons rules it replaced have been removed.
 * ================================================================== */

.ms-service-benefits-v1 {
	--benefits-navy: #163455;
	--benefits-text: #304860;
	/*
	 * #69778b as approved is 4.55:1 on white but 4.31:1 on the panel's own
	 * tint, and the panel eyebrow ("良い点" / "注意点") is 11px text. Darkened
	 * by the least that clears 4.5:1 against both tints; the tints themselves
	 * are unchanged.
	 */
	--benefits-muted: #64717f;

	--benefits-coral: #c74e4a;

	--benefits-pros-bg: #fff7f6;
	--benefits-pros-border: #f0d9d7;

	--benefits-cons-bg: #f4f8fc;
	--benefits-cons-border: #dbe6f0;

	--benefits-border: #e5eaf0;
	--benefits-border-soft: #edf0f4;

	width: 100%;
}

.ms-service-benefits-v1__inner {
	background: #fff;
	border: 1px solid var(--benefits-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-benefits-v1__heading {
	margin-bottom: 20px;
}

.ms-service-benefits-v1__eyebrow {
	color: var(--benefits-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-benefits-v1__title {
	color: var(--benefits-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Grid ------------------------------------------------------------------- */

.ms-service-benefits-v1__grid {
	display: grid;
	gap: 16px;
}

.ms-service-benefits-v1__grid--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Only one side recorded: capped rather than stretched, so a single panel
 * does not read as a row with a card missing from it. */
.ms-service-benefits-v1__grid--count-1 {
	grid-template-columns: minmax(0, 760px);
}

/* Panel ------------------------------------------------------------------ */

.ms-service-benefits-v1__panel {
	border-radius: 16px;
	min-width: 0;
	padding: 22px;
}

.ms-service-benefits-v1__panel--pros {
	background: linear-gradient(145deg, #fffafa 0%, var(--benefits-pros-bg) 100%);
	border: 1px solid var(--benefits-pros-border);
}

.ms-service-benefits-v1__panel--cons {
	background: linear-gradient(145deg, #fbfdff 0%, var(--benefits-cons-bg) 100%);
	border: 1px solid var(--benefits-cons-border);
}

.ms-service-benefits-v1__panel-heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 18px;
}

.ms-service-benefits-v1__panel-icon {
	border-radius: 14px;
	display: grid;
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 850;
	height: 44px;
	place-items: center;
	width: 44px;
}

.ms-service-benefits-v1__panel-icon--pros {
	background: #fde9e8;
	color: #c84e4b;
}

.ms-service-benefits-v1__panel-icon--cons {
	background: #e7f0f7;
	color: #3c6f9e;
}

.ms-service-benefits-v1__panel-eyebrow {
	color: var(--benefits-muted);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-benefits-v1__panel-title {
	color: var(--benefits-navy);
	font-size: 21px;
	font-weight: 850;
	line-height: 1.4;
	margin: 0;
}

/* List ------------------------------------------------------------------- */

.ms-service-benefits-v1__list {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-benefits-v1__item {
	align-items: start;
	border-top: 1px solid rgba(22, 52, 85, 0.075);
	display: grid;
	gap: 10px;
	grid-template-columns: 28px minmax(0, 1fr);
	padding: 13px 0;
}

.ms-service-benefits-v1__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.ms-service-benefits-v1__item-mark {
	background: #ffeceb;
	border-radius: 50%;
	color: #c94a48;
	display: grid;
	font-size: 12px;
	font-weight: 850;
	height: 26px;
	margin-top: 1px;
	place-items: center;
	width: 26px;
}

.ms-service-benefits-v1__item-mark--cons {
	background: #e9f1f8;
	color: #3f709d;
}

.ms-service-benefits-v1__item-text {
	color: var(--benefits-navy);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

/* Details ---------------------------------------------------------------- */

.ms-service-benefits-v1__more {
	margin-top: 12px;
}

.ms-service-benefits-v1__more-trigger {
	align-items: center;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--benefits-border);
	border-radius: 12px;
	color: #52667c;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 750;
	justify-content: center;
	line-height: 1.4;
	list-style: none;
	min-height: 44px;
	padding: 9px 14px;
}

.ms-service-benefits-v1__more-trigger::-webkit-details-marker {
	display: none;
}

.ms-service-benefits-v1__more-trigger::after {
	color: #758396;
	content: "+";
	font-size: 16px;
	font-weight: 700;
	margin-left: 8px;
}

.ms-service-benefits-v1__more[open] .ms-service-benefits-v1__more-trigger::after {
	content: "−";
}

.ms-service-benefits-v1__list--more {
	margin-top: 12px;
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ms-service-benefits-v1__grid--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-benefits-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-benefits-v1__title {
		font-size: 22px;
	}

	.ms-service-benefits-v1__grid {
		gap: 12px;
		grid-template-columns: 1fr;
	}

	.ms-service-benefits-v1__panel {
		padding: 17px;
	}

	.ms-service-benefits-v1__panel-heading {
		margin-bottom: 14px;
	}

	.ms-service-benefits-v1__panel-icon {
		border-radius: 13px;
		font-size: 16px;
		height: 40px;
		width: 40px;
	}

	.ms-service-benefits-v1__panel-title {
		font-size: 19px;
	}

	.ms-service-benefits-v1__item {
		gap: 9px;
		grid-template-columns: 26px minmax(0, 1fr);
		padding: 12px 0;
	}

	.ms-service-benefits-v1__item-mark {
		height: 24px;
		width: 24px;
	}

	.ms-service-benefits-v1__item-text {
		font-size: 14px;
	}
}

/* =====================================================================
 * Service audience v1 (向いている人・向いていない人)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-audience rules it replaced have been removed.
 * ================================================================== */

.ms-service-audience-v1 {
	--audience-navy: #163455;
	--audience-text: #304860;
	--audience-muted: #64717f;

	--audience-coral: #c74e4a;

	--audience-fit-bg: #fff9f7;
	--audience-fit-border: #efdfd8;

	--audience-less-bg: #f8fafc;
	--audience-less-border: #dde5ec;

	--audience-border: #e5eaf0;

	width: 100%;
}

.ms-service-audience-v1__inner {
	background: #fff;
	border: 1px solid var(--audience-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-audience-v1__heading {
	margin-bottom: 20px;
}

.ms-service-audience-v1__eyebrow {
	color: var(--audience-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-audience-v1__title {
	color: var(--audience-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Grid ------------------------------------------------------------------- */

.ms-service-audience-v1__grid {
	display: grid;
	gap: 16px;
}

.ms-service-audience-v1__grid--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Only one side recorded: capped rather than stretched, so a single panel does
 * not read as a row with a card missing from it. */
.ms-service-audience-v1__grid--count-1 {
	grid-template-columns: minmax(0, 760px);
}

/* Panel ------------------------------------------------------------------ */

.ms-service-audience-v1__panel {
	border-radius: 16px;
	min-width: 0;
	padding: 22px;
}

.ms-service-audience-v1__panel--fit {
	background: linear-gradient(145deg, #fffdfc 0%, var(--audience-fit-bg) 100%);
	border: 1px solid var(--audience-fit-border);
}

.ms-service-audience-v1__panel--less-fit {
	background: linear-gradient(145deg, #ffffff 0%, var(--audience-less-bg) 100%);
	border: 1px solid var(--audience-less-border);
}

.ms-service-audience-v1__panel-heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 18px;
}

.ms-service-audience-v1__panel-icon {
	border-radius: 14px;
	display: grid;
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 850;
	height: 44px;
	place-items: center;
	width: 44px;
}

.ms-service-audience-v1__panel-icon--fit {
	background: #fdebea;
	color: #c34d49;
}

.ms-service-audience-v1__panel-icon--less-fit {
	background: #edf2f6;
	color: #536c84;
}

.ms-service-audience-v1__panel-eyebrow {
	color: var(--audience-muted);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-audience-v1__panel-title {
	color: var(--audience-navy);
	font-size: 20px;
	font-weight: 850;
	line-height: 1.45;
	margin: 0;
	overflow-wrap: anywhere;
}

/* List ------------------------------------------------------------------- */

.ms-service-audience-v1__list {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-audience-v1__item {
	align-items: start;
	border-top: 1px solid rgba(22, 52, 85, 0.075);
	display: grid;
	gap: 10px;
	grid-template-columns: 28px minmax(0, 1fr);
	padding: 13px 0;
}

.ms-service-audience-v1__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.ms-service-audience-v1__item-mark {
	border-radius: 50%;
	display: grid;
	font-size: 12px;
	font-weight: 850;
	height: 26px;
	margin-top: 1px;
	place-items: center;
	width: 26px;
}

.ms-service-audience-v1__item-mark--fit {
	background: #ffefed;
	color: #c34d49;
}

.ms-service-audience-v1__item-mark--less-fit {
	background: #edf2f6;
	color: #536c84;
}

.ms-service-audience-v1__item-text {
	color: var(--audience-navy);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ms-service-audience-v1__grid--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-audience-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-audience-v1__title {
		font-size: 22px;
	}

	.ms-service-audience-v1__grid {
		gap: 12px;
		grid-template-columns: 1fr;
	}

	.ms-service-audience-v1__panel {
		padding: 17px;
	}

	.ms-service-audience-v1__panel-heading {
		margin-bottom: 14px;
	}

	.ms-service-audience-v1__panel-icon {
		border-radius: 13px;
		font-size: 16px;
		height: 40px;
		width: 40px;
	}

	.ms-service-audience-v1__panel-title {
		font-size: 18px;
	}

	.ms-service-audience-v1__item {
		gap: 9px;
		grid-template-columns: 26px minmax(0, 1fr);
		padding: 12px 0;
	}

	.ms-service-audience-v1__item-mark {
		height: 24px;
		width: 24px;
	}

	.ms-service-audience-v1__item-text {
		font-size: 14px;
	}
}

/* =====================================================================
 * Service registration v1 (登録方法)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-registration rules it replaced have been removed.
 *
 * Three additions to the approved sheet, each because the record carries
 * something the mock had no slot for: a step note (prose, so a paragraph
 * rather than one of the meta chips), the disclosure that holds the steps'
 * own screenshots, and the meta-only evidence variant the DEV-22 contract
 * needs. The approved `__step-label` and `__step-meta` rules are kept even
 * though nothing emits them — there is no stored label or duration to put in
 * them, and inventing one is exactly what this section must not do.
 * ================================================================== */

.ms-service-registration-v1 {
	--registration-navy: #163455;
	--registration-text: #425972;
	--registration-muted: #64717f;

	--registration-coral: #c74e4a;
	--registration-coral-soft: #fff0ee;

	--registration-border: #e5eaf0;
	--registration-border-soft: #edf0f4;

	width: 100%;
}

.ms-service-registration-v1__inner {
	background: #fff;
	border: 1px solid var(--registration-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-registration-v1__heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.ms-service-registration-v1__heading-icon {
	background: linear-gradient(145deg, #ff7770 0%, #f55f5b 100%);
	border-radius: 14px;
	color: #fff;
	display: grid;
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-registration-v1__eyebrow {
	color: var(--registration-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-registration-v1__title {
	color: var(--registration-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Intro ------------------------------------------------------------------ */

.ms-service-registration-v1__intro {
	color: var(--registration-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	margin: -4px 0 20px;
	max-width: 820px;
}

/* Steps ------------------------------------------------------------------ */

.ms-service-registration-v1__steps {
	counter-reset: none;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-registration-v1__step {
	background: linear-gradient(150deg, #ffffff 0%, #fbfcfd 100%);
	border: 1px solid var(--registration-border);
	border-radius: 16px;
	min-width: 0;
	padding: 20px;
	position: relative;
}

.ms-service-registration-v1__step-top {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 14px;
}

.ms-service-registration-v1__step-number {
	align-items: center;
	background: var(--registration-coral-soft);
	border-radius: 999px;
	/*
	 * #c34d49 as approved measured 4.23:1 on its own #fff0ee pill, and the
	 * number is 12px bold text a reader actually reads. Darkened by the least
	 * that clears 4.5:1; the pill background is unchanged.
	 */
	color: #bc4642;
	display: inline-flex;
	font-size: 12px;
	font-weight: 850;
	height: 30px;
	justify-content: center;
	letter-spacing: 0.04em;
	line-height: 1;
	min-width: 42px;
	padding-inline: 10px;
}

.ms-service-registration-v1__step-label {
	color: var(--registration-muted);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	text-align: right;
}

.ms-service-registration-v1__step-title {
	color: var(--registration-navy);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.ms-service-registration-v1__step-description {
	color: var(--registration-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.75;
	margin: 0;
	overflow-wrap: anywhere;
}

/* The step's own note: a sentence, so a paragraph rather than a chip. */
.ms-service-registration-v1__step-note {
	border-top: 1px solid var(--registration-border-soft);
	color: var(--registration-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	margin: 12px 0 0;
	overflow-wrap: anywhere;
	padding-top: 10px;
}

/* Optional step subdata --------------------------------------------------- */

.ms-service-registration-v1__step-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-top: 12px;
}

.ms-service-registration-v1__step-meta-item {
	align-items: center;
	background: #f2f5f7;
	border-radius: 999px;
	color: #586b80;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	min-height: 28px;
	padding: 4px 9px;
}

/* Note ------------------------------------------------------------------- */

.ms-service-registration-v1__note {
	background: #fff9f7;
	border: 1px solid #f0dfdb;
	border-radius: 14px;
	margin-top: 18px;
	padding: 18px;
}

.ms-service-registration-v1__note-heading {
	align-items: center;
	display: flex;
	gap: 9px;
	margin-bottom: 7px;
}

.ms-service-registration-v1__note-icon {
	background: #fdeae8;
	border-radius: 10px;
	color: #c64d49;
	display: grid;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 850;
	height: 30px;
	place-items: center;
	width: 30px;
}

.ms-service-registration-v1__note-title {
	color: var(--registration-navy);
	font-size: 14px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0;
}

.ms-service-registration-v1__note-text {
	color: var(--registration-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.75;
	margin: 0;
}

/* The steps that did not fit the first two rows --------------------------- */

.ms-service-registration-v1__more {
	margin-top: 14px;
}

.ms-service-registration-v1__steps--rest {
	margin-top: 14px;
}

/* Step screenshots ------------------------------------------------------- */

/*
 * Every stored capture, its source and its date — behind one tap, because
 * twenty of them printed inline is the wall this layout replaced.
 */
.ms-service-registration-v1__shots {
	margin-top: 16px;
}

.ms-service-registration-v1__more-trigger,
.ms-service-registration-v1__shots-trigger {
	align-items: center;
	background: #fff;
	border: 1px solid var(--registration-border);
	border-radius: 12px;
	color: #52667c;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 750;
	justify-content: center;
	line-height: 1.4;
	list-style: none;
	min-height: 44px;
	padding: 9px 14px;
}

.ms-service-registration-v1__more-trigger::-webkit-details-marker,
.ms-service-registration-v1__shots-trigger::-webkit-details-marker {
	display: none;
}

.ms-service-registration-v1__more-trigger::after,
.ms-service-registration-v1__shots-trigger::after {
	color: #758396;
	content: "+";
	font-size: 16px;
	font-weight: 700;
	margin-left: 8px;
}

.ms-service-registration-v1__more[open] .ms-service-registration-v1__more-trigger::after,
.ms-service-registration-v1__shots[open] .ms-service-registration-v1__shots-trigger::after {
	content: "−";
}

.ms-service-registration-v1__shots-list {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.ms-service-registration-v1__shot {
	border: 1px solid var(--registration-border-soft);
	border-radius: 14px;
	min-width: 0;
	padding: 14px;
}

.ms-service-registration-v1__shot-step {
	align-items: center;
	display: flex;
	gap: 9px;
	margin: 0 0 10px;
}

.ms-service-registration-v1__shot-title {
	color: var(--registration-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.ms-service-registration-v1__shot-media {
	align-items: center;
	background: #f8fafc;
	border-radius: 11px;
	display: flex;
	justify-content: center;
	margin: 0 0 10px;
	padding: 10px;
}

.ms-service-registration-v1__shot-media img {
	border-radius: 8px;
	display: block;
	height: auto;
	max-height: 220px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.ms-service-registration-v1__shot-meta {
	color: var(--registration-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.65;
}

/* Evidence --------------------------------------------------------------- */

.ms-service-registration-v1__evidence {
	background: #fff;
	border: 1px solid var(--registration-border);
	border-radius: 15px;
	margin-top: 18px;
	padding: 18px;
}

.ms-service-registration-v1__evidence-heading {
	align-items: center;
	display: flex;
	gap: 9px;
	margin-bottom: 14px;
}

.ms-service-registration-v1__evidence-icon {
	background: #edf2f6;
	border-radius: 10px;
	color: #536b83;
	display: grid;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 850;
	height: 32px;
	place-items: center;
	width: 32px;
}

.ms-service-registration-v1__evidence-title {
	color: var(--registration-navy);
	font-size: 15px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0;
}

.ms-service-registration-v1__evidence-body {
	align-items: center;
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
}

/* A source and a date with no usable picture: the column goes, the card stays. */
.ms-service-registration-v1__evidence-body--meta-only {
	grid-template-columns: minmax(0, 1fr);
}

.ms-service-registration-v1__evidence-media {
	align-items: center;
	background: #f8fafc;
	border: 1px solid var(--registration-border-soft);
	border-radius: 13px;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 12px;
}

.ms-service-registration-v1__evidence-media img {
	border-radius: 9px;
	display: block;
	height: auto;
	max-height: 280px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.ms-service-registration-v1__evidence-meta {
	color: var(--registration-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	min-width: 0;
}

.ms-service-registration-v1__media-caption,
.ms-service-registration-v1__media-source,
.ms-service-registration-v1__media-verified {
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.ms-service-registration-v1__media-verified:last-child,
.ms-service-registration-v1__media-source:last-child,
.ms-service-registration-v1__media-caption:last-child {
	margin-bottom: 0;
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ms-service-registration-v1__steps,
	.ms-service-registration-v1__shots-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-registration-v1__evidence-body {
		grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
	}

	.ms-service-registration-v1__evidence-body--meta-only {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-registration-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-registration-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-registration-v1__heading-icon {
		height: 40px;
		width: 40px;
	}

	.ms-service-registration-v1__title {
		font-size: 22px;
	}

	.ms-service-registration-v1__intro {
		font-size: 14px;
		margin-bottom: 16px;
	}

	.ms-service-registration-v1__steps,
	.ms-service-registration-v1__shots-list {
		gap: 10px;
		grid-template-columns: 1fr;
	}

	.ms-service-registration-v1__step {
		padding: 17px;
	}

	.ms-service-registration-v1__step-top {
		margin-bottom: 11px;
	}

	.ms-service-registration-v1__step-title {
		font-size: 16px;
	}

	.ms-service-registration-v1__note {
		margin-top: 14px;
		padding: 16px;
	}

	.ms-service-registration-v1__evidence {
		margin-top: 14px;
		padding: 16px;
	}

	.ms-service-registration-v1__evidence-body {
		gap: 14px;
		grid-template-columns: 1fr;
	}

	.ms-service-registration-v1__evidence-media img {
		max-height: 250px;
	}

	.ms-service-registration-v1__shot-media img {
		max-height: 250px;
	}
}

/* =====================================================================
 * Service reviews v1 (口コミ・評判)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-reviews / .ms-review-card rules it replaced have been removed.
 *
 * Additions to the approved sheet, each because the record carries something
 * the mock had no slot for and dropping it would change what the section
 * claims: the kind-of-text label (編集部要約 / 口コミより一部引用), the
 * sentiment label, the editors' own summary and sample size above the chips,
 * the per-entry note, the per-entry check date, and the line stating how many
 * of the recorded reviews are on the page.
 * ================================================================== */

.ms-service-reviews-v1 {
	--reviews-navy: #163455;
	--reviews-text: #425972;
	--reviews-muted: #64717f;

	--reviews-coral: #c74e4a;
	--reviews-coral-soft: #fff0ee;

	--reviews-border: #e5eaf0;
	--reviews-border-soft: #edf0f4;

	--reviews-gold: #b87917;

	width: 100%;
}

.ms-service-reviews-v1__inner {
	background: #fff;
	border: 1px solid var(--reviews-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-reviews-v1__heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.ms-service-reviews-v1__heading-icon {
	background: linear-gradient(145deg, #ff7770 0%, #f55f5b 100%);
	border-radius: 14px;
	color: #fff;
	display: grid;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-reviews-v1__eyebrow {
	color: var(--reviews-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-reviews-v1__title {
	color: var(--reviews-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Category summary ------------------------------------------------------- */

.ms-service-reviews-v1__summary {
	background: #f8fafc;
	border: 1px solid var(--reviews-border);
	border-radius: 15px;
	margin-bottom: 18px;
	padding: 18px;
}

.ms-service-reviews-v1__summary-heading {
	color: var(--reviews-navy);
	font-size: 14px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0 0 12px;
}

/* The editors' reading of what they read, and how much of it. */
.ms-service-reviews-v1__summary-text {
	color: var(--reviews-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.8;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.ms-service-reviews-v1__sample {
	color: var(--reviews-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.6;
	margin: 0 0 12px;
}

.ms-service-reviews-v1__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-reviews-v1__category {
	align-items: center;
	background: #fff;
	border: 1px solid #e0e7ee;
	border-radius: 999px;
	color: #415a73;
	display: inline-flex;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.4;
	min-height: 32px;
	padding: 6px 11px;
}

.ms-service-reviews-v1__category-count {
	color: var(--reviews-navy);
	margin-left: 6px;
}

.ms-service-reviews-v1__summary-note {
	color: var(--reviews-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	margin: 11px 0 0;
}

.ms-service-reviews-v1__survey-note {
	color: var(--reviews-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	margin: 10px 0 0;
	overflow-wrap: anywhere;
}

/* Reviews grid ----------------------------------------------------------- */

.ms-service-reviews-v1__list {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Review card ------------------------------------------------------------ */

.ms-service-reviews-v1__card {
	background: linear-gradient(150deg, #ffffff 0%, #fbfcfd 100%);
	border: 1px solid var(--reviews-border);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px;
}

.ms-service-reviews-v1__card-top {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 13px;
}

.ms-service-reviews-v1__card-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

/*
 * Where the entry came from, as a classification. Quieter than the source name
 * beside it on purpose: the name is the citation a reader checks, the type is
 * only a shelf label, and two identically loud pills would read as two claims.
 */
.ms-service-reviews-v1__origin {
	align-items: center;
	background: #fff;
	border: 1px solid var(--reviews-border);
	border-radius: 999px;
	color: #5c6b7c;
	display: inline-flex;
	font-size: 11px;
	font-weight: 750;
	line-height: 1.3;
	min-height: 28px;
	overflow-wrap: anywhere;
	padding: 5px 9px;
}

.ms-service-reviews-v1__source {
	align-items: center;
	background: #eef2f6;
	border-radius: 999px;
	color: #455c73;
	display: inline-flex;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	min-height: 28px;
	overflow-wrap: anywhere;
	padding: 5px 9px;
}

/*
 * Whose words these are. An editors' summary and a reviewer's own sentence
 * look alike on a page and are not the same claim, so the card says which.
 */
.ms-service-reviews-v1__type {
	align-items: center;
	background: #f2f5f7;
	border-radius: 999px;
	color: #4f6479;
	display: inline-flex;
	font-size: 11px;
	font-weight: 750;
	line-height: 1.3;
	min-height: 28px;
	padding: 5px 9px;
}

.ms-service-reviews-v1__type--quote {
	background: #fff;
	border: 1px solid #dde5ec;
}

/*
 * The editors' reading of a review, third in the row and third in weight:
 * where the text came from, then whose words it is, then how it was filed.
 * Muted deliberately — a red chip beside a review argues the verdict before
 * the sentence has been read, and a green one reads like something to click.
 * The colours are held apart only enough to be told apart; the word is what
 * carries the meaning, which is why it is never replaced by an icon.
 */
.ms-service-reviews-v1__mood {
	align-items: center;
	/*
	 * Centred rather than stretched: the row is a flex line, so without this
	 * the smaller padding buys nothing and the chip stays the height of the
	 * source beside it.
	 */
	align-self: center;
	background: #f2f4f6;
	border-radius: 999px;
	color: #637184;
	display: inline-flex;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.3;
	min-height: 0;
	padding: 4px 8px;
}

.ms-service-reviews-v1__mood--positive {
	background: #f0f7f4;
	color: #497565;
}

.ms-service-reviews-v1__mood--negative {
	background: #faf1f1;
	color: #8a5b5b;
}

.ms-service-reviews-v1__mood--mixed {
	background: #f8f4ea;
	color: #76684f;
}

.ms-service-reviews-v1__date {
	color: var(--reviews-muted);
	flex: none;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.5;
	margin: 0;
	text-align: right;
}

/* Rating ----------------------------------------------------------------- */

.ms-service-reviews-v1__rating {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0 0 13px;
}

.ms-service-reviews-v1__stars {
	color: var(--reviews-gold);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1;
}

.ms-service-reviews-v1__rating-text {
	color: #596c80;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

/* Review body ------------------------------------------------------------ */

/*
 * The reviewer's own headline. It is the loudest line on the card because the
 * reviewer wrote it; nothing on this page ever generates one.
 */
.ms-service-reviews-v1__card-title {
	color: var(--reviews-navy);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
	/* The card is a flex column with no gap: each row owns its own spacing. */
	margin: 0 0 11px;
	overflow-wrap: anywhere;
}

/* Who published it, where the record has a name. Optional everywhere. */
.ms-service-reviews-v1__author {
	color: var(--reviews-muted);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.6;
	margin: 10px 0 0;
	overflow-wrap: anywhere;
}

.ms-service-reviews-v1__body {
	color: var(--reviews-navy);
	font-size: 14px;
	font-weight: 550;
	line-height: 1.8;
	margin: 0;
	overflow-wrap: anywhere;
}

/* A quotation is marked as one rather than styled like the editors' prose. */
.ms-service-reviews-v1__body--quote {
	border-left: 3px solid #dde5ec;
	padding-left: 12px;
}

.ms-service-reviews-v1__note {
	color: var(--reviews-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	margin: 12px 0 0;
	overflow-wrap: anywhere;
}

.ms-service-reviews-v1__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: auto 0 0;
	padding-top: 16px;
}

.ms-service-reviews-v1__source-link {
	align-items: center;
	color: #536a82;
	display: inline-flex;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.4;
	min-height: 34px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ms-service-reviews-v1__source-link:hover {
	text-decoration-thickness: 2px;
}

/* The day the entry was checked, kept apart from the day it was posted. */
.ms-service-reviews-v1__verified {
	align-items: center;
	color: var(--reviews-muted);
	display: inline-flex;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.4;
	min-height: 34px;
}

/* Details / more --------------------------------------------------------- */

.ms-service-reviews-v1__more {
	margin-top: 14px;
}

.ms-service-reviews-v1__more-trigger {
	align-items: center;
	background: #fff;
	border: 1px solid var(--reviews-border);
	border-radius: 12px;
	color: #52667c;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 750;
	justify-content: center;
	line-height: 1.4;
	list-style: none;
	min-height: 44px;
	padding: 9px 14px;
	width: 100%;
}

.ms-service-reviews-v1__more-trigger::-webkit-details-marker {
	display: none;
}

.ms-service-reviews-v1__more-trigger::after {
	color: #758396;
	content: "+";
	font-size: 16px;
	font-weight: 700;
	margin-left: 8px;
}

.ms-service-reviews-v1__more[open] .ms-service-reviews-v1__more-trigger::after {
	content: "−";
}

.ms-service-reviews-v1__more-list {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 14px;
}

/* How much of the record is on the page. */
.ms-service-reviews-v1__coverage {
	color: var(--reviews-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	margin: 14px 0 0;
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ms-service-reviews-v1__list,
	.ms-service-reviews-v1__more-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-reviews-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-reviews-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-reviews-v1__heading-icon {
		height: 40px;
		width: 40px;
	}

	.ms-service-reviews-v1__title {
		font-size: 22px;
	}

	.ms-service-reviews-v1__summary {
		margin-bottom: 14px;
		padding: 15px;
	}

	.ms-service-reviews-v1__list,
	.ms-service-reviews-v1__more-list {
		gap: 10px;
		grid-template-columns: 1fr;
	}

	.ms-service-reviews-v1__card {
		padding: 17px;
	}

	.ms-service-reviews-v1__card-top {
		gap: 8px;
		margin-bottom: 11px;
	}

	.ms-service-reviews-v1__body {
		font-size: 14px;
	}
}

/* =====================================================================
 * Service editorial review v1 (編集部レビュー)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-review rules it replaced have been removed.
 *
 * Additions to the approved sheet: a scale beside each criterion score (the
 * number needs its denominator to be a claim rather than a figure), a
 * one-column modifier for a single criterion, and the footnote rows that hold
 * the methodology text, its link and the assessment date — data the record
 * carries and the mock had no slot for.
 * ================================================================== */

.ms-service-editorial-v1 {
	--editorial-navy: #163455;
	--editorial-text: #425972;
	--editorial-muted: #64717f;

	--editorial-coral: #c74e4a;
	--editorial-coral-soft: #fff0ee;

	--editorial-border: #e5eaf0;
	--editorial-border-soft: #edf0f4;

	width: 100%;
}

.ms-service-editorial-v1__inner {
	background: #fff;
	border: 1px solid var(--editorial-border);
	border-radius: 18px;
	margin-inline: auto;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-editorial-v1__heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.ms-service-editorial-v1__heading-icon {
	background: linear-gradient(145deg, #ff7770 0%, #f55f5b 100%);
	border-radius: 14px;
	color: #fff;
	display: grid;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-editorial-v1__eyebrow {
	color: var(--editorial-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-editorial-v1__title {
	color: var(--editorial-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Overview --------------------------------------------------------------- */

.ms-service-editorial-v1__overview {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.6fr);
	margin-bottom: 18px;
}

.ms-service-editorial-v1__overview--score-only {
	grid-template-columns: minmax(230px, 360px);
}

.ms-service-editorial-v1__overview--summary-only {
	grid-template-columns: minmax(0, 1fr);
}

/* Score card ------------------------------------------------------------- */

.ms-service-editorial-v1__score-card {
	align-items: center;
	background: linear-gradient(150deg, #fffafa 0%, #fff4f2 100%);
	border: 1px solid #f0d8d5;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 190px;
	padding: 22px;
	text-align: center;
}

.ms-service-editorial-v1__score-eyebrow {
	color: var(--editorial-muted);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	margin: 0 0 9px;
}

.ms-service-editorial-v1__score-wrap {
	align-items: baseline;
	display: flex;
	gap: 6px;
	justify-content: center;
	margin: 0;
}

.ms-service-editorial-v1__score {
	color: #ef5e59;
	font-size: 44px;
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1;
}

.ms-service-editorial-v1__score-scale {
	/*
	 * #68788b as approved measured 4.19:1 on the score card's own tint, and
	 * "/ 5" is 13px body text. Darkened by the least that clears 4.5:1 there
	 * and on the criterion card; the tints are unchanged.
	 */
	color: #627285;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.ms-service-editorial-v1__score-label {
	color: var(--editorial-navy);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 10px 0 0;
}

/* Summary card ----------------------------------------------------------- */

.ms-service-editorial-v1__summary-card {
	background: #fbfcfd;
	border: 1px solid var(--editorial-border);
	border-radius: 16px;
	min-width: 0;
	padding: 22px;
}

.ms-service-editorial-v1__summary-title {
	color: var(--editorial-navy);
	font-size: 18px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0 0 10px;
}

.ms-service-editorial-v1__summary-text {
	color: var(--editorial-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.85;
	overflow-wrap: anywhere;
}

.ms-service-editorial-v1__summary-text p {
	margin: 0 0 10px;
}

.ms-service-editorial-v1__summary-text p:last-child {
	margin-bottom: 0;
}

/* Criteria --------------------------------------------------------------- */

.ms-service-editorial-v1__criteria {
	background: #fff;
	border: 1px solid var(--editorial-border);
	border-radius: 16px;
	padding: 20px;
}

.ms-service-editorial-v1__criteria-heading {
	margin-bottom: 14px;
}

.ms-service-editorial-v1__criteria-eyebrow {
	color: var(--editorial-coral);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-editorial-v1__criteria-title {
	color: var(--editorial-navy);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0;
}

.ms-service-editorial-v1__criteria-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A single criterion is held to a readable width rather than stretched. */
.ms-service-editorial-v1__criteria-grid--count-1 {
	grid-template-columns: minmax(0, 760px);
}

.ms-service-editorial-v1__criterion {
	background: #f9fbfc;
	border: 1px solid var(--editorial-border-soft);
	border-radius: 13px;
	min-width: 0;
	padding: 16px;
}

.ms-service-editorial-v1__criterion-top {
	align-items: baseline;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.ms-service-editorial-v1__criterion-label {
	color: var(--editorial-navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-editorial-v1__criterion-score {
	/* #d95450 as approved measured 3.79:1 on #f9fbfc and the score is text a
	 * reader has to read, so it needs 4.5:1. */
	color: #cb4642;
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 850;
	line-height: 1.3;
}

/* The denominator, so the figure is a claim rather than a loose number. */
.ms-service-editorial-v1__criterion-scale {
	color: #627285;
	font-size: 11px;
	font-weight: 700;
	margin-left: 2px;
}

/* Criterion bar ---------------------------------------------------------- */

.ms-service-editorial-v1__criterion-bar {
	background: #edf1f4;
	border-radius: 999px;
	display: block;
	height: 6px;
	margin-top: 10px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.ms-service-editorial-v1__criterion-bar-fill {
	background: linear-gradient(90deg, #ff817a 0%, #f5635e 100%);
	border-radius: inherit;
	display: block;
	height: 100%;
}

.ms-service-editorial-v1__criterion-description {
	color: var(--editorial-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	margin: 10px 0 0;
	overflow-wrap: anywhere;
}

/* Methodology and date --------------------------------------------------- */

.ms-service-editorial-v1__meta {
	border-top: 1px solid var(--editorial-border-soft);
	color: var(--editorial-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	margin-top: 14px;
	padding-top: 14px;
}

.ms-service-editorial-v1__meta-text {
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-editorial-v1__meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 6px 0 0;
}

.ms-service-editorial-v1__meta-row:first-child {
	margin-top: 0;
}

.ms-service-editorial-v1__meta-link {
	align-items: center;
	color: #536a82;
	display: inline-flex;
	font-weight: 750;
	min-height: 30px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ms-service-editorial-v1__meta-date {
	align-items: center;
	display: inline-flex;
	min-height: 30px;
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ms-service-editorial-v1__criteria-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-editorial-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-editorial-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-editorial-v1__heading-icon {
		height: 40px;
		width: 40px;
	}

	.ms-service-editorial-v1__title {
		font-size: 22px;
	}

	.ms-service-editorial-v1__overview,
	.ms-service-editorial-v1__overview--score-only,
	.ms-service-editorial-v1__overview--summary-only {
		gap: 12px;
		grid-template-columns: 1fr;
		margin-bottom: 14px;
	}

	.ms-service-editorial-v1__score-card {
		min-height: 150px;
		padding: 18px;
	}

	.ms-service-editorial-v1__score {
		font-size: 38px;
	}

	.ms-service-editorial-v1__summary-card {
		padding: 18px;
	}

	.ms-service-editorial-v1__summary-title {
		font-size: 17px;
	}

	.ms-service-editorial-v1__criteria {
		padding: 17px;
	}

	.ms-service-editorial-v1__criteria-grid,
	.ms-service-editorial-v1__criteria-grid--count-1 {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * Service comparison v1 (他サービスと比較)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-compare rules it replaced have been removed. The comparison page keeps
 * its own .ms-compare styles in comparison.css.
 *
 * Additions to the approved sheet, each for data the record carries and the
 * mock had no slot for: a column logo, a status line for a paused or
 * discontinued service, the feature list cell (the comparison layer returns an
 * array for 主な特徴), the scale beside a rating, the "表示中のページ" wording
 * in the current column, and the internal link to the comparison page that
 * DEV-25 already offered.
 * ================================================================== */

.ms-service-comparison-v1 {
	/*
	 * The page body is a flex column, and a flex item will not shrink below its
	 * content's minimum width unless told to. Without this the 820px table
	 * inside the scroller widens the whole column, and the sections either side
	 * of it — which are simply width:100% — start overflowing the viewport.
	 */
	min-width: 0;

	--comparison-navy: #163455;
	--comparison-text: #425972;
	--comparison-muted: #64717f;

	--comparison-coral: #c74e4a;
	--comparison-coral-soft: #fff2f0;

	--comparison-border: #e3e9ef;
	--comparison-border-soft: #edf1f4;

	width: 100%;
}

.ms-service-comparison-v1__inner {
	background: #fff;
	border: 1px solid var(--comparison-border);
	border-radius: 18px;
	margin-inline: auto;
	min-width: 0;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-comparison-v1__heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.ms-service-comparison-v1__heading-icon {
	background: linear-gradient(145deg, #ff7770 0%, #f55f5b 100%);
	border-radius: 14px;
	color: #fff;
	display: grid;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-comparison-v1__eyebrow {
	color: var(--comparison-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-comparison-v1__title {
	color: var(--comparison-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Intro ------------------------------------------------------------------ */

.ms-service-comparison-v1__intro {
	color: var(--comparison-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	margin: -4px 0 18px;
	max-width: 820px;
}

/* Scroll wrapper --------------------------------------------------------- */

.ms-service-comparison-v1__scroll {
	-webkit-overflow-scrolling: touch;
	/* Paint-contained so the table it scrolls can never be measured as part of
	 * the page's own width (DEV-25). */
	contain: paint;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--comparison-border);
	border-radius: 16px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	width: 100%;
}

.ms-service-comparison-v1__scroll:focus-visible {
	outline: 3px solid rgba(22, 52, 85, 0.2);
	outline-offset: 3px;
}

/* Table ------------------------------------------------------------------ */

.ms-service-comparison-v1__table {
	border-collapse: separate;
	border-spacing: 0;
	color: var(--comparison-navy);
	min-width: 820px;
	width: 100%;
}

.ms-service-comparison-v1__table thead th {
	background: #f8fafc;
	border-bottom: 1px solid var(--comparison-border);
	padding: 18px 16px;
	vertical-align: top;
}

.ms-service-comparison-v1__label-head {
	color: var(--comparison-muted);
	font-size: 12px;
	font-weight: 750;
	text-align: left;
	width: 160px;
}

.ms-service-comparison-v1__service-head {
	min-width: 210px;
	text-align: left;
}

/* Where the reader is, not a recommendation: the tint only repeats what the
 * badge already says in words. */
.ms-service-comparison-v1__service-head--current {
	background: linear-gradient(180deg, #fff7f5 0%, #fffaf9 100%) !important;
}

.ms-service-comparison-v1__current-badge {
	align-items: center;
	background: #fde9e7;
	border-radius: 999px;
	color: #b0443f;
	display: inline-flex;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.3;
	margin-bottom: 7px;
	min-height: 24px;
	padding: 4px 8px;
}

/* The column's own logo, when the record has one. */
.ms-service-comparison-v1__service-logo {
	display: block;
	margin-bottom: 7px;
}

.ms-service-comparison-v1__service-logo img {
	border-radius: 8px;
	display: block;
	height: auto;
	max-height: 32px;
	max-width: 88px;
	object-fit: contain;
	width: auto;
}

.ms-service-comparison-v1__service-name {
	color: var(--comparison-navy);
	display: block;
	font-size: 15px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-comparison-v1__service-name a {
	color: inherit;
	text-decoration: none;
}

.ms-service-comparison-v1__service-name a:hover,
.ms-service-comparison-v1__service-name a:focus-visible {
	text-decoration: underline;
}

/* A paused or discontinued service says so in its own column. */
.ms-service-comparison-v1__service-status {
	color: var(--comparison-muted);
	display: block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	margin-top: 5px;
}

/* Body ------------------------------------------------------------------- */

.ms-service-comparison-v1__table tbody th,
.ms-service-comparison-v1__table tbody td {
	border-bottom: 1px solid var(--comparison-border-soft);
	padding: 15px 16px;
	vertical-align: middle;
}

.ms-service-comparison-v1__table tbody tr:last-child th,
.ms-service-comparison-v1__table tbody tr:last-child td {
	border-bottom: 0;
}

.ms-service-comparison-v1__row-label {
	background: #fbfcfd;
	color: var(--comparison-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	text-align: left;
}

.ms-service-comparison-v1__value {
	color: var(--comparison-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.ms-service-comparison-v1__value--current {
	background: #fffafa;
}

/* The comparison layer returns 主な特徴 as a list, so the cell is one. */
.ms-service-comparison-v1__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-comparison-v1__list li + li {
	margin-top: 5px;
}

/* A stored figure and its scale. Nothing here is averaged or compared. */
.ms-service-comparison-v1__rating strong {
	color: var(--comparison-navy);
	font-size: 15px;
	font-weight: 850;
}

.ms-service-comparison-v1__rating-scale {
	color: var(--comparison-muted);
	font-size: 11px;
	font-weight: 700;
	margin-left: 2px;
}

/* Status ----------------------------------------------------------------- */

.ms-service-comparison-v1__status {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	min-height: 28px;
	padding: 4px 9px;
}

.ms-service-comparison-v1__status--yes {
	background: #edf8f3;
	color: #24775e;
}

.ms-service-comparison-v1__status--no {
	background: #fff0f0;
	color: #b84b4b;
}

.ms-service-comparison-v1__status--unknown {
	background: #f3f5f7;
	color: #626f80;
}

/* Internal link ---------------------------------------------------------- */

.ms-service-comparison-v1__detail-link {
	align-items: center;
	background: #fff;
	border: 1px solid #dce4eb;
	border-radius: 10px;
	color: #375773;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	justify-content: center;
	line-height: 1.4;
	min-height: 38px;
	padding: 7px 12px;
	text-decoration: none;
}

.ms-service-comparison-v1__detail-link:hover {
	background: #f5f8fa;
}

.ms-service-comparison-v1__detail-link:focus-visible {
	outline: 3px solid rgba(22, 52, 85, 0.18);
	outline-offset: 2px;
}

/* The current column carries words, not a dash: a dash would read as missing. */
.ms-service-comparison-v1__self {
	color: var(--comparison-muted);
	font-size: 12px;
	font-weight: 700;
}

/* Note and comparison page link ------------------------------------------ */

.ms-service-comparison-v1__note {
	color: var(--comparison-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	margin: 12px 0 0;
}

.ms-service-comparison-v1__more {
	margin: 14px 0 0;
}

.ms-service-comparison-v1__more-link {
	align-items: center;
	background: #fff;
	border: 1px solid #dce4eb;
	border-radius: 12px;
	color: #375773;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	justify-content: center;
	line-height: 1.4;
	min-height: 44px;
	padding: 10px 18px;
	text-decoration: none;
}

.ms-service-comparison-v1__more-link:hover {
	background: #f5f8fa;
}

/* Desktop ---------------------------------------------------------------- */

/* The hint is for a screen the table does not fit; it is not one on a desktop. */
@media (min-width: 768px) {
	.ms-service-comparison-v1__note {
		display: none;
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-comparison-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-comparison-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-comparison-v1__heading-icon {
		height: 40px;
		width: 40px;
	}

	.ms-service-comparison-v1__title {
		font-size: 22px;
	}

	.ms-service-comparison-v1__intro {
		font-size: 14px;
		margin-bottom: 14px;
	}

	.ms-service-comparison-v1__table thead th {
		padding: 15px 13px;
	}

	.ms-service-comparison-v1__table tbody th,
	.ms-service-comparison-v1__table tbody td {
		padding: 13px;
	}

	.ms-service-comparison-v1__label-head {
		width: 130px;
	}

	.ms-service-comparison-v1__service-head {
		min-width: 190px;
	}
}

/* =====================================================================
 * Service basic info v1 (基本情報)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-service-info rules it replaced have been removed.
 *
 * Two notes on what the record actually holds. The approved sheet has a
 * tri-state pill, but this table's fields are text, a market list, a price
 * string, a URL and a date — あり / なし / 不明 live in the safety record, and
 * copying them here is exactly what this section must not do, so
 * `__status` is kept for a future field and currently renders on nothing.
 * The border clean-up is driven by a `--last-row` class from the template
 * rather than nth-child arithmetic, because the row count changes per service.
 * ================================================================== */

.ms-service-basic-v1 {
	--basic-navy: #163455;
	--basic-text: #425972;
	--basic-muted: #64717f;

	--basic-coral: #c74e4a;

	--basic-border: #e5eaf0;
	--basic-border-soft: #edf1f4;

	min-width: 0;
	width: 100%;
}

.ms-service-basic-v1__inner {
	background: #fff;
	border: 1px solid var(--basic-border);
	border-radius: 18px;
	margin-inline: auto;
	min-width: 0;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-basic-v1__heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

/* Neutral, not coral: this section is a reference table, and its heading badge
 * should not compete with the sections that carry the argument. */
.ms-service-basic-v1__heading-icon {
	background: #edf2f6;
	border-radius: 14px;
	color: #536b83;
	display: grid;
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-basic-v1__eyebrow {
	color: var(--basic-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-basic-v1__title {
	color: var(--basic-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Grid ------------------------------------------------------------------- */

.ms-service-basic-v1__grid {
	background: #fff;
	border: 1px solid var(--basic-border);
	border-radius: 16px;
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	overflow: hidden;
}

/* A single row is held to a readable width rather than stretched. */
.ms-service-basic-v1__grid--count-1 {
	grid-template-columns: minmax(0, 760px);
}

/* Item ------------------------------------------------------------------- */

.ms-service-basic-v1__item {
	border-bottom: 1px solid var(--basic-border-soft);
	min-width: 0;
	padding: 17px 18px;
}

.ms-service-basic-v1__item:nth-child(odd) {
	border-right: 1px solid var(--basic-border-soft);
}

/* Nothing follows these, so nothing rules them off. */
.ms-service-basic-v1__item--last-row {
	border-bottom: 0;
}

.ms-service-basic-v1__label {
	color: var(--basic-muted);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	margin: 0 0 5px;
}

.ms-service-basic-v1__value {
	color: var(--basic-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	margin: 0;
	overflow-wrap: anywhere;
}

/* The price note the pricing section has not already printed. */
.ms-service-basic-v1__value-note {
	color: var(--basic-muted);
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	margin-top: 3px;
}

/* Status ----------------------------------------------------------------- */

.ms-service-basic-v1__status {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	min-height: 28px;
	padding: 4px 9px;
}

.ms-service-basic-v1__status--yes {
	background: #edf8f3;
	color: #24775e;
}

.ms-service-basic-v1__status--no {
	background: #fff0f0;
	color: #b84b4b;
}

.ms-service-basic-v1__status--unknown {
	background: #f3f5f7;
	color: #626f80;
}

/* List value ------------------------------------------------------------- */

.ms-service-basic-v1__value-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-basic-v1__value-chip {
	align-items: center;
	background: #f2f5f7;
	border-radius: 999px;
	color: #52687e;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	min-height: 28px;
	padding: 4px 9px;
}

/* Link ------------------------------------------------------------------- */

/*
 * 24px tall, which is the smallest target WCAG 2.2 accepts. This link sits on
 * its own inside a value chip rather than in a sentence, so the standard's
 * inline exception does not cover it — at 15px it was a row of text you had to
 * aim at. The height comes from the box, not from the type, so nothing about
 * the wording changes.
 */
.ms-service-basic-v1__link {
	align-items: center;
	color: #385c79;
	display: inline-flex;
	font-weight: 750;
	min-height: 24px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ms-service-basic-v1__link:hover {
	text-decoration-thickness: 2px;
}

.ms-service-basic-v1__value-chip .ms-service-basic-v1__link {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-underline-offset: 2px;
}

/* Note ------------------------------------------------------------------- */

.ms-service-basic-v1__note {
	color: var(--basic-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	margin: 12px 0 0;
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-basic-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-basic-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-basic-v1__heading-icon {
		height: 40px;
		width: 40px;
	}

	.ms-service-basic-v1__title {
		font-size: 22px;
	}

	.ms-service-basic-v1__grid,
	.ms-service-basic-v1__grid--count-1 {
		grid-template-columns: 1fr;
	}

	.ms-service-basic-v1__item {
		border-right: 0 !important;
		padding: 15px 16px;
	}

	/*
	 * One column: only the very last item ends the list, so the second-to-last
	 * of an even-numbered table gets its rule back.
	 */
	.ms-service-basic-v1__item--last-row {
		border-bottom: 1px solid var(--basic-border-soft);
	}

	.ms-service-basic-v1__item:last-child {
		border-bottom: 0;
	}
}

/* =====================================================================
 * Service FAQ v1 (よくある質問)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-faqs / .ms-faq overrides it replaced have been removed. The shared
 * .ms-faq component in components.css is untouched.
 *
 * Two notes on what the record holds. The approved sheet has a meta row for a
 * source or a date, but this record is a question and an answer and nothing
 * else — `__meta` is kept for a future field and currently renders on nothing.
 * And the twenty-question disclosure (DEV-31) keeps its wrapper: the approved
 * mock shows a flat list, which at twenty rows is three phone screens.
 * ================================================================== */

.ms-service-faq-v1 {
	--faq-navy: #163455;
	--faq-text: #425972;
	--faq-muted: #64717f;

	--faq-coral: #c74e4a;
	--faq-coral-soft: #fff1ef;

	--faq-border: #e5eaf0;
	--faq-border-soft: #edf1f4;

	min-width: 0;
	width: 100%;
}

.ms-service-faq-v1__inner {
	background: #fff;
	border: 1px solid var(--faq-border);
	border-radius: 18px;
	margin-inline: auto;
	min-width: 0;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-faq-v1__heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

/* Neutral like the basic-info badge: this is reference material, not argument. */
.ms-service-faq-v1__heading-icon {
	background: #edf2f6;
	border-radius: 14px;
	color: #536b83;
	display: grid;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-faq-v1__eyebrow {
	color: var(--faq-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-faq-v1__title {
	color: var(--faq-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Intro ------------------------------------------------------------------ */

.ms-service-faq-v1__intro {
	color: var(--faq-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	margin: -4px 0 18px;
	max-width: 820px;
}

/* List ------------------------------------------------------------------- */

.ms-service-faq-v1__list {
	display: grid;
	gap: 10px;
}

/* Item ------------------------------------------------------------------- */

.ms-service-faq-v1__item {
	background: #fff;
	border: 1px solid var(--faq-border);
	border-radius: 14px;
	overflow: hidden;
}

/* Summary / question ----------------------------------------------------- */

.ms-service-faq-v1__question {
	align-items: center;
	color: var(--faq-navy);
	cursor: pointer;
	display: grid;
	gap: 11px;
	grid-template-columns: 34px minmax(0, 1fr) 28px;
	list-style: none;
	min-height: 58px;
	padding: 13px 16px;
}

.ms-service-faq-v1__question::-webkit-details-marker {
	display: none;
}

.ms-service-faq-v1__question:hover {
	background: #fbfcfd;
}

.ms-service-faq-v1__question:focus-visible {
	outline: 3px solid rgba(22, 52, 85, 0.18);
	outline-offset: -3px;
}

.ms-service-faq-v1__question-mark {
	background: var(--faq-coral-soft);
	border-radius: 10px;
	color: #b6433f;
	display: grid;
	font-size: 12px;
	font-weight: 850;
	height: 32px;
	place-items: center;
	width: 32px;
}

.ms-service-faq-v1__question-text {
	color: var(--faq-navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.65;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Toggle ----------------------------------------------------------------- */

.ms-service-faq-v1__toggle {
	background: #f2f5f7;
	border-radius: 9px;
	height: 28px;
	position: relative;
	width: 28px;
}

.ms-service-faq-v1__toggle::before,
.ms-service-faq-v1__toggle::after {
	background: #5d6c7e;
	border-radius: 999px;
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
}

.ms-service-faq-v1__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 160ms ease;
}

.ms-service-faq-v1__item[open] .ms-service-faq-v1__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.ms-service-faq-v1__toggle::after {
		transition: none;
	}
}

/* Answer ----------------------------------------------------------------- */

.ms-service-faq-v1__answer {
	border-top: 1px solid var(--faq-border-soft);
	padding: 0 16px 16px 61px;
}

.ms-service-faq-v1__answer-main {
	display: grid;
	gap: 11px;
	grid-template-columns: 32px minmax(0, 1fr);
	padding-top: 15px;
}

.ms-service-faq-v1__answer-mark {
	background: #edf2f6;
	border-radius: 10px;
	color: #536b83;
	display: grid;
	font-size: 12px;
	font-weight: 850;
	height: 32px;
	place-items: center;
	width: 32px;
}

/* The stored answer, in full: no clamp, no max-height, no "read more". */
.ms-service-faq-v1__answer-text {
	color: var(--faq-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.85;
	overflow-wrap: anywhere;
}

.ms-service-faq-v1__answer-text p {
	margin: 0 0 10px;
}

.ms-service-faq-v1__answer-text p:last-child {
	margin-bottom: 0;
}

/* Optional meta ---------------------------------------------------------- */

.ms-service-faq-v1__meta {
	border-top: 1px solid var(--faq-border-soft);
	color: var(--faq-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	margin: 12px 0 0 43px;
	padding-top: 11px;
}

.ms-service-faq-v1__meta a {
	color: #385c79;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The questions that did not fit the first eight -------------------------- */

.ms-service-faq-v1__more {
	margin-top: 10px;
}

.ms-service-faq-v1__more-trigger {
	align-items: center;
	background: #fff;
	border: 1px solid var(--faq-border);
	border-radius: 12px;
	color: #52667c;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 750;
	justify-content: center;
	line-height: 1.4;
	list-style: none;
	min-height: 44px;
	padding: 9px 14px;
}

.ms-service-faq-v1__more-trigger::-webkit-details-marker {
	display: none;
}

.ms-service-faq-v1__more-trigger::after {
	color: #5d6c7e;
	content: "+";
	font-size: 16px;
	font-weight: 700;
	margin-left: 8px;
}

.ms-service-faq-v1__more[open] .ms-service-faq-v1__more-trigger::after {
	content: "−";
}

.ms-service-faq-v1__list--rest {
	margin-top: 10px;
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-faq-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-faq-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-faq-v1__heading-icon {
		height: 40px;
		width: 40px;
	}

	.ms-service-faq-v1__title {
		font-size: 22px;
	}

	.ms-service-faq-v1__list {
		gap: 8px;
	}

	.ms-service-faq-v1__question {
		gap: 9px;
		grid-template-columns: 30px minmax(0, 1fr) 26px;
		min-height: 56px;
		padding: 12px 13px;
	}

	.ms-service-faq-v1__question-mark,
	.ms-service-faq-v1__answer-mark {
		height: 30px;
		width: 30px;
	}

	.ms-service-faq-v1__question-text {
		font-size: 14px;
	}

	.ms-service-faq-v1__toggle {
		height: 26px;
		width: 26px;
	}

	.ms-service-faq-v1__answer {
		padding: 0 13px 14px;
	}

	.ms-service-faq-v1__answer-main {
		gap: 9px;
		grid-template-columns: 30px minmax(0, 1fr);
		padding-top: 14px;
	}

	.ms-service-faq-v1__answer-text {
		font-size: 14px;
	}

	.ms-service-faq-v1__meta {
		margin-left: 39px;
	}
}

/* =====================================================================
 * Service research v1 (調査・出典情報)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-research rules it replaced have been removed.
 *
 * What the record holds decides what is styled. There is no source type, no
 * per-source note and no per-source date in this record, so `__source-type`,
 * `__source-note` and `__source-meta` are kept from the approved sheet for a
 * future field and currently render on nothing. Added instead: the 調査主体
 * line and the twenty-source disclosure (DEV-30C), both of which the record
 * does have.
 * ================================================================== */

.ms-service-research-v1 {
	--research-navy: #163455;
	--research-text: #425972;
	--research-muted: #64717f;

	--research-coral: #c74e4a;

	--research-border: #e5eaf0;
	--research-border-soft: #edf1f4;

	min-width: 0;
	width: 100%;
}

.ms-service-research-v1__inner {
	background: #fff;
	border: 1px solid var(--research-border);
	border-radius: 18px;
	margin-inline: auto;
	min-width: 0;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-research-v1__heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

/* Neutral, like the other reference blocks at the foot of the page. */
.ms-service-research-v1__heading-icon {
	background: #edf2f6;
	border-radius: 14px;
	color: #536b83;
	display: grid;
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-research-v1__eyebrow {
	color: var(--research-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-research-v1__title {
	color: var(--research-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Overview --------------------------------------------------------------- */

.ms-service-research-v1__overview {
	background: #f8fafc;
	border: 1px solid var(--research-border);
	border-radius: 16px;
	margin-bottom: 18px;
	padding: 20px;
}

.ms-service-research-v1__overview-title {
	color: var(--research-navy);
	font-size: 16px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0 0 9px;
}

/* Who did the checking. Display only — never written back to the record. */
.ms-service-research-v1__team {
	color: var(--research-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.7;
	margin: 0 0 9px;
	overflow-wrap: anywhere;
}

.ms-service-research-v1__overview-text {
	color: var(--research-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

.ms-service-research-v1__overview-text p {
	margin: 0 0 10px;
}

.ms-service-research-v1__overview-text p:last-child {
	margin-bottom: 0;
}

/* Date meta -------------------------------------------------------------- */

.ms-service-research-v1__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

/* Each chip carries the name of its own check; nothing merges them. */
.ms-service-research-v1__date {
	align-items: center;
	background: #eef2f6;
	border-radius: 999px;
	color: #4f6479;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	min-height: 28px;
	overflow-wrap: anywhere;
	padding: 4px 9px;
}

/* Sources ---------------------------------------------------------------- */

.ms-service-research-v1__sources {
	margin-top: 18px;
}

.ms-service-research-v1__sources-heading {
	margin-bottom: 12px;
}

.ms-service-research-v1__sources-eyebrow {
	color: var(--research-coral);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-research-v1__sources-title {
	color: var(--research-navy);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0;
}

.ms-service-research-v1__source-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Source card ------------------------------------------------------------ */

.ms-service-research-v1__source-card {
	background: #fff;
	border: 1px solid var(--research-border);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 17px;
}

.ms-service-research-v1__source-top {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 9px;
}

.ms-service-research-v1__source-type {
	align-items: center;
	background: #eef2f6;
	border-radius: 999px;
	color: #4f6479;
	display: inline-flex;
	font-size: 10px;
	font-weight: 750;
	line-height: 1.3;
	min-height: 26px;
	padding: 4px 8px;
}

.ms-service-research-v1__source-title {
	color: var(--research-navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;
	margin: 0 0 7px;
	overflow-wrap: anywhere;
}

.ms-service-research-v1__source-note {
	color: var(--research-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.ms-service-research-v1__source-meta {
	color: var(--research-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	font-weight: 500;
	gap: 5px 10px;
	line-height: 1.6;
	margin-top: auto;
	padding-top: 10px;
}

/* Source link: text with an underline, never a button. */
.ms-service-research-v1__source-link {
	align-items: center;
	align-self: flex-start;
	color: #385c79;
	display: inline-flex;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.4;
	margin-top: auto;
	min-height: 34px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ms-service-research-v1__source-link:hover {
	text-decoration-thickness: 2px;
}

/* The sources that did not fit the first five ----------------------------- */

.ms-service-research-v1__more {
	margin-top: 12px;
}

.ms-service-research-v1__more-trigger {
	align-items: center;
	background: #fff;
	border: 1px solid var(--research-border);
	border-radius: 12px;
	color: #52667c;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 750;
	justify-content: center;
	line-height: 1.4;
	list-style: none;
	min-height: 44px;
	padding: 9px 14px;
}

.ms-service-research-v1__more-trigger::-webkit-details-marker {
	display: none;
}

.ms-service-research-v1__more-trigger::after {
	color: #5d6c7e;
	content: "+";
	font-size: 16px;
	font-weight: 700;
	margin-left: 8px;
}

.ms-service-research-v1__more[open] .ms-service-research-v1__more-trigger::after {
	content: "−";
}

.ms-service-research-v1__source-grid--rest {
	margin-top: 12px;
}

/* Footnote --------------------------------------------------------------- */

.ms-service-research-v1__note {
	color: var(--research-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	margin: 12px 0 0;
	overflow-wrap: anywhere;
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ms-service-research-v1__source-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-research-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-research-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-research-v1__heading-icon {
		height: 40px;
		width: 40px;
	}

	.ms-service-research-v1__title {
		font-size: 22px;
	}

	.ms-service-research-v1__overview {
		margin-bottom: 14px;
		padding: 16px;
	}

	.ms-service-research-v1__source-grid,
	.ms-service-research-v1__source-grid--rest {
		gap: 10px;
		grid-template-columns: 1fr;
	}

	.ms-service-research-v1__source-card {
		padding: 15px;
	}
}

/* =====================================================================
 * Service related v1 (関連サービス)
 *
 * Ported from the approved v1 markup and stylesheet. Its own namespace; the
 * .ms-related-services rules it replaced have been removed.
 *
 * The record returns an id, a name, a permalink, a logo, a price string and a
 * one-line summary — and nothing else. There is no status and no market in it,
 * so `__status` is kept from the approved sheet for a future field and
 * currently renders on nothing; adding either would mean a new query, which
 * this section does not make.
 * ================================================================== */

.ms-service-related-v1 {
	--related-navy: #163455;
	--related-text: #425972;
	--related-muted: #64717f;

	--related-coral: #c74e4a;

	--related-border: #e5eaf0;
	--related-border-soft: #edf1f4;

	min-width: 0;
	width: 100%;
}

.ms-service-related-v1__inner {
	background: #fff;
	border: 1px solid var(--related-border);
	border-radius: 18px;
	margin-inline: auto;
	min-width: 0;
	padding: 26px;
	width: min(100%, 1200px);
}

/* Heading ---------------------------------------------------------------- */

.ms-service-related-v1__heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

/* Neutral, like the other reference blocks at the foot of the page. */
.ms-service-related-v1__heading-icon {
	background: #edf2f6;
	border-radius: 14px;
	color: #536b83;
	display: grid;
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 850;
	height: 42px;
	place-items: center;
	width: 42px;
}

.ms-service-related-v1__eyebrow {
	color: var(--related-coral);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 2px;
}

.ms-service-related-v1__title {
	color: var(--related-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.35;
	margin: 0;
}

/* Grid ------------------------------------------------------------------- */

.ms-service-related-v1__grid {
	display: grid;
	gap: 14px;
}

.ms-service-related-v1__grid--count-1 {
	grid-template-columns: minmax(0, 560px);
}

.ms-service-related-v1__grid--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ms-service-related-v1__grid--count-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ms-service-related-v1__grid--count-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Card ------------------------------------------------------------------- */

.ms-service-related-v1__card {
	background: #fff;
	border: 1px solid var(--related-border);
	border-radius: 16px;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.ms-service-related-v1__card:hover {
	border-color: #d8e0e8;
}

/* Media ------------------------------------------------------------------ */

.ms-service-related-v1__media {
	align-items: center;
	background: #f8fafc;
	border-bottom: 1px solid var(--related-border-soft);
	display: flex;
	height: 128px;
	justify-content: center;
	padding: 16px;
}

.ms-service-related-v1__media img {
	display: block;
	height: auto;
	max-height: 88px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* No logo on file: the name, not a frame the size of one. */
.ms-service-related-v1__media--fallback {
	color: #4f6479;
	font-size: 13px;
	font-weight: 750;
	line-height: 1.5;
	overflow-wrap: anywhere;
	text-align: center;
}

/* Body ------------------------------------------------------------------- */

.ms-service-related-v1__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 17px;
}

/* Status ----------------------------------------------------------------- */

.ms-service-related-v1__status {
	align-self: flex-start;
	background: #f1f4f6;
	border-radius: 999px;
	color: #55677a;
	font-size: 10px;
	font-weight: 750;
	line-height: 1.4;
	margin-bottom: 8px;
	min-height: 24px;
	padding: 3px 8px;
}

/* Name ------------------------------------------------------------------- */

.ms-service-related-v1__service-name {
	color: var(--related-navy);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.5;
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

/* Description ------------------------------------------------------------ */

.ms-service-related-v1__description {
	color: var(--related-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Meta ------------------------------------------------------------------- */

.ms-service-related-v1__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 12px 0 0;
}

.ms-service-related-v1__meta-item {
	align-items: center;
	background: #f2f5f7;
	border-radius: 999px;
	color: #52657a;
	display: inline-flex;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	min-height: 27px;
	overflow-wrap: anywhere;
	padding: 4px 8px;
}

/* Detail link: text with an underline, never a button. */
.ms-service-related-v1__detail-link {
	align-items: center;
	align-self: flex-start;
	color: #385c79;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin-top: auto;
	min-height: 38px;
	padding-top: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ms-service-related-v1__detail-link:hover {
	text-decoration-thickness: 2px;
}

.ms-service-related-v1__detail-link:focus-visible {
	outline: 3px solid rgba(22, 52, 85, 0.18);
	outline-offset: 3px;
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ms-service-related-v1__grid--count-3,
	.ms-service-related-v1__grid--count-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 767px) {
	.ms-service-related-v1__inner {
		border-radius: 16px;
		padding: 18px;
	}

	.ms-service-related-v1__heading {
		align-items: flex-start;
		margin-bottom: 16px;
	}

	.ms-service-related-v1__heading-icon {
		height: 40px;
		width: 40px;
	}

	.ms-service-related-v1__title {
		font-size: 22px;
	}

	.ms-service-related-v1__grid,
	.ms-service-related-v1__grid--count-1,
	.ms-service-related-v1__grid--count-2,
	.ms-service-related-v1__grid--count-3,
	.ms-service-related-v1__grid--count-4 {
		gap: 10px;
		grid-template-columns: 1fr;
	}

	/* The logo moves beside the name: a phone-width card with a 128px band of
	 * logo above it is mostly logo. */
	.ms-service-related-v1__card {
		align-items: stretch;
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
	}

	.ms-service-related-v1__media {
		border-bottom: 0;
		border-right: 1px solid var(--related-border-soft);
		height: auto;
		min-height: 116px;
		padding: 12px;
	}

	.ms-service-related-v1__media img {
		max-height: 72px;
	}

	.ms-service-related-v1__media--fallback {
		font-size: 12px;
	}

	.ms-service-related-v1__body {
		padding: 14px;
	}

	.ms-service-related-v1__service-name {
		font-size: 16px;
	}
}

/* Very small ------------------------------------------------------------- */

@media (max-width: 359px) {
	.ms-service-related-v1__card {
		grid-template-columns: 1fr;
	}

	.ms-service-related-v1__media {
		border-bottom: 1px solid var(--related-border-soft);
		border-right: 0;
		min-height: 100px;
	}
}

/* =====================================================================
 * Service Final CTA / Sticky CTA v1
 *
 * The page's last decision point, and the bar that keeps the same decision
 * within reach on a phone. Both render the CTA the plugin resolved, through
 * service/service-cta, with `final` and `sticky` as the placement: the
 * destination, the target, the rel tokens, the advertising disclosure and the
 * measurement hooks are that component's contract and nothing here touches
 * them. This block is a frame and a set of colours.
 *
 * Its own namespace; `.ms-final-cta` has been removed. `.ms-sticky-cta` stays:
 * the bar still carries that class, and its fixed position and the page's
 * reserve live there.
 * ================================================================== */

.ms-service-final-cta-v1 {
	/*
	 * Two of the approved colours are darkened by the smallest step that
	 * clears AA on their own background: the eyebrow's #c74e4a measured 4.27:1
	 * on the panel and the button's #e2462a measured 4.08:1 under white 16px
	 * bold — which is not large text, so 4.5:1 is the bar it has to clear.
	 */
	--final-navy: #163455;
	--final-text: #425972;
	--final-coral: #d64020; /* 4.55:1 with #fff */
	--final-coral-hover: #cf3c23; /* 4.86:1 with #fff */
	--final-eyebrow: #c24a46; /* 4.52:1 on the panel */
	--final-border: #f0d8d2;

	width: 100%;
}

.ms-service-final-cta-v1__inner {
	background: linear-gradient(145deg, #fff9f7 0%, #fff3ef 100%);
	border: 1px solid var(--final-border);
	border-radius: 20px;
	margin-inline: auto;
	padding: 34px 30px;
	width: min(100%, 1200px);
}

.ms-service-final-cta-v1__content {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-inline: auto;
	max-width: 720px;
	text-align: center;
}

.ms-service-final-cta-v1__eyebrow {
	color: var(--final-eyebrow);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 4px;
}

.ms-service-final-cta-v1__title {
	color: var(--final-navy);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.45;
	/* An editor's service name can be one unbroken string; it wraps rather
	 * than widening the panel. */
	overflow-wrap: anywhere;
	margin: 0;
}

.ms-service-final-cta-v1__action {
	margin-top: 20px;
	width: min(100%, 460px);
}

/*
 * The component inside the frame. The band above already draws
 * `.ms-service-cta--final` as a pink card with its own padding and max-width;
 * inside this section the frame is the card, so those are unwound here rather
 * than edited there.
 */
.ms-service-final-cta-v1 .ms-service-cta--final {
	background-color: transparent;
	border-radius: 0;
	gap: 10px;
	max-width: none;
	padding: 0;
	width: 100%;
}

.ms-service-final-cta-v1 .ms-service-cta__button {
	align-items: center;
	background-color: var(--final-coral);
	border-radius: 15px;
	display: flex;
	font-size: 16px;
	font-weight: 850;
	justify-content: center;
	line-height: 1.4;
	/* 56px: the strongest control on the page, and well past the 44px a
	 * finger needs. */
	min-height: 56px;
	max-width: none;
	padding: 12px 20px;
	text-decoration: none;
	width: 100%;
}

.ms-service-final-cta-v1 .ms-service-cta__button:hover {
	background-color: var(--final-coral-hover);
}

.ms-service-final-cta-v1 .ms-service-cta__button:focus-visible {
	outline: 3px solid var(--final-navy);
	outline-offset: 3px;
}

/*
 * The advertising disclosure, under its own button and in plain text. It stays
 * quieter than the button and never quieter than readable.
 */
.ms-service-final-cta-v1 .ms-service-cta__disclosure {
	color: var(--final-text);
	font-size: 12px;
	line-height: 1.7;
	margin: 0;
	text-align: center;
}

@media (max-width: 767px) {
	.ms-service-final-cta-v1__inner {
		border-radius: 16px;
		padding: 24px 18px;
	}

	.ms-service-final-cta-v1__title {
		font-size: 22px;
	}

	.ms-service-final-cta-v1__action {
		margin-top: 16px;
		width: 100%;
	}
}

/* The mobile bar ---------------------------------------------------------
 *
 * Compact on purpose: it is on screen for the whole page, so every pixel it
 * takes is a pixel of the article a reader cannot see. No blur — the theme
 * uses none anywhere, and a solid surface keeps the text behind it from
 * showing through on the browsers that ignore it.
 */

.ms-service-sticky-cta-v1 {
	background-color: var(--color-surface);
	border-top: 1px solid rgba(22, 52, 85, 0.1);
	box-shadow: 0 -2px 12px rgba(22, 52, 85, 0.08);
	padding: 9px 16px;
	padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
}

.ms-service-sticky-cta-v1__inner {
	max-width: 520px;
}

.ms-service-sticky-cta-v1 .ms-service-cta {
	gap: 3px;
}

.ms-service-sticky-cta-v1 .ms-service-cta__button {
	background-color: var(--final-coral, #d64020);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 850;
	/* 52px, not the 56px of the closing button: the same reach, less of the
	 * viewport. */
	min-height: 52px;
	padding: 10px 18px;
}

.ms-service-sticky-cta-v1 .ms-service-cta__button:hover {
	background-color: var(--final-coral-hover, #cf3c23);
}

.ms-service-sticky-cta-v1 .ms-service-cta__button:focus-visible {
	outline: 3px solid #163455;
	outline-offset: 2px;
}

.ms-service-sticky-cta-v1 .ms-service-cta__disclosure {
	color: #425972;
	font-size: 11px;
	line-height: 1.6;
	margin: 0;
	text-align: center;
}

/* =====================================================================
 * Service Detail v1.1 — contents, editorial prose, evidence, and the pricing
 * questions a price table cannot answer
 *
 * Six additions that sit between and inside the v1 sections: the contents
 * list, the editors' introduction, the paragraph each section can carry, the
 * evidence behind a section's claims, and the three pricing questions a price
 * table cannot answer.
 *
 * The page already has a dozen panels in it. These deliberately are not all
 * panels: the contents list is a bordered block, the introduction and the
 * section paragraphs sit on the page's own background at reading width, and the
 * evidence is a figure rather than a card. Only the three pricing sections draw
 * surfaces, and they alternate once — white, light neutral, warm white — rather
 * than striping.
 *
 * Shared palette, and every value checked against its own background: navy
 * #163455 for titles, #304860 for prose, #5d6c7e for meta, and the coral the
 * page already uses for accents.
 * ================================================================== */

.ms-service-toc-v1,
.ms-service-overview-v1,
.ms-service-free-paid-v1,
.ms-service-payment-v1,
.ms-service-simulation-v1 {
	--v11-navy: #163455;
	--v11-text: #304860;
	--v11-muted: #5d6c7e;
	--v11-coral: #c24a46;
	--v11-border: #e4e8ef;
	--v11-border-soft: #eef1f6;
}

/*
 * Where an anchor lands. The site header is sticky, so a fragment jump without
 * this puts the heading underneath it. Applied to the headings the contents
 * list points at — which are the ids the v1 sections already carry, so no
 * section needed a new one.
 */
[id^="ms-service-"][id$="-title"] {
	scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* Contents ---------------------------------------------------------------- */

.ms-service-toc-v1 {
	border: 1px solid var(--v11-border);
	border-radius: 14px;
	padding: var(--space-5) var(--space-5) var(--space-4);
}

.ms-service-toc-v1__title {
	color: var(--v11-navy);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 var(--space-3);
}

.ms-service-toc-v1__list {
	display: grid;
	gap: 2px var(--space-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-toc-v1__item {
	margin: 0;
}

.ms-service-toc-v1__link {
	align-items: baseline;
	border-radius: 6px;
	color: var(--v11-navy);
	display: flex;
	gap: var(--space-2);
	/* A comfortable row to hit with a thumb, without turning the list into a
	 * stack of buttons. */
	min-height: 40px;
	padding: 9px 4px;
	text-decoration: none;
}

.ms-service-toc-v1__link:hover {
	background-color: #f7f9fc;
	color: var(--v11-navy);
}

.ms-service-toc-v1__link:focus-visible {
	outline: 3px solid var(--v11-navy);
	outline-offset: 2px;
}

.ms-service-toc-v1__number {
	color: var(--v11-coral);
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.ms-service-toc-v1__label {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-decoration-color: rgba(22, 52, 85, 0.22);
	text-underline-offset: 3px;
}

.ms-service-toc-v1__link:hover .ms-service-toc-v1__label {
	text-decoration-color: currentcolor;
}

@media (min-width: 768px) {
	.ms-service-toc-v1__list--count-3,
	.ms-service-toc-v1__list--count-2 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* One column only where two genuinely will not fit. */
@media (max-width: 359px) {
	.ms-service-toc-v1__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The editors' introduction ---------------------------------------------- */

.ms-service-overview-v1__inner {
	margin-inline: auto;
	max-width: 100%;
}

.ms-service-overview-v1__title {
	color: var(--v11-navy);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.5;
	margin: 0 0 var(--space-3);
}

/* The section paragraph -------------------------------------------------- */

.ms-service-editorial-lead-v1 {
	color: var(--v11-text);
	/* Reading width, not section width: a 1200px line of prose is not read, it
	 * is scanned and abandoned. */
	max-width: 800px;
}

.ms-service-editorial-lead-v1 p {
	font-size: 1.0625rem;
	line-height: 1.9;
	margin: 0 0 var(--space-3);
}

.ms-service-editorial-lead-v1 p:last-child {
	margin-bottom: 0;
}

.ms-service-editorial-lead-v1--overview p {
	font-size: 1.0625rem;
	line-height: 1.95;
}

/* Inside a section the paragraph is a lead, so it keeps a gap below it. */
.ms-service-features-v1 .ms-service-editorial-lead-v1,
.ms-service-price-v1 .ms-service-editorial-lead-v1,
.ms-service-safety-v1 .ms-service-editorial-lead-v1,
.ms-service-benefits-v1 .ms-service-editorial-lead-v1,
.ms-service-audience-v1 .ms-service-editorial-lead-v1,
.ms-service-registration-v1 .ms-service-editorial-lead-v1,
.ms-service-reviews-v1 .ms-service-editorial-lead-v1,
.ms-service-editorial-v1 .ms-service-editorial-lead-v1,
.ms-service-comparison-v1 .ms-service-editorial-lead-v1,
.ms-service-free-paid-v1 .ms-service-editorial-lead-v1,
.ms-service-payment-v1 .ms-service-editorial-lead-v1,
.ms-service-simulation-v1 .ms-service-editorial-lead-v1 {
	margin-bottom: var(--space-5);
}

/* Evidence --------------------------------------------------------------- */

.ms-service-evidence-v1 {
	margin-bottom: var(--space-5);
}

.ms-service-evidence-v1__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

.ms-service-evidence-v1__figure {
	margin: 0;
	min-width: 0;
}

/*
 * A phone capture is tall and narrow. The frame gives it a light ground and
 * lets it sit inside at its own proportions rather than being cropped to the
 * shape of a column.
 */
.ms-service-evidence-v1__frame {
	align-items: center;
	background-color: #f4f5f7;
	border: 1px solid var(--v11-border-soft);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: var(--space-3);
}

.ms-service-evidence-v1__image {
	display: block;
	height: auto;
	max-height: 420px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.ms-service-evidence-v1__caption {
	color: var(--v11-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.7;
	padding-top: var(--space-2);
}

.ms-service-evidence-v1__caption-text {
	display: block;
	font-weight: 600;
}

.ms-service-evidence-v1__meta {
	color: var(--v11-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--space-3);
	margin: 2px 0 0;
}

.ms-service-evidence-v1__source-link {
	color: var(--v11-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ms-service-evidence-v1__source-link:hover {
	color: var(--v11-navy);
}

.ms-service-evidence-v1__source-link:focus-visible {
	outline: 3px solid var(--v11-navy);
	outline-offset: 2px;
}

.ms-service-evidence-v1__sources {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
}

.ms-service-evidence-v1__source-row {
	border-top: 1px solid var(--v11-border-soft);
	color: var(--v11-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.7;
	padding: var(--space-2) 0;
}

@media (min-width: 768px) {
	.ms-service-evidence-v1__grid--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-evidence-v1__grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* One screenshot does not stretch to the width of the section. */
	.ms-service-evidence-v1__grid--count-1 {
		max-width: 720px;
	}
}

/* Free / paid ------------------------------------------------------------ */

.ms-service-free-paid-v1__inner {
	margin-inline: auto;
	width: 100%;
}

.ms-service-free-paid-v1__heading {
	margin-bottom: var(--space-4);
}

.ms-service-free-paid-v1__eyebrow {
	color: var(--v11-coral);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0 0 2px;
}

.ms-service-free-paid-v1__title {
	color: var(--v11-navy);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.45;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-free-paid-v1__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

.ms-service-free-paid-v1__panel {
	border-radius: 14px;
	min-width: 0;
	padding: var(--space-4) var(--space-4) var(--space-3);
}

/*
 * Pale green and pale coral, equal weight. The paid side is the other half of
 * the answer, not a warning about it — no red, no cross, and the same border
 * and radius as the free side.
 */
.ms-service-free-paid-v1__panel--free {
	background-color: #f2faf5;
	border: 1px solid #d9ece2;
}

.ms-service-free-paid-v1__panel--paid {
	background-color: #fff4f1;
	border: 1px solid #f3dcd6;
}

.ms-service-free-paid-v1__panel-head {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.ms-service-free-paid-v1__panel-icon {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 800;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.ms-service-free-paid-v1__panel-icon--free {
	background-color: #dcefe4;
	color: #14503a;
}

.ms-service-free-paid-v1__panel-icon--paid {
	background-color: #fadfd8;
	color: #8f3a2a;
}

.ms-service-free-paid-v1__panel-title {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.4;
	margin: 0;
}

.ms-service-free-paid-v1__panel--free .ms-service-free-paid-v1__panel-title {
	color: #14503a;
}

.ms-service-free-paid-v1__panel--paid .ms-service-free-paid-v1__panel-title {
	color: #8f3a2a;
}

.ms-service-free-paid-v1__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-free-paid-v1__item {
	align-items: baseline;
	border-top: 1px solid rgba(22, 52, 85, 0.07);
	display: flex;
	gap: var(--space-2);
	padding: 9px 0;
}

.ms-service-free-paid-v1__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.ms-service-free-paid-v1__mark {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.7;
}

.ms-service-free-paid-v1__mark--free {
	color: #1f7a52;
}

.ms-service-free-paid-v1__mark--paid {
	color: #b0443f;
}

.ms-service-free-paid-v1__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ms-service-free-paid-v1__label {
	color: var(--v11-text);
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.ms-service-free-paid-v1__note {
	color: var(--v11-muted);
	display: block;
	font-size: var(--ms-font-size-meta);
	line-height: 1.7;
	margin-top: 1px;
	overflow-wrap: anywhere;
}

/*
 * The editor's own wording for the price. Right-aligned and quiet: it is a
 * figure, not something to press.
 */
.ms-service-free-paid-v1__cost {
	color: #7a3a2c;
	flex-shrink: 0;
	font-size: var(--ms-font-size-meta);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
	text-align: right;
}

.ms-service-free-paid-v1__meta,
.ms-service-payment-v1__meta,
.ms-service-simulation-v1__meta {
	color: var(--v11-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--ms-font-size-meta);
	gap: 2px var(--space-4);
	line-height: 1.7;
	margin: var(--space-3) 0 0;
}

.ms-service-free-paid-v1__source-link,
.ms-service-payment-v1__source-link,
.ms-service-simulation-v1__source-link {
	color: var(--v11-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ms-service-free-paid-v1__source-link:hover,
.ms-service-payment-v1__source-link:hover,
.ms-service-simulation-v1__source-link:hover {
	color: var(--v11-navy);
}

.ms-service-free-paid-v1__source-link:focus-visible,
.ms-service-payment-v1__source-link:focus-visible,
.ms-service-simulation-v1__source-link:focus-visible {
	outline: 3px solid var(--v11-navy);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.ms-service-free-paid-v1__grid--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* A single panel does not stretch to fill a row it is alone in. */
	.ms-service-free-paid-v1__grid--count-1 {
		max-width: 760px;
	}
}

/* Payment methods -------------------------------------------------------- */

.ms-service-payment-v1__inner {
	background-color: #f8f9fb;
	border: 1px solid var(--v11-border);
	border-radius: 16px;
	min-width: 0;
	padding: var(--space-5) var(--space-4);
	width: 100%;
}

.ms-service-payment-v1__heading {
	margin-bottom: var(--space-4);
}

.ms-service-payment-v1__eyebrow {
	color: var(--v11-coral);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0 0 2px;
}

.ms-service-payment-v1__title {
	color: var(--v11-navy);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.45;
	margin: 0;
	overflow-wrap: anywhere;
}

/*
 * The table scrolls inside here and nowhere else. `min-width: 0` on the
 * wrapper and its parent is what keeps the table's own minimum width from
 * widening the page instead — the same fix the comparison table needed.
 */
.ms-service-payment-v1,
.ms-service-payment-v1__scroll {
	min-width: 0;
}

.ms-service-payment-v1__scroll {
	background-color: var(--color-surface);
	border: 1px solid var(--v11-border);
	border-radius: 12px;
	contain: paint;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ms-service-payment-v1__scroll:focus-visible {
	outline: 3px solid var(--v11-navy);
	outline-offset: 2px;
}

.ms-service-payment-v1__table {
	border-collapse: collapse;
	/* Wide enough that six columns of Japanese do not each wrap to three
	 * lines; narrow enough to fit a tablet without scrolling. */
	min-width: 680px;
	width: 100%;
}

.ms-service-payment-v1__th {
	background-color: #f1f3f7;
	border-bottom: 1px solid var(--v11-border);
	color: var(--v11-navy);
	font-size: var(--ms-font-size-meta);
	font-weight: 800;
	padding: 10px var(--space-3);
	text-align: left;
	white-space: nowrap;
}

.ms-service-payment-v1__name,
.ms-service-payment-v1__cell {
	border-bottom: 1px solid var(--v11-border-soft);
	color: var(--v11-text);
	font-size: 0.9375rem;
	line-height: 1.7;
	padding: 11px var(--space-3);
	text-align: left;
	vertical-align: top;
}

.ms-service-payment-v1__name {
	color: var(--v11-navy);
	font-weight: 700;
	min-width: 9em;
	overflow-wrap: anywhere;
}

.ms-service-payment-v1__row:last-child .ms-service-payment-v1__name,
.ms-service-payment-v1__row:last-child .ms-service-payment-v1__cell {
	border-bottom: 0;
}

.ms-service-payment-v1__cell--note {
	max-width: 22em;
	overflow-wrap: anywhere;
}

/*
 * Three states, three words. The colour is a second signal on top of the
 * wording, never the only one.
 */
.ms-service-payment-v1__state {
	display: inline-block;
	font-size: var(--ms-font-size-meta);
	font-weight: 800;
	white-space: nowrap;
}

.ms-service-payment-v1__state--yes {
	color: #1f6b4a;
}

.ms-service-payment-v1__state--no {
	color: #9c4038;
}

.ms-service-payment-v1__state--unknown {
	color: var(--v11-muted);
}

.ms-service-payment-v1__empty {
	color: #6b7787;
}

.ms-service-payment-v1__note {
	background-color: #fff8f5;
	border: 1px solid #f3e2da;
	border-radius: 10px;
	color: var(--v11-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: var(--space-3) 0 0;
	padding: var(--space-3);
}

@media (min-width: 768px) {
	.ms-service-payment-v1__inner {
		padding: var(--space-6);
	}
}

/* Price simulation ------------------------------------------------------- */

.ms-service-simulation-v1__inner {
	background: linear-gradient(180deg, #fffaf8 0%, #fffdfc 100%);
	border: 1px solid #f2e4df;
	border-radius: 16px;
	padding: var(--space-5) var(--space-4);
	width: 100%;
}

.ms-service-simulation-v1__heading {
	margin-bottom: var(--space-4);
}

.ms-service-simulation-v1__eyebrow {
	color: var(--v11-coral);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0 0 2px;
}

.ms-service-simulation-v1__title {
	color: var(--v11-navy);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.45;
	margin: 0;
}

.ms-service-simulation-v1__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Every card identical. No highlighted middle column and no accent border on
 * one of them: the record has no "recommended" field, and a design that picks
 * one is the design making a claim.
 */
.ms-service-simulation-v1__card {
	background-color: var(--color-surface);
	border: 1px solid #f0ded8;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-4);
}

.ms-service-simulation-v1__card-title {
	color: var(--v11-navy);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.45;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-simulation-v1__card-description {
	color: var(--v11-muted);
	font-size: var(--ms-font-size-meta);
	line-height: 1.75;
	margin: var(--space-2) 0 0;
}

.ms-service-simulation-v1__usage {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
}

.ms-service-simulation-v1__usage-row {
	align-items: baseline;
	color: var(--v11-text);
	display: flex;
	font-size: 0.875rem;
	gap: var(--space-3);
	justify-content: space-between;
	line-height: 1.7;
	padding: 3px 0;
}

.ms-service-simulation-v1__usage-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ms-service-simulation-v1__usage-detail {
	color: var(--v11-muted);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.ms-service-simulation-v1__total {
	border-top: 1px solid #f0ded8;
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	/* Pushed to the bottom so the prices line up across a row of cards. */
	margin-top: auto;
}

.ms-service-simulation-v1__points {
	align-items: baseline;
	color: var(--v11-text);
	display: flex;
	font-size: 0.875rem;
	gap: var(--space-2);
	justify-content: space-between;
	margin: 0;
}

.ms-service-simulation-v1__points-label {
	color: var(--v11-muted);
	font-weight: 700;
}

.ms-service-simulation-v1__points-value {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

/* The answer to the section's question, and the largest thing in the card. */
.ms-service-simulation-v1__yen {
	color: #b93f26;
	font-size: 1.625rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	margin: 4px 0 0;
}

.ms-service-simulation-v1__footnote {
	border-top: 1px solid #f2e4df;
	margin-top: var(--space-5);
	padding-top: var(--space-3);
}

.ms-service-simulation-v1__unit,
.ms-service-simulation-v1__note {
	color: var(--v11-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: 0 0 4px;
}

.ms-service-simulation-v1__note {
	color: var(--v11-muted);
}

@media (min-width: 768px) {
	.ms-service-simulation-v1__inner {
		padding: var(--space-6);
	}

	.ms-service-simulation-v1__grid--count-2,
	.ms-service-simulation-v1__grid--count-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-simulation-v1__grid--count-1 {
		max-width: 560px;
	}

	.ms-service-simulation-v1__yen {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.ms-service-simulation-v1__grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * The citation a whole evidence block shares, printed once below it instead of
 * under each picture.
 */
.ms-service-evidence-v1__shared {
	padding-top: var(--space-2);
}

/*
 * In the payment section the evidence follows the table, so its gap moves from
 * below it to above it. Image sizing, frame and captions are untouched.
 */
.ms-service-payment-v1 .ms-service-evidence-v1 {
	margin-bottom: 0;
	margin-top: var(--space-4);
}

/* =====================================================================
 * Service Detail v1.1 — real-experience research
 *
 * Five sections that deliberately do not look alike: a tally, a set of case
 * studies, a compact list of figures, the accounts themselves, and the editors'
 * split reading of them. Card after card after card is what this rhythm exists
 * to avoid — by the time a reader reaches this cluster they have already passed
 * a dozen panels.
 *
 * Nothing here draws a proportion. There is no bar whose length is a share, no
 * pie and no donut: the counts are compared by reading them, which is the only
 * honest way to compare numbers that are not a sample of anything.
 *
 * Colour is always the second signal. Every stat and every badge carries its
 * label in text, and the tint behind it only repeats what the label says.
 *
 * Same palette as the sections above, every value checked on its own ground.
 * ================================================================== */

.ms-service-experience-summary-v1,
.ms-service-experience-cost-v1,
.ms-service-experience-duration-v1,
.ms-service-experience-sources-v1,
.ms-service-experience-analysis-v1 {
	--exp-navy: #163455;
	--exp-text: #304860;
	--exp-muted: #5d6c7e;
	--exp-coral: #c24a46;
	--exp-border: #e4e8ef;
	--exp-border-soft: #eef1f6;
	min-width: 0;
}

.ms-service-experience-summary-v1__inner,
.ms-service-experience-cost-v1__inner,
.ms-service-experience-duration-v1__inner,
.ms-service-experience-sources-v1__inner,
.ms-service-experience-analysis-v1__inner {
	min-width: 0;
	width: 100%;
}

.ms-service-experience-summary-v1__heading,
.ms-service-experience-cost-v1__heading,
.ms-service-experience-duration-v1__heading,
.ms-service-experience-sources-v1__heading,
.ms-service-experience-analysis-v1__heading {
	margin-bottom: var(--space-4);
}

.ms-service-experience-summary-v1__eyebrow,
.ms-service-experience-cost-v1__eyebrow,
.ms-service-experience-duration-v1__eyebrow,
.ms-service-experience-sources-v1__eyebrow,
.ms-service-experience-analysis-v1__eyebrow {
	color: var(--exp-coral);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0 0 2px;
}

.ms-service-experience-summary-v1__title,
.ms-service-experience-cost-v1__title,
.ms-service-experience-duration-v1__title,
.ms-service-experience-sources-v1__title,
.ms-service-experience-analysis-v1__title {
	color: var(--exp-navy);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.45;
	margin: 0;
	overflow-wrap: anywhere;
}

/* 1. The tally ----------------------------------------------------------- */

.ms-service-experience-summary-v1__stats {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

/*
 * Label above number, and the label is the thing that carries the meaning:
 * the tint is only there to group the two outcomes a reader came for.
 */
.ms-service-experience-summary-v1__stat {
	background-color: #f4f6fa;
	border: 1px solid var(--exp-border-soft);
	border-radius: 12px;
	min-width: 0;
	padding: var(--space-3);
}

.ms-service-experience-summary-v1__stat-label {
	color: var(--exp-muted);
	font-size: var(--ms-font-size-meta);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-experience-summary-v1__stat-value {
	color: var(--exp-navy);
	font-size: 1.375rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	margin: 4px 0 0;
}

.ms-service-experience-summary-v1__stat--met {
	background-color: #f2faf5;
	border-color: #dcece3;
}

.ms-service-experience-summary-v1__stat--met .ms-service-experience-summary-v1__stat-value {
	color: #14503a;
}

.ms-service-experience-summary-v1__stat--not-met {
	background-color: #fdf4f2;
	border-color: #f2e0da;
}

.ms-service-experience-summary-v1__stat--not-met .ms-service-experience-summary-v1__stat-value {
	color: #8a4038;
}

.ms-service-experience-summary-v1__stat--contact-only {
	background-color: #f2f6fb;
	border-color: #dee7f1;
}

.ms-service-experience-summary-v1__stat--contact-only .ms-service-experience-summary-v1__stat-value {
	color: #234b6e;
}

.ms-service-experience-summary-v1__stat--message-only {
	background-color: #f7f8fa;
}

.ms-service-experience-summary-v1__stat--unknown {
	background-color: #f6f7f8;
}

.ms-service-experience-summary-v1__stat--unknown .ms-service-experience-summary-v1__stat-value {
	color: var(--exp-muted);
}

/*
 * The note that stops the tally being read as a probability. Warm ground so it
 * is not skipped, quiet type so it is not mistaken for a warning.
 */
.ms-service-experience-summary-v1__disclaimer {
	background-color: #fff9f6;
	border: 1px solid #f3e2da;
	border-radius: 10px;
	color: #4a5a70;
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: var(--space-3) 0 0;
	padding: var(--space-3);
}

.ms-service-experience-summary-v1__verified {
	color: var(--exp-muted);
	font-size: var(--ms-font-size-meta);
	line-height: 1.7;
	margin: var(--space-2) 0 0;
}

.ms-service-experience-summary-v1 .ms-service-evidence-v1 {
	margin-bottom: 0;
	margin-top: var(--space-4);
}

@media (min-width: 768px) {
	.ms-service-experience-summary-v1__stats--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ms-service-experience-summary-v1__stats--count-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ms-service-experience-summary-v1__stats--count-5,
	.ms-service-experience-summary-v1__stats--count-6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ms-service-experience-summary-v1__stats--count-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ms-service-experience-summary-v1__stats--count-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Where two columns genuinely will not fit. */
@media (max-width: 359px) {
	.ms-service-experience-summary-v1__stats {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Shared: the outcome badge ---------------------------------------------- */

.ms-service-experience-cost-v1__result,
.ms-service-experience-sources-v1__result {
	border-radius: 999px;
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.5;
	padding: 3px 10px;
	white-space: nowrap;
}

.ms-service-experience-cost-v1__result--met,
.ms-service-experience-sources-v1__result--met {
	background-color: #e8f5ee;
	color: #1f6b4a;
}

.ms-service-experience-cost-v1__result--not-met,
.ms-service-experience-sources-v1__result--not-met {
	background-color: #fbeeeb;
	color: #9c4038;
}

.ms-service-experience-cost-v1__result--contact-only,
.ms-service-experience-sources-v1__result--contact-only {
	background-color: #eaf2f9;
	color: #2a5a80;
}

.ms-service-experience-cost-v1__result--message-only,
.ms-service-experience-sources-v1__result--message-only {
	background-color: #f1f3f7;
	color: #4a5a70;
}

.ms-service-experience-cost-v1__result--unknown,
.ms-service-experience-sources-v1__result--unknown {
	background-color: #f3f4f6;
	color: var(--exp-muted);
}

/* Shared: the media label and reference links --------------------------- */

.ms-service-experience-cost-v1__media,
.ms-service-experience-sources-v1__media,
.ms-service-experience-duration-v1__media {
	background-color: #f1f3f7;
	border-radius: 4px;
	color: #3c4c60;
	font-size: 0.6875rem;
	font-weight: 800;
	padding: 2px 6px;
	white-space: nowrap;
}

.ms-service-experience-cost-v1__link,
.ms-service-experience-sources-v1__link,
.ms-service-experience-cost-v1__note-link {
	color: var(--exp-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * The two that stand alone at the foot of a card get the 24px WCAG 2.2 asks
 * for. `__note-link` is left as it is: it sits inside a sentence, which the
 * standard's inline exception covers.
 */
.ms-service-experience-cost-v1__link,
.ms-service-experience-sources-v1__link {
	align-items: center;
	display: inline-flex;
	min-height: 24px;
}

.ms-service-experience-cost-v1__note-link {
	color: var(--exp-navy);
	font-weight: 700;
}

.ms-service-experience-cost-v1__link:hover,
.ms-service-experience-sources-v1__link:hover {
	color: var(--exp-navy);
}

.ms-service-experience-cost-v1__link:focus-visible,
.ms-service-experience-sources-v1__link:focus-visible,
.ms-service-experience-cost-v1__note-link:focus-visible {
	outline: 3px solid var(--exp-navy);
	outline-offset: 2px;
}

/* 2. What people spent --------------------------------------------------- */

.ms-service-experience-cost-v1__note {
	background-color: #f8f9fb;
	border-left: 3px solid var(--exp-border);
	color: var(--exp-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: 0 0 var(--space-4);
	padding: var(--space-3);
}

.ms-service-experience-cost-v1__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

.ms-service-experience-cost-v1__card {
	background-color: var(--color-surface);
	border: 1px solid var(--exp-border);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-4);
}

.ms-service-experience-cost-v1__card-head {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	justify-content: space-between;
}

.ms-service-experience-cost-v1__case {
	color: var(--exp-muted);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin: 0;
}

/* The figure the section exists for. */
.ms-service-experience-cost-v1__amount {
	color: #b93f26;
	font-size: 1.75rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	margin: var(--space-2) 0 0;
}

.ms-service-experience-cost-v1__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-3) 0 0;
}

.ms-service-experience-cost-v1__fact dt,
.ms-service-experience-sources-v1__fact dt {
	color: var(--exp-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.ms-service-experience-cost-v1__fact dd,
.ms-service-experience-sources-v1__fact dd {
	color: var(--exp-navy);
	font-size: 0.9375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	margin: 0;
}

.ms-service-experience-cost-v1__text {
	color: var(--exp-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: var(--space-3) 0 0;
	overflow-wrap: anywhere;
}

.ms-service-experience-cost-v1__meta,
.ms-service-experience-sources-v1__meta {
	align-items: baseline;
	color: var(--exp-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--ms-font-size-meta);
	gap: 4px var(--space-3);
	line-height: 1.7;
	/* Pushed down so the source line sits at the foot of every card in a row. */
	margin: auto 0 0;
	padding-top: var(--space-3);
}

.ms-service-experience-cost-v1__source,
.ms-service-experience-sources-v1__source {
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.ms-service-experience-cost-v1__grid--count-2,
	.ms-service-experience-cost-v1__grid--count-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-experience-cost-v1__grid--count-1 {
		max-width: 560px;
	}
}

@media (min-width: 1024px) {
	.ms-service-experience-cost-v1__grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 3. How long it took --------------------------------------------------- */

.ms-service-experience-duration-v1__buckets {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

/*
 * Counts, not bars. The figures are set large enough to compare by reading,
 * which is the only comparison the data supports.
 */
.ms-service-experience-duration-v1__bucket {
	background-color: #f4f6fa;
	border: 1px solid var(--exp-border-soft);
	border-radius: 12px;
	min-width: 0;
	padding: var(--space-3);
}

.ms-service-experience-duration-v1__bucket-label {
	color: var(--exp-muted);
	font-size: var(--ms-font-size-meta);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.ms-service-experience-duration-v1__bucket-value {
	color: var(--exp-navy);
	font-size: 1.5rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	margin: 4px 0 0;
}

.ms-service-experience-duration-v1__note {
	color: var(--exp-muted);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: var(--space-3) 0 0;
}

.ms-service-experience-duration-v1__cases {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
}

.ms-service-experience-duration-v1__case {
	align-items: baseline;
	border-bottom: 1px solid var(--exp-border-soft);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	min-width: 0;
	padding-bottom: var(--space-3);
}

.ms-service-experience-duration-v1__case-title {
	color: var(--exp-muted);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin: 0;
	min-width: 5.5em;
}

.ms-service-experience-duration-v1__days {
	color: var(--exp-navy);
	font-size: 1.125rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	margin: 0;
	min-width: 5em;
}

.ms-service-experience-duration-v1__case-meta {
	align-items: baseline;
	color: var(--exp-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--ms-font-size-meta);
	gap: 4px var(--space-2);
	margin: 0;
}

@media (min-width: 768px) {
	.ms-service-experience-duration-v1__buckets {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 359px) {
	.ms-service-experience-duration-v1__buckets {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 4. The accounts themselves -------------------------------------------- */

.ms-service-experience-sources-v1__intro {
	color: var(--exp-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: 0 0 var(--space-4);
	max-width: 800px;
}

.ms-service-experience-sources-v1__group {
	margin: 0 0 var(--space-5);
}

.ms-service-experience-sources-v1__group:last-child {
	margin-bottom: 0;
}

.ms-service-experience-sources-v1__group-title {
	align-items: baseline;
	border-bottom: 1px solid var(--exp-border);
	color: var(--exp-navy);
	display: flex;
	font-size: 1.0625rem;
	font-weight: 800;
	gap: var(--space-2);
	line-height: 1.4;
	margin: 0 0 var(--space-3);
	padding-bottom: 6px;
}

.ms-service-experience-sources-v1__group-count {
	color: var(--exp-muted);
	font-size: var(--ms-font-size-meta);
	font-weight: 700;
}

.ms-service-experience-sources-v1__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Not the review card. No oversized quotation mark, no avatar and no poster's
 * name as a headline: this is an account of using the service, not a comment
 * about it.
 */
.ms-service-experience-sources-v1__card {
	background-color: var(--color-surface);
	border: 1px solid var(--exp-border);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-4);
}

.ms-service-experience-sources-v1__card-head {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	justify-content: space-between;
	margin-bottom: var(--space-3);
}

.ms-service-experience-sources-v1__text {
	color: var(--exp-text);
	font-size: 0.9375rem;
	line-height: 1.85;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-experience-sources-v1__note {
	color: var(--exp-muted);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: var(--space-2) 0 0;
	overflow-wrap: anywhere;
}

.ms-service-experience-sources-v1__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-3) 0 0;
}

@media (min-width: 768px) {
	.ms-service-experience-sources-v1__grid--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-experience-sources-v1__grid--count-1 {
		max-width: 720px;
	}
}

/* 5. The editors' reading ----------------------------------------------- */

.ms-service-experience-analysis-v1__split {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--space-4);
}

/*
 * A split, not two cards: one comparison rather than two lists. The divider is
 * a rule between the columns and a rule above the second one on a phone.
 */
.ms-service-experience-analysis-v1__side {
	min-width: 0;
	padding-left: var(--space-4);
}

.ms-service-experience-analysis-v1__side--met {
	border-left: 3px solid #cfe5d8;
}

.ms-service-experience-analysis-v1__side--not-met {
	border-left: 3px solid var(--exp-border);
}

.ms-service-experience-analysis-v1__side-title {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.45;
	margin: 0 0 var(--space-3);
}

.ms-service-experience-analysis-v1__side--met .ms-service-experience-analysis-v1__side-title {
	color: #14503a;
}

.ms-service-experience-analysis-v1__side--not-met .ms-service-experience-analysis-v1__side-title {
	color: #8a4038;
}

.ms-service-experience-analysis-v1__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms-service-experience-analysis-v1__item {
	display: flex;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
}

.ms-service-experience-analysis-v1__item:last-child {
	margin-bottom: 0;
}

.ms-service-experience-analysis-v1__number {
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
}

.ms-service-experience-analysis-v1__side--met .ms-service-experience-analysis-v1__number {
	color: #1f7a52;
}

.ms-service-experience-analysis-v1__side--not-met .ms-service-experience-analysis-v1__number {
	color: #9c4038;
}

.ms-service-experience-analysis-v1__body {
	min-width: 0;
}

.ms-service-experience-analysis-v1__item-title {
	color: var(--exp-navy);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-experience-analysis-v1__item-text {
	color: var(--exp-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.85;
	margin: 2px 0 0;
	overflow-wrap: anywhere;
}

/* The line that lets a reader weigh the patterns instead of taking them. */
.ms-service-experience-analysis-v1__method {
	border-top: 1px solid var(--exp-border-soft);
	color: var(--exp-muted);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: var(--space-5) 0 0;
	padding-top: var(--space-3);
}

@media (min-width: 1024px) {
	.ms-service-experience-analysis-v1__split--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =====================================================================
 * Service Detail v1.1 — using it, leaving it, and who wrote the page
 *
 * Using the service, leaving it, the figures behind each editorial score, what
 * changed on the page, and who did the work.
 *
 * Two of these deliberately look unlike their neighbours. The how-to flow is
 * light numbered cards because the registration guide below it is the heavy
 * one — screen captures, sources, dates — and a reader has to see at a glance
 * which is which. The withdrawal answers are a definition list on a calm
 * ground, with no red and no alert: a clear exit is a reason to trust a
 * service, and designing it as a caution would say something the data does not.
 *
 * The internal guide links are white cards with a navy title, never filled
 * coral. On this page a filled coral control means "leave for the vendor's
 * site", and a link to one of our own articles must not make the same promise.
 *
 * Same palette as the sections above, every value checked on its own ground.
 * ================================================================== */

.ms-service-how-to-v1,
.ms-service-withdrawal-v1,
.ms-service-history-v1,
.ms-service-attribution-v1 {
	--b3-navy: #163455;
	--b3-text: #304860;
	--b3-muted: #5d6c7e;
	--b3-coral: #c24a46;
	--b3-border: #e4e8ef;
	--b3-border-soft: #eef1f6;
	min-width: 0;
}

.ms-service-how-to-v1__inner,
.ms-service-withdrawal-v1__inner,
.ms-service-history-v1__inner,
.ms-service-attribution-v1__inner {
	min-width: 0;
	width: 100%;
}

.ms-service-how-to-v1__heading,
.ms-service-withdrawal-v1__heading,
.ms-service-history-v1__heading,
.ms-service-attribution-v1__heading {
	margin-bottom: var(--space-4);
}

.ms-service-how-to-v1__eyebrow,
.ms-service-withdrawal-v1__eyebrow,
.ms-service-history-v1__eyebrow,
.ms-service-attribution-v1__eyebrow {
	color: var(--b3-coral);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0 0 2px;
}

.ms-service-how-to-v1__title,
.ms-service-withdrawal-v1__title,
.ms-service-history-v1__title,
.ms-service-attribution-v1__title {
	color: var(--b3-navy);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.45;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-how-to-v1__intro,
.ms-service-withdrawal-v1__intro {
	color: var(--b3-text);
	font-size: 0.9375rem;
	line-height: 1.85;
	margin: 0 0 var(--space-4);
	max-width: 800px;
}

/* Shared: the internal guide link ---------------------------------------- */

/*
 * A card, not a button. White ground, navy title, and an arrow instead of a
 * fill — everything the CTA is not.
 */
.ms-service-guide-link-v1 {
	align-items: center;
	background-color: var(--color-surface);
	border: 1px solid #dfe5ee;
	border-radius: 12px;
	color: #163455;
	display: flex;
	gap: var(--space-3);
	justify-content: space-between;
	/* Comfortably past the 40px a thumb wants. */
	min-height: 56px;
	padding: var(--space-3) var(--space-4);
	text-decoration: none;
}

.ms-service-guide-link-v1:hover {
	background-color: #f7f9fc;
	border-color: #c9d4e2;
	color: #163455;
}

.ms-service-guide-link-v1:focus-visible {
	outline: 3px solid #163455;
	outline-offset: 2px;
}

.ms-service-guide-link-v1__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ms-service-guide-link-v1__eyebrow {
	color: #5d6c7e;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.ms-service-guide-link-v1__title {
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.5;
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-decoration-color: rgba(22, 52, 85, 0.22);
	text-underline-offset: 3px;
}

.ms-service-guide-link-v1:hover .ms-service-guide-link-v1__title {
	text-decoration-color: currentcolor;
}

.ms-service-guide-link-v1__arrow {
	color: #c24a46;
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 800;
}

/* 1. How to use it ------------------------------------------------------- */

.ms-service-how-to-v1__steps {
	counter-reset: none;
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}

/*
 * Light on purpose. The registration section below is the one with the
 * screenshots; if these cards carried the same weight a reader would read the
 * same thing twice.
 */
.ms-service-how-to-v1__step {
	background-color: #f9fafc;
	border: 1px solid var(--b3-border-soft);
	border-radius: 12px;
	display: flex;
	gap: var(--space-3);
	min-width: 0;
	padding: var(--space-3) var(--space-4);
}

.ms-service-how-to-v1__number {
	color: var(--b3-coral);
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
}

.ms-service-how-to-v1__body {
	min-width: 0;
}

.ms-service-how-to-v1__step-title {
	color: var(--b3-navy);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-how-to-v1__step-text {
	color: var(--b3-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	margin: 2px 0 0;
	overflow-wrap: anywhere;
}

/*
 * A thumbnail, not the subject. Bounded in both directions: a portrait phone
 * capture at 180px wide is still 320px tall, and one step carrying one would
 * set the height of every card in its row.
 */
.ms-service-how-to-v1__figure {
	margin: var(--space-2) 0 0;
	max-width: 180px;
}

.ms-service-how-to-v1__image {
	border: 1px solid var(--b3-border-soft);
	border-radius: 8px;
	display: block;
	height: auto;
	max-height: 160px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.ms-service-how-to-v1__meta,
.ms-service-withdrawal-v1__meta {
	color: var(--b3-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--ms-font-size-meta);
	gap: 2px var(--space-4);
	line-height: 1.7;
	margin: var(--space-3) 0 0;
}

.ms-service-withdrawal-v1__source-link {
	color: var(--b3-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ms-service-withdrawal-v1__source-link:hover {
	color: var(--b3-navy);
}

.ms-service-withdrawal-v1__source-link:focus-visible {
	outline: 3px solid var(--b3-navy);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.ms-service-how-to-v1__steps--count-2,
	.ms-service-how-to-v1__steps--count-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ms-service-how-to-v1__steps--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 2. Leaving ------------------------------------------------------------- */

.ms-service-withdrawal-v1__list {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
}

/*
 * Facts on a calm ground. No warning colour anywhere in here — see the block
 * comment at the top of this section.
 */
.ms-service-withdrawal-v1__item {
	background-color: #f8f9fb;
	border: 1px solid var(--b3-border-soft);
	border-radius: 12px;
	min-width: 0;
	padding: var(--space-3) var(--space-4);
}

.ms-service-withdrawal-v1__label {
	color: var(--b3-muted);
	font-size: var(--ms-font-size-meta);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.ms-service-withdrawal-v1__value {
	color: var(--b3-navy);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
	margin: 3px 0 0;
	overflow-wrap: anywhere;
}

.ms-service-withdrawal-v1 .ms-service-guide-link-v1 {
	margin-top: var(--space-4);
}

.ms-service-withdrawal-v1 .ms-service-evidence-v1 {
	margin-bottom: 0;
	margin-top: var(--space-4);
}

@media (min-width: 768px) {
	.ms-service-withdrawal-v1__list--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 3. The figures behind a score ----------------------------------------- */

.ms-service-editorial-v1__evidence {
	margin: var(--space-3) 0 0;
}

.ms-service-editorial-v1__evidence-title {
	color: #4a5a70;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0 0 6px;
}

.ms-service-editorial-v1__evidence-grid {
	display: grid;
	gap: 6px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
}

/*
 * Small key-value blocks rather than a table: two figures do not need a header
 * row, and ten criteria would mean ten tables.
 */
.ms-service-editorial-v1__evidence-item {
	background-color: #f7f9fc;
	border-radius: 8px;
	min-width: 0;
	padding: 7px 10px;
}

.ms-service-editorial-v1__evidence-label {
	color: #5d6c7e;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: anywhere;
}

.ms-service-editorial-v1__evidence-value {
	color: #163455;
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.5;
	margin: 1px 0 0;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.ms-service-editorial-v1__evidence-grid--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 4. What changed -------------------------------------------------------- */

.ms-service-history-v1__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * A timeline: the rule down the left is the thread, and the date sits on it.
 * Not cards — fifty cards is a wall, and fifty dates is a history.
 */
.ms-service-history-v1__entry {
	border-left: 2px solid #dde3ec;
	margin: 0;
	padding: 0 0 var(--space-4) var(--space-4);
	position: relative;
}

.ms-service-history-v1__entry:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.ms-service-history-v1__entry::before {
	background-color: var(--b3-coral);
	border-radius: 999px;
	content: "";
	height: 7px;
	left: -4px;
	position: absolute;
	top: 7px;
	width: 7px;
}

.ms-service-history-v1__date {
	color: var(--b3-navy);
	display: block;
	font-size: 0.8125rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.ms-service-history-v1__entry-title {
	color: var(--b3-navy);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.7;
	margin: 2px 0 0;
	overflow-wrap: anywhere;
}

.ms-service-history-v1__details {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}

.ms-service-history-v1__detail {
	color: var(--b3-muted);
	font-size: var(--ms-font-size-meta);
	line-height: 1.8;
	overflow-wrap: anywhere;
	padding-left: 1em;
	position: relative;
}

.ms-service-history-v1__detail::before {
	content: "・";
	left: 0;
	position: absolute;
}

/* 5. Who did the work --------------------------------------------------- */

.ms-service-attribution-v1__grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: minmax(0, 1fr);
}

.ms-service-attribution-v1__person {
	align-items: flex-start;
	border-top: 1px solid var(--b3-border-soft);
	display: flex;
	gap: var(--space-3);
	min-width: 0;
	padding-top: var(--space-4);
}

.ms-service-attribution-v1__person:first-child {
	border-top: 0;
	padding-top: 0;
}

.ms-service-attribution-v1__avatar {
	border-radius: 999px;
	flex-shrink: 0;
	height: 56px;
	object-fit: cover;
	width: 56px;
}

.ms-service-attribution-v1__person-body {
	min-width: 0;
}

.ms-service-attribution-v1__role {
	color: var(--b3-coral);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin: 0;
}

.ms-service-attribution-v1__name {
	color: var(--b3-navy);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.5;
	margin: 1px 0 0;
	overflow-wrap: anywhere;
}

.ms-service-attribution-v1__bio {
	color: var(--b3-text);
	font-size: var(--ms-font-size-meta);
	line-height: 1.85;
	margin: 4px 0 0;
	max-width: 62ch;
	overflow-wrap: anywhere;
}

.ms-service-attribution-v1__profile-link {
	align-items: center;
	color: var(--b3-muted);
	display: inline-flex;
	font-size: var(--ms-font-size-meta);
	margin-top: 4px;
	/* 24px: the smallest target WCAG 2.2 accepts, and this link stands alone. */
	min-height: 24px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ms-service-attribution-v1__profile-link:hover {
	color: var(--b3-navy);
}

.ms-service-attribution-v1__profile-link:focus-visible,
.ms-service-attribution-v1__policy-link:focus-visible {
	outline: 3px solid var(--b3-navy);
	outline-offset: 2px;
}

.ms-service-attribution-v1__policy-list {
	display: grid;
	gap: var(--space-2);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Internal links, not buttons: see the block comment above. */
.ms-service-attribution-v1__policy-link {
	align-items: center;
	background-color: #f7f9fc;
	border: 1px solid var(--b3-border-soft);
	border-radius: 10px;
	color: var(--b3-navy);
	display: flex;
	gap: var(--space-2);
	justify-content: space-between;
	min-height: 44px;
	padding: 10px var(--space-3);
	text-decoration: none;
}

.ms-service-attribution-v1__policy-link:hover {
	background-color: #eff4fa;
	color: var(--b3-navy);
}

.ms-service-attribution-v1__policy-label {
	font-size: 0.875rem;
	font-weight: 700;
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-decoration-color: rgba(22, 52, 85, 0.22);
	text-underline-offset: 3px;
}

.ms-service-attribution-v1__policy-link:hover .ms-service-attribution-v1__policy-label {
	text-decoration-color: currentcolor;
}

.ms-service-attribution-v1__policy-arrow {
	color: var(--b3-muted);
	flex-shrink: 0;
	font-weight: 800;
}

@media (min-width: 768px) {
	.ms-service-attribution-v1__policy-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-service-attribution-v1__avatar {
		height: 72px;
		width: 72px;
	}
}

@media (min-width: 1024px) {
	.ms-service-attribution-v1__grid--count-2 {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}