/* MagicPod MCP feature page styles.
   Follows the AI test center page (ai-test-center/style.css): same section
   rhythm, highlighter, card surface and Q&A. This file is only loaded when
   %{CCD}/eq/mcp-server, so the generic class names (.section-title, .faq-*)
   do not leak to other pages. */

/* Base */
section.mcp-page {
    background: #fff;
    padding: 0;
    font-family: 'Hiragino Sans', sans-serif;
}

.mcp-page * {
    box-sizing: border-box;
}

.mcp-page h1,
.mcp-page h2,
.mcp-page h3 {
    color: #2a3037;
}

/* .body-renewal2025 sets h1-h5 to 600 and p to 400 at (0,1,1), which beats
   a single class. Scoped to .mcp-page so the page's own weights apply. */
.mcp-page .mcp-title {
    font-weight: 700;
}

.mcp-page .mcp-lead {
    font-weight: 500;
}

.mcp-page .mcp-label,
.mcp-page .mcp-hero-agents {
    font-weight: 600;
}

.container.container_topicpath_mcp-server {
    display: none;
}

/* 100vw includes the classic scrollbar, so the full-bleed bands below would
   overflow by its width. Clip rather than hide, so sticky descendants still work. */
html:has(body.mcp-server__body),
body.mcp-server__body {
    overflow-x: clip;
}

/* Intro band: a light, full-bleed field with soft brand-green and teal
   glows behind the visual (the light counterpart of the skills band),
   fading to white so the page carries on without a hard edge */
.mcp-intro {
    position: relative;
    isolation: isolate;
    padding: 72px 0 56px;
}

/* The use cases follow at the usual section gap */
.mcp-intro + .mcp-section {
    margin-top: 100px;
}

.mcp-intro::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background:
        radial-gradient(ellipse 42% 58% at 70% 46%, rgba(46, 204, 128, 0.16), transparent 70%),
        radial-gradient(ellipse 36% 46% at 96% 8%, rgba(32, 160, 200, 0.12), transparent 70%),
        radial-gradient(ellipse 34% 40% at 30% 0%, rgba(110, 90, 200, 0.05), transparent 70%),
        linear-gradient(#f4f6f8, #fff);
}

/* Header / First view: text left, the animated visual given more room */
.mcp-header {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 40px;
    max-width: 1240px;
    margin: 0 auto;
}

/* Dark pill with the MagicPod mark, like the MCP call in the agent window */
.mcp-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    background: #1d2228;
    box-shadow: 0 6px 18px rgba(20, 24, 29, 0.16);
    font-size: 13px;
    font-weight: 600;
    color: #eef0f3;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.mcp-label img {
    display: block;
    width: 16px;
    height: auto;
}

.mcp-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    margin: 0 0 12px;
}

/* The promise, in the brand-green to teal of the page's glows */
.mcp-title-em {
    background: linear-gradient(100deg, #0ba360 10%, #19a8a0 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.mcp-lead {
    font-size: 16px;
    font-weight: 500;
    color: #4a5059;
    line-height: 1.6;
    margin: 0 0 24px;
    /* Wrap at phrase boundaries (it is centred on tablets and phones) */
    word-break: auto-phrase;
}

/* Supported agents, one quiet line under the lead (the full list has its
   own section below) */
.mcp-hero-agents {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #2a3037;
    line-height: 1.6;
    word-break: auto-phrase;
}

.mcp-nowrap {
    white-space: nowrap;
}

/* Free on every plan: a key point, set as a green tag and a bold line */
.mcp-header-text .mcp-free {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #2a3037;
    line-height: 1.5;
}

.mcp-free-tag {
    padding: 5px 12px;
    border-radius: 3px;
    background: linear-gradient(100deg, #0ba360, #19a8a0);
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.04em;
}

/* The text comes up in turn while the visual starts */
.mcp-header-text > * {
    animation: mcp-hero-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.mcp-header-text > :nth-child(2) { animation-delay: 0.08s; }
.mcp-header-text > :nth-child(3) { animation-delay: 0.16s; }
.mcp-header-text > :nth-child(4) { animation-delay: 0.24s; }
.mcp-header-text > :nth-child(5) { animation-delay: 0.32s; }

@keyframes mcp-hero-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* A faint dot grid behind the visual, fading out towards its edges */
.mcp-hero-visual {
    position: relative;
}

.mcp-hero-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12% -16% -12% -8%;
    background-image: radial-gradient(rgba(42, 48, 55, 0.26) 1.3px, transparent 1.7px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
    pointer-events: none;
}

/* The hero: an AI agent driving MagicPod, an SVG animated by illust.js.
   Wider than its column, so MagicPod's window runs on past it (cut by the
   screen edge when there is no room) */
.mcp-illust.mcp-hero-illust {
    display: block;
    width: 118%;
    max-width: none;
    height: auto;
}

/* Shared section: the same rhythm and title as the AI test center and
   real device test center pages (100px between sections, 27px titles) */
.mcp-section {
    max-width: 960px;
    margin: 100px auto;
}

.section-title {
    font-size: 31px;
    color: #2a3037;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 32px;
    /* Wrap Japanese at phrase boundaries, not mid-word */
    word-break: auto-phrase;
}

.mcp-section-lead {
    font-size: 16px;
    color: #6b717a;
    text-align: center;
    line-height: 1.8;
    margin: 0 0 40px;
}

/* A lead sits closer to its title, as the real device test center's note */
.section-title + .mcp-section-lead {
    margin-top: -16px;
}

/* Highlighter-style emphasis; keep the product name from breaking mid-word */
.mcp-highlight {
    background: linear-gradient(transparent 60%, rgba(11, 163, 96, 0.3) 60%) no-repeat;
    background-size: 100% 100%;
    white-space: nowrap;
}

.fade-in-up .mcp-highlight {
    background-size: 0% 100%;
    transition: background-size 0.8s ease-out 0.5s;
}

.fade-in-up.visible .mcp-highlight {
    background-size: 100% 100%;
}

/* Use cases: each one is a centred heading over a row of the chat (your
   request and the agent's reply) and what it produced. */
.mcp-uses {
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.mcp-use h3 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 22px;
}

/* "使用例 01" over each heading: a small dark tag, like the top page's
   "理由その1" labels */
.mcp-use-tag {
    display: table;
    margin: 0 auto 6px;
    padding: 5px 14px;
    border-radius: 4px;
    background: #2a3037;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
    line-height: 1.5;
}

.mcp-use-body {
    display: grid;
    /* The agent window a little narrower, so what it produced leads */
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 48px;
}

/* A simple AI agent window in dark mode, to stand apart from the light
   MagicPod illustration beside it. Deliberately generic (no product's
   look or logo): a title bar, the conversation, and the message box. */
.mcp-agent {
    display: flex;
    flex-direction: column;
    background: #1d2228;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(20, 24, 29, 0.12), 0 24px 56px rgba(20, 24, 29, 0.22);
    overflow: hidden;
}

.mcp-agent-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: #23292f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mcp-agent-dots {
    position: absolute;
    left: 16px;
    display: flex;
    gap: 6px;
}

.mcp-agent-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b424b;
}

.mcp-agent-title {
    font-size: 12px;
    font-weight: 600;
    color: #8a919a;
    letter-spacing: 0.04em;
}

.mcp-agent-log {
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px;
}

/* The agent calling MagicPod MCP: a quiet status line between the
   request and the reply */
.mcp-tool {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 0;
    padding: 5px 12px 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    color: #a3a9b2;
}

.mcp-tool-icon {
    display: block;
    width: 14px;
    height: auto;
}

.mcp-tool-running {
    display: none;
}

.mcp-agent-input {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 16px;
    padding: 10px 10px 10px 16px;
    background: #252b32;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.mcp-agent-field {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.mcp-agent-placeholder {
    color: #6f7680;
}

.mcp-agent-typed {
    color: #eef0f3;
}

/* Send button: a green circle with an up arrow, greyed out while empty */
.mcp-agent-send {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #3b424b;
    transition: background-color 0.2s;
}

.mcp-agent-send::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(45deg);
}

/* What the agent produced: an SVG animated by illust.js */
.mcp-illust {
    display: block;
    width: 100%;
    height: auto;
}

/* Shared bubble shape: rounded, with a small tail at the bottom corner */
.mcp-prompt,
.mcp-reply {
    position: relative;
    max-width: 90%;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.7;
    /* Break Japanese at phrase boundaries so no word is left dangling */
    word-break: auto-phrase;
    text-wrap: pretty;
}

.mcp-prompt::after,
.mcp-reply::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 16px;
    height: 22px;
    background: inherit;
}

/* Your request: lighter grey, right side, tail bottom-right */
.mcp-prompt {
    align-self: flex-end;
    margin: 0;
    background: #3a414a;
    border-bottom-right-radius: 4px;
    color: #f2f4f6;
}

.mcp-prompt::after {
    right: -12px;
    clip-path: path("M0 0 Q8 16 16 22 Q8 22 0 22 Z");
}

/* The agent's reply: a slightly raised dark card, left side, tail bottom-left */
.mcp-reply {
    align-self: flex-start;
    margin-top: 12px;
    background: #2a3038;
    border-bottom-left-radius: 4px;
    color: #d9dde2;
}

.mcp-reply::after {
    left: -12px;
    clip-path: path("M16 0 Q8 16 0 22 Q8 22 16 22 Z");
}

.mcp-reply p {
    margin: 0;
}

/* Entrance: the heading, the agent window and the illustration fade up;
   then the page script plays the chat by adding classes to .mcp-use:
   is-typing (request typed in the box), is-sent (request bubble),
   is-working (MagicPod MCP in use, illustration playing), is-done and
   is-replied (the agent's reply). .is-animated is added by the page
   script, so nothing is hidden without JS or with reduced motion. */
.mcp-uses.is-animated .mcp-use h3,
.mcp-uses.is-animated .mcp-agent,
.mcp-uses.is-animated .mcp-use-visual,
.mcp-uses.is-animated .mcp-prompt,
.mcp-uses.is-animated .mcp-tool,
.mcp-uses.is-animated .mcp-reply {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mcp-uses.is-animated .mcp-use h3,
.mcp-uses.is-animated .mcp-agent,
.mcp-uses.is-animated .mcp-use-visual {
    transform: translateY(16px);
}

.mcp-uses.is-animated .mcp-agent {
    transition-delay: 0.15s;
}

.mcp-uses.is-animated .mcp-use-visual {
    transition-duration: 0.8s;
    transition-delay: 0.3s;
}

.mcp-uses.is-animated .mcp-use.is-shown h3,
.mcp-uses.is-animated .mcp-use.is-shown .mcp-agent,
.mcp-uses.is-animated .mcp-use.is-shown .mcp-use-visual {
    opacity: 1;
    transform: none;
}

.mcp-uses.is-animated .mcp-prompt {
    transform: translateY(12px) scale(0.94);
    transform-origin: bottom right;
}

.mcp-uses.is-animated .mcp-tool {
    transform: translateY(8px);
}

.mcp-uses.is-animated .mcp-reply {
    transform: translateY(12px) scale(0.94);
    transform-origin: bottom left;
}

.mcp-uses.is-animated .mcp-use.is-sent .mcp-prompt,
.mcp-uses.is-animated .mcp-use.is-working .mcp-tool,
.mcp-uses.is-animated .mcp-use.is-replied .mcp-reply {
    opacity: 1;
    transform: none;
}

/* While MagicPod MCP is in use the line says so and its icon pulses */
.mcp-uses.is-animated .mcp-use:not(.is-done) .mcp-tool-running {
    display: inline;
}

.mcp-uses.is-animated .mcp-use:not(.is-done) .mcp-tool-done {
    display: none;
}

.mcp-uses.is-animated .mcp-use:not(.is-done) .mcp-tool-icon {
    animation: mcp-tool-pulse 1s ease-in-out infinite;
}

@keyframes mcp-tool-pulse {
    50% {
        opacity: 0.25;
    }
}

/* Typing: the placeholder gives way to the text and a blinking caret */
.mcp-use.is-typing .mcp-agent-placeholder {
    display: none;
}

.mcp-use.is-typing .mcp-agent-typed::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.1em;
    margin-left: 1px;
    vertical-align: -0.15em;
    background: #eef0f3;
    animation: mcp-caret 0.8s steps(1) infinite;
}

@keyframes mcp-caret {
    50% {
        opacity: 0;
    }
}

.mcp-use.is-typing .mcp-agent-send {
    background: #2ecc80;
}

/* Supported AI agents */
.mcp-agents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mcp-agents li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 152px;
    height: 64px;
    padding: 0 28px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(42, 48, 55, 0.05), inset 0 0 0 1px rgba(42, 48, 55, 0.08);
    font-size: 17px;
    font-weight: 600;
    color: #2a3037;
}

/* Official skills: a full-bleed dark band so the section stands out. A deep
   charcoal base with soft brand-green and teal glows, like a mesh gradient. */
.mcp-section.mcp-skills-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: none;
    margin: 100px calc(50% - 50vw);
    padding: 100px 20px;
    background:
        radial-gradient(ellipse 55% 70% at 12% 0%, rgba(46, 204, 128, 0.3), transparent 70%),
        radial-gradient(ellipse 50% 65% at 92% 100%, rgba(32, 160, 200, 0.28), transparent 70%),
        radial-gradient(ellipse 40% 50% at 60% 40%, rgba(110, 90, 200, 0.1), transparent 70%),
        linear-gradient(160deg, #20262d, #171b20);
}

.mcp-skills-band > * {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Accent: the hero's agent window, large and tilted, kept inside the band
   (it clips nothing) and behind the frosted cards */
.mcp-skills-band > .mcp-skills-accent {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: max(32px, calc(50% - 680px));
    width: 320px;
    max-width: none;
    height: auto;
    /* --mcp-parallax, --mcp-drift and --mcp-tilt are set by the page
       script while scrolling */
    transform: translate(var(--mcp-drift, 0px), calc(-50% + 14px + var(--mcp-parallax, 0px))) rotate(calc(9deg + var(--mcp-tilt, 0deg)));
    opacity: 0.9;
    pointer-events: none;
    will-change: transform;
}

.mcp-skills-band .section-title {
    color: #fff;
    /* Lifts the white title off the bright green marker */
    text-shadow: 0 1px 8px rgba(10, 14, 18, 0.45), 0 2px 12px rgba(10, 14, 18, 0.35);
}

/* The light marker reads too faint on dark, so it is stronger here */
.mcp-skills-band .mcp-highlight {
    background-image: linear-gradient(transparent 60%, rgba(46, 204, 128, 0.75) 60%);
}

.mcp-skills-band .mcp-section-lead {
    color: rgba(255, 255, 255, 0.75);
}

.mcp-skills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mcp-skill-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Frosted panels so the glows show softly through */
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 32px 28px;
}

.mcp-skill-card h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

/* Voices */
.mcp-voices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mcp-voice-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    border-radius: 8px;
    padding: 36px 36px 28px;
    margin: 0;
}

/* A large, faint opening quote mark at the top left, where a quote
   starts, behind the avatar and text */
.mcp-voice-card::before {
    content: "\201C";
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 100px;
    font-weight: 700;
    line-height: 1;
    color: rgba(42, 48, 55, 0.06);
    pointer-events: none;
}

/* Avatar on the left, the quote beside it */
.mcp-voice-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.mcp-voice-card blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2a3037;
    line-height: 1.6;
}

.mcp-voice-card figcaption {
    padding-top: 20px;
    border-top: 1px solid #ececef;
    font-size: 14px;
    line-height: 1.6;
}

.mcp-voice-author {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5059;
}

.mcp-voice-card figcaption a {
    color: var(--main-color-d1);
}

.mcp-voice-card figcaption a:hover {
    text-decoration: underline;
}

/* Generic avatar, no facial features: a head and shoulders cut out of a
   tinted circle. Each card gets its own muted tint. */
.mcp-avatar {
    /* Rich tones from the page's palette (slate, brand green, purple and
       teal glows), so the avatars draw the eye to each voice */
    --mcp-avatar-bg: linear-gradient(135deg, #6b7684, #3a4048);
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--mcp-avatar-bg);
    box-shadow: 0 0px 6px rgba(42, 48, 55, 0.18);
    overflow: hidden;
}

.mcp-avatar::before,
.mcp-avatar::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    opacity: 0.92;
}

.mcp-avatar::before {
    top: 11px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.mcp-avatar::after {
    top: 31px;
    width: 32px;
    height: 28px;
    border-radius: 16px 16px 0 0;
}

.mcp-voice-card:nth-child(2) .mcp-avatar {
    --mcp-avatar-bg: linear-gradient(135deg, #2ecc80, #0b8f55);
}

.mcp-voice-card:nth-child(3) .mcp-avatar {
    --mcp-avatar-bg: linear-gradient(135deg, #8f7ee0, #5b47b8);
}

.mcp-voice-card:nth-child(4) .mcp-avatar {
    --mcp-avatar-bg: linear-gradient(135deg, #3cb6d8, #1a7f9e);
}

/* Security: the same dark mesh band as the official skills (glows
   mirrored), with a large shield centred behind the cards */
.mcp-security {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 100px calc(50% - 50vw);
    padding: 100px 20px;
    background:
        radial-gradient(ellipse 55% 70% at 88% 0%, rgba(46, 204, 128, 0.3), transparent 70%),
        radial-gradient(ellipse 50% 65% at 8% 100%, rgba(32, 160, 200, 0.28), transparent 70%),
        radial-gradient(ellipse 40% 50% at 40% 40%, rgba(110, 90, 200, 0.1), transparent 70%),
        linear-gradient(200deg, #20262d, #171b20);
}

/* --mcp-parallax is set by the page script while scrolling */
.mcp-security > .mcp-security-accent {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 340px;
    height: auto;
    transform: translate(-50%, calc(-50% + var(--mcp-parallax, 0px)));
    /* White and faint: a backdrop, not a feature */
    opacity: 0.08;
    pointer-events: none;
    will-change: transform;
}

.mcp-security-inner {
    max-width: 960px;
    margin: 0 auto;
}

.mcp-security .section-title {
    color: #fff;
}

.mcp-security-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Frosted, like the skill cards, so the shield shows softly through */
.mcp-security-point {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 32px;
}

.mcp-security-point h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    margin: 0 0 12px;
}

.mcp-security-point p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.85;
    margin: 0;
}

/* Q&A, matching the test center pages */
.faq-section {
    max-width: 960px;
    margin: 0 auto 100px;
}

.faq-list {
    background: #f8f8fc;
    border-radius: 8px;
    padding: 24px 32px;
}

.faq-item {
    margin-bottom: 16px;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.faq-icon {
    flex-shrink: 0;
    width: 39px;
    /* Q has a descender and sits low, so the padding is flipped to offset it */
    padding: 3px 10px 5px;
    background: #2a3037;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-question h3 {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.faq-toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-block;
    transition: transform 0.3s ease;
}

.faq-item.is-open .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    padding: 0 16px;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out, margin-top 0.4s ease-out;
}

.faq-item.is-open .faq-answer {
    max-height: 1000px;
    margin-top: 16px;
    padding: 16px;
    opacity: 1;
}

.faq-answer p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.faq-answer a {
    color: var(--main-color-d1);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .mcp-header-text > * {
        animation: none;
    }

    .fade-in-up .mcp-highlight {
        background-size: 100% 100%;
        transition: none;
    }
}

/* ==========================================
   Responsive
   ========================================== */

/* Laptops (<= 1439px): the page container leaves little side room, so
   the hero gets its own; the text column is only as wide as the lead
   needs and the visual stays inside its column (no bleed), so text and
   visual sit together rather than at the two screen edges */
@media screen and (max-width: 1439px) {
    .mcp-header {
        grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
        gap: 40px;
        padding: 0 40px;
    }

    .mcp-illust.mcp-hero-illust {
        width: 100%;
    }
}

/* Narrow desktop (<= 1199px): keep the title to two lines beside the
   hero visual */
@media screen and (max-width: 1199px) {
    /* The text column only as wide as the lead needs, and room at the
       sides, so text and visual sit together instead of at the two edges
       with a gap between */
    .mcp-header {
        grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
        gap: 32px;
        padding: 0 32px;
    }

    .mcp-title {
        font-size: 42px;
    }

    /* iPad landscape and small laptops: the use cases would run edge to
       edge, so they are kept a little narrower than the column */
    .mcp-use-body {
        max-width: 860px;
        margin: 0 auto;
    }

    /* No room to bleed here: the visual stays inside its column */
    .mcp-illust.mcp-hero-illust {
        width: 100%;
    }

    /* Less room beside the content: quieter so the text stays clear */
    .mcp-skills-band > .mcp-skills-accent {
        opacity: 0.55;
    }
}

/* Tablet (<= 959px) */
@media screen and (max-width: 959px) {
    .mcp-intro {
        padding: 40px 0 40px;
    }

    .mcp-intro + .mcp-section {
        margin-top: 64px;
    }

    /* Stacked and centred: the visual at its own proportions, no bleed,
       capped so it does not grow too large on tablets */
    .mcp-hero-visual {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    .mcp-illust.mcp-hero-illust {
        width: 100%;
        height: auto;
    }

    .mcp-header-text {
        text-align: center;
    }

    .mcp-header-text .mcp-free {
        justify-content: center;
    }

    .mcp-hero-agents {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .mcp-header {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0;
    }

    .mcp-title {
        font-size: 40px;
    }

    .mcp-br-pc {
        display: none;
    }

    /* Tighter vertical rhythm, as the real device test center */
    .mcp-section {
        margin: 64px auto;
    }

    .mcp-use-body {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Stacked, the illustrations would fill the whole width: keep them to
       a comfortable size */
    .mcp-use-visual {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Narrow columns: the badge goes above the title, both centred */
    .mcp-section.mcp-skills-band,
    .mcp-security {
        margin: 64px calc(50% - 50vw);
        padding: 72px 20px;
    }

    .faq-list {
        padding: 24px 16px;
    }

    .faq-question {
        gap: 8px;
    }

    .faq-icon {
        font-size: 16px;
    }

    .faq-question h3 {
        font-size: 14px;
    }

    .faq-answer p {
        font-size: 14px;
    }
}

/* Tablets and phones with JS: the use cases keep the desktop layout,
   side by side at 760px, scaled to fit by the page script (zoom). Desktop
   sizes inside, since the whole block is scaled. */
@media screen and (max-width: 959px) {
    .mcp-uses.is-fitted .mcp-use-body {
        width: 760px;
        margin: 0 auto;
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: 16px;
    }

    .mcp-uses.is-fitted .mcp-use-visual {
        max-width: none;
    }

    .mcp-uses.is-fitted .mcp-prompt,
    .mcp-uses.is-fitted .mcp-reply {
        max-width: 90%;
        padding: 12px 18px;
        font-size: 14px;
    }

    .mcp-uses.is-fitted .mcp-agent-log {
        padding: 24px 22px 20px;
    }

    .mcp-uses.is-fitted .mcp-agent-input {
        margin: 0 16px 16px;
        font-size: 14px;
    }
}

/* Smartphone (<= 767px) */
@media screen and (max-width: 767px) {
    .section-title {
        font-size: 19px;
    }

    .mcp-title {
        font-size: 31px;
    }

    .mcp-intro + .mcp-section {
        margin-top: 48px;
    }

    .mcp-header-text .mcp-free {
        font-size: 16px;
    }

    .mcp-section-lead,
    .mcp-lead {
        font-size: 14px;
    }

    .mcp-section-lead {
        text-align: left;
        margin-bottom: 32px;
    }

    /* A one-line lead stays centred under its title */
    .mcp-section-lead--center {
        text-align: center;
    }

    .section-title + .mcp-section-lead {
        margin-top: -12px;
    }

    .mcp-section {
        margin: 48px auto;
    }

    .mcp-uses {
        gap: 72px;
    }

    .mcp-use h3 {
        margin-bottom: 24px;
    }

    .mcp-prompt,
    .mcp-reply {
        max-width: 90%;
    }

    .mcp-agent-log {
        padding: 24px 18px 20px;
    }

    .mcp-agent-input {
        margin: 0 12px 12px;
        font-size: 13px;
    }

    .mcp-use h3,
    .mcp-skill-card h3,
    .mcp-security-point h3 {
        font-size: 16px;
    }

    .mcp-prompt,
    .mcp-reply {
        padding: 14px 18px;
        font-size: 14px;
    }

    .mcp-agents {
        gap: 8px;
    }

    .mcp-agents li {
        min-width: calc(50% - 4px);
        height: 52px;
        font-size: 15px;
    }

    .mcp-skills,
    .mcp-voices,
    .mcp-security-points {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mcp-skill-card {
        padding: 24px 20px;
    }

    .mcp-voice-card {
        padding: 28px 24px 20px;
    }

    .mcp-voice-card blockquote {
        font-size: 15px;
    }

    .mcp-voice-body {
        gap: 14px;
    }

    .mcp-section.mcp-skills-band {
        margin: 48px calc(50% - 50vw);
        padding: 56px 16px;
    }

    /* Smaller and quieter, low in the corner, so the text stays clear */
    .mcp-skills-band > .mcp-skills-accent {
        top: auto;
        bottom: 56px;
        right: 16px;
        width: 220px;
        transform: translate(var(--mcp-drift, 0px), var(--mcp-parallax, 0px)) rotate(calc(9deg + var(--mcp-tilt, 0deg)));
        opacity: 0.35;
    }

    .mcp-security {
        margin: 48px calc(50% - 50vw);
        padding: 56px 16px;
    }

    .mcp-security > .mcp-security-accent {
        width: 260px;
    }

    .mcp-security-point {
        padding: 24px;
    }

    .mcp-security-point p {
        font-size: 14px;
    }
}