/* konzetsu.com: one stylesheet for every page. Generated by the site generator; do not edit the deployed copy by hand. */
:root {
  --colour-brand-blue: #0e69e2;
  --colour-brand-blue-dark: #0a52b4;
  --colour-brand-light-blue: #28bbf8;
  --colour-pale-blue-background: #edf3ff;
  --colour-body-text: #343434;
  --colour-muted-text: #55657d;
  --colour-navy-deep: #06182f;
  --colour-navy-medium: #0b2a52;
  --colour-attack-red: #ff5d6c;
  --colour-switched-off-green: #34d399;
  --radius-of-cards: 18px;
  --shadow-of-cards: 0 1px 2px rgba(6, 24, 47, 0.06), 0 10px 30px rgba(6, 24, 47, 0.08);
  --maximum-width-of-page-content: 1140px;
  --font-stack-for-all-text: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-stack-for-code-text: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; color: var(--colour-body-text); background: #ffffff; font-family: var(--font-stack-for-all-text);
  font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[lang="ja"] body { line-height: 1.9; letter-spacing: 0.02em; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { font-feature-settings: "palt" 1; letter-spacing: 0.01em; line-height: 1.4; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--colour-brand-blue-dark); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--colour-brand-blue); }
code { font-family: var(--font-stack-for-code-text); font-size: 0.92em; background: rgba(14, 105, 226, 0.09); padding: 0.12em 0.4em; border-radius: 6px; }
h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 0.6em; color: var(--colour-navy-deep); letter-spacing: -0.01em; text-wrap: balance; }
/* Japanese headings: no break between two ideographs or katakana (it would split words); lines break after punctuation and at the zero-width-space marks
   written in the text. overflow-wrap:anywhere is the emergency exit so that a long unbroken phrase can never push the page wider than a phone screen. */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4, html[lang="ja"] .hero-eyebrow-label, html[lang="ja"] .layer-summary-card-name,
html[lang="ja"] .section-eyebrow-label { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
/* All other Japanese text (body copy, cards, lists): strict line-breaking rules (as in JIS X 4051), so that a line can never START with the long-vowel mark or a
   small kana. Seen in the preview before this rule: "ネットワ" at the end of one line and "ーク" at the start of the next. The property is inherited. */
html[lang="ja"] body { line-break: strict; }
/* Short Japanese texts (list items, the rows of the layers card, the "who can act" lines, FAQ questions) may break between any two characters, because only the headings use
   word-break: keep-all. In a narrow column that stranded one or two characters on the last line (39 cases, mostly between 320 and 520 px and around 961 to 1040 px, found by the width
   probe on 2026-11-12; for example "ホスティング事業" and then "者" alone). text-wrap: balance spreads such a short text over lines of nearly equal length instead, but on its
   own it may cut a word in two ("サー" / "バー"), so word-break: auto-phrase (Chrome and Edge 119 and later) is added: the browser then breaks only between Japanese phrases. Both
   properties are inherited, so the list items and the card rows also cover the texts inside them; the two paragraph classes need their own entry because "p" sets text-wrap: pretty,
   which does not prevent this for Japanese. A browser that does not know a property ignores that line and keeps the ordinary line breaking, so the worst case is the old behaviour
   (Safari and Firefox were not tested). overflow-wrap: anywhere is the emergency exit, as for the headings: with auto-phrase alone, a phrase longer than its box (a card row name
   in a 320 px window) cannot shrink and pushed the whole page 26 px wider than the screen (found by the same probe, in the first version of this rule). */
html[lang="ja"] main li, html[lang="ja"] main summary, html[lang="ja"] .attack-layers-card-title-text,
html[lang="ja"] .layer-summary-card-who-can-act, html[lang="ja"] .attack-anatomy-row-who-can-act-text { text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.1rem, 4.6vw + 0.6rem, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 2.4vw + 0.9rem, 2.4rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--colour-brand-light-blue); outline-offset: 3px; border-radius: 4px; }

.skip-link-to-main-content {
  position: absolute; left: 12px; top: -60px; z-index: 1000; background: #ffffff; color: var(--colour-navy-deep); padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.skip-link-to-main-content:focus { top: 12px; }

.page-content-width { width: min(100% - 40px, var(--maximum-width-of-page-content)); margin-inline: auto; }

/* ---------------------------------------------------------------- header and navigation */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(6, 24, 47, 0.94); color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
}
.site-header-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.site-brand-link { display: inline-flex; align-items: center; gap: 12px; color: #ffffff; text-decoration: none; font-weight: 800; letter-spacing: 0.01em; font-size: 1.12rem; }
.site-brand-link:hover { color: #ffffff; }
.site-brand-mark { width: 38px; height: 38px; flex: none; }
.site-brand-name-light-part { font-weight: 500; opacity: 0.86; white-space: nowrap; } /* "by TwoFive" must never be split: on the narrowest phones the logo wraps between the name and its endorsement */
.site-navigation { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.site-navigation-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-navigation-link { display: block; color: #dbe7fb; text-decoration: none; padding: 9px 13px; border-radius: 10px; font-weight: 600; font-size: 0.97rem; }
.site-navigation-link:hover { background: rgba(255, 255, 255, 0.09); color: #ffffff; }
.site-navigation-link[aria-current="page"] { color: #ffffff; background: rgba(40, 187, 248, 0.18); }
.language-switch-link {
  display: inline-block; margin-left: 4px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: #ffffff; text-decoration: none; font-weight: 700; font-size: 0.9rem;
}
.language-switch-link:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
/* white-space: nowrap and flex: none keep the label on one line. Without them the Japanese label wrapped into "メ" and "ニュー" in windows of 320 to 368 px, because the button is a flex item
   that was allowed to shrink and Japanese text may break between katakana (found by the width probe on 2026-11-12). The brand name beside it can wrap instead. */
.mobile-navigation-toggle-button {
  display: none; margin-left: auto; background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 12px; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex: none;
}

/* ---------------------------------------------------------------- buttons */
.button-primary, .button-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 14px; font-weight: 800; text-decoration: none; font-size: 1.02rem; border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.button-primary { background: var(--colour-brand-blue); color: #ffffff; box-shadow: 0 8px 22px rgba(14, 105, 226, 0.38); }
.button-primary:hover { background: #1c78f0; color: #ffffff; transform: translateY(-1px); }
.button-secondary { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.45); }
.button-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.button-secondary-on-light-background { color: var(--colour-brand-blue-dark); border-color: rgba(14, 105, 226, 0.45); }
.button-secondary-on-light-background:hover { background: rgba(14, 105, 226, 0.08); color: var(--colour-brand-blue-dark); }
.header-call-to-action-button { padding: 9px 16px; border-radius: 12px; font-size: 0.93rem; box-shadow: none; }

/* ---------------------------------------------------------------- hero */
.home-hero-section {
  position: relative; overflow: hidden; color: #ffffff; padding: clamp(56px, 8vw, 110px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(900px 480px at 82% 18%, rgba(40, 187, 248, 0.22), transparent 62%),
    radial-gradient(700px 420px at 8% 92%, rgba(14, 105, 226, 0.30), transparent 60%),
    linear-gradient(160deg, var(--colour-navy-deep) 0%, var(--colour-navy-medium) 100%);
}
.home-hero-section::before {
  content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 100%);
}
.home-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-eyebrow-label { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: rgba(40, 187, 248, 0.16); color: #bfe9ff; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.04em; }
.home-hero-section h1 { color: #ffffff; margin-bottom: 0.45em; }
.home-hero-section h1 .hero-headline-accent-words { color: var(--colour-brand-light-blue); }
/* Japanese hero heading in the TWO-column hero (961 px and wider only; below that the hero is one column and the generic size is fine). Measured on 2026-11-12: the text column
   is 463 px wide at a 961 px window, 535 px at 1100 px, and 581 px at most (1200 px and up). The second line of the heading is ten full-width characters, so with the generic 56 px
   size the last two characters fell onto a third line between 961 and 1060 px. The size below is under (column width / 10.6), a limit that already includes a 6 percent margin,
   over the whole range: by about 4.5 percent from 961 to 1180 px, and by 0.7 percent at the 3.4rem cap that applies from 1200 px. */
@media (min-width: 961px) {
  html[lang="ja"] .home-hero-section h1 { font-size: clamp(2.1rem, calc(4.6vw - 2.5px), 3.4rem); }
}
/* Japanese hero heading on the narrowest phones (388 px and below). Its second line is ten full-width characters; at the generic minimum size of 2.1rem (33.6 px) those need 336 px,
   but the text is only 288 px wide in a 320 px window (page width minus the 16 px side margins), so the last two characters ("る。") were stranded on a third line (found by the
   width probe on 2026-11-12). The size now follows the window: (window width minus 32 px) divided by 10.6 leaves room for ten characters per line, and it equals the generic 33.6 px
   at exactly 388 px, so there is no jump where this rule hands over to the generic one. */
@media (max-width: 388px) {
  html[lang="ja"] .home-hero-section h1 { font-size: calc((100vw - 32px) / 10.6); }
}
.hero-lede-paragraph { font-size: clamp(1.08rem, 0.6vw + 1rem, 1.28rem); color: #d3e2fa; max-width: 40em; }
.hero-call-to-action-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 26px; }
.hero-promise-chip-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.hero-promise-chip { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); color: #eaf2ff; font-weight: 600; font-size: 0.92rem; }

/* the card that shows the layers of one attack being switched off, one after another */
.attack-layers-card { background: rgba(6, 24, 47, 0.78); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); padding: 18px 18px 14px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.attack-layers-card-title-bar { display: flex; align-items: center; gap: 8px; padding: 2px 6px 14px; color: #cfe0fb; font-weight: 700; font-size: 0.95rem; }
.attack-layers-card-title-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.attack-layers-card-title-text { margin-left: 6px; }
.attack-layers-list { list-style: none; margin: 0; padding: 0; }
.attack-layer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.07); }
.attack-layer-row-name { font-weight: 700; color: #f2f7ff; font-size: 0.98rem; }
.attack-layer-row-target { display: block; font-weight: 500; color: #98b2d6; font-size: 0.8rem; margin-top: 1px; }
.attack-layer-status-pill { position: relative; flex: none; min-width: 96px; height: 28px; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.08em; }
.attack-layer-status-pill-live, .attack-layer-status-pill-switched-off {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px;
}
.attack-layer-status-pill-live { background: rgba(255, 93, 108, 0.16); color: var(--colour-attack-red); border: 1px solid rgba(255, 93, 108, 0.5); opacity: 0; }
.attack-layer-status-pill-switched-off { background: rgba(52, 211, 153, 0.16); color: var(--colour-switched-off-green); border: 1px solid rgba(52, 211, 153, 0.5); opacity: 1; }
.attack-layer-status-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.attack-layers-card-footnote { margin: 10px 6px 4px; color: #8fa9cf; font-size: 0.82rem; }
/* Default state of the illustration = its final state (every layer DOWN), which is what visitors who ask for reduced motion see. The motion is added
   only for visitors who have no such preference, so no later rule can accidentally switch the animation back on for them. */
@media (prefers-reduced-motion: no-preference) {
  .attack-layer-status-pill-live, .attack-layer-status-pill-switched-off { animation-duration: 13s; animation-timing-function: linear; animation-iteration-count: infinite; }
  @keyframes attack-layer-live-state-of-row-0 { 0%, 11.54% { opacity: 1; } 14.23%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-0 { 0%, 11.54% { opacity: 0; } 14.23%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(1) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-0; }
  .attack-layer-row:nth-child(1) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-0; }
  @keyframes attack-layer-live-state-of-row-1 { 0%, 16.92% { opacity: 1; } 19.62%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-1 { 0%, 16.92% { opacity: 0; } 19.62%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(2) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-1; }
  .attack-layer-row:nth-child(2) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-1; }
  @keyframes attack-layer-live-state-of-row-2 { 0%, 22.31% { opacity: 1; } 25.00%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-2 { 0%, 22.31% { opacity: 0; } 25.00%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(3) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-2; }
  .attack-layer-row:nth-child(3) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-2; }
  @keyframes attack-layer-live-state-of-row-3 { 0%, 27.69% { opacity: 1; } 30.38%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-3 { 0%, 27.69% { opacity: 0; } 30.38%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(4) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-3; }
  .attack-layer-row:nth-child(4) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-3; }
  @keyframes attack-layer-live-state-of-row-4 { 0%, 33.08% { opacity: 1; } 35.77%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-4 { 0%, 33.08% { opacity: 0; } 35.77%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(5) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-4; }
  .attack-layer-row:nth-child(5) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-4; }
  @keyframes attack-layer-live-state-of-row-5 { 0%, 38.46% { opacity: 1; } 41.15%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-5 { 0%, 38.46% { opacity: 0; } 41.15%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(6) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-5; }
  .attack-layer-row:nth-child(6) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-5; }
  @keyframes attack-layer-live-state-of-row-6 { 0%, 43.85% { opacity: 1; } 46.54%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-6 { 0%, 43.85% { opacity: 0; } 46.54%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(7) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-6; }
  .attack-layer-row:nth-child(7) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-6; }
  @keyframes attack-layer-live-state-of-row-7 { 0%, 49.23% { opacity: 1; } 51.92%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-7 { 0%, 49.23% { opacity: 0; } 51.92%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(8) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-7; }
  .attack-layer-row:nth-child(8) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-7; }
  @keyframes attack-layer-live-state-of-row-8 { 0%, 54.62% { opacity: 1; } 57.31%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-8 { 0%, 54.62% { opacity: 0; } 57.31%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(9) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-8; }
  .attack-layer-row:nth-child(9) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-8; }
  @keyframes attack-layer-live-state-of-row-9 { 0%, 60.00% { opacity: 1; } 62.69%, 88.46% { opacity: 0; } 92.31%, 100% { opacity: 1; } }
  @keyframes attack-layer-switched-off-state-of-row-9 { 0%, 60.00% { opacity: 0; } 62.69%, 88.46% { opacity: 1; } 92.31%, 100% { opacity: 0; } }
  .attack-layer-row:nth-child(10) .attack-layer-status-pill-live { animation-name: attack-layer-live-state-of-row-9; }
  .attack-layer-row:nth-child(10) .attack-layer-status-pill-switched-off { animation-name: attack-layer-switched-off-state-of-row-9; }
}

/* ---------------------------------------------------------------- sections */
.content-section { padding: clamp(54px, 7vw, 96px) 0; }
.content-section-on-pale-background { background: var(--colour-pale-blue-background); }
.content-section-on-dark-background { background: linear-gradient(160deg, var(--colour-navy-deep), var(--colour-navy-medium)); color: #d7e5fb; }
.content-section-on-dark-background h2, .content-section-on-dark-background h3 { color: #ffffff; }
.section-heading-block { max-width: 52em; margin: 0 0 clamp(28px, 4vw, 48px); }
.section-eyebrow-label { display: block; margin: 0 0 10px; color: var(--colour-brand-blue-dark); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; }
.content-section-on-dark-background .section-eyebrow-label { color: var(--colour-brand-light-blue); }
.section-intro-paragraph { font-size: 1.14rem; color: var(--colour-muted-text); margin-bottom: 0; }
.content-section-on-dark-background .section-intro-paragraph { color: #b9cdea; }

.card-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card-grid-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content-card { background: #ffffff; border-radius: var(--radius-of-cards); padding: 28px; box-shadow: var(--shadow-of-cards); border: 1px solid rgba(6, 24, 47, 0.06); }
.content-card h3 { margin-bottom: 0.45em; }
.content-card p:last-child { margin-bottom: 0; }
.content-card-with-accent { border-top: 4px solid var(--colour-brand-blue); }
.card-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; background: linear-gradient(145deg, var(--colour-brand-blue), var(--colour-brand-light-blue)); color: #ffffff; }
.card-icon-badge svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.small-feature-card { padding: 22px; }
.small-feature-card h3 { font-size: 1.08rem; }

/* anatomy of an attack: one row per layer */
.attack-anatomy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: attack-layer-counter; }
.attack-anatomy-row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 22px; align-items: start; padding: 20px 22px; background: #ffffff; border-radius: 16px; border: 1px solid rgba(6, 24, 47, 0.07); box-shadow: 0 1px 2px rgba(6, 24, 47, 0.04);
  counter-increment: attack-layer-counter;
}
.attack-anatomy-row::before { content: counter(attack-layer-counter); display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--colour-navy-deep); color: var(--colour-brand-light-blue); font-weight: 800; }
.attack-anatomy-row-layer-name { font-weight: 800; color: var(--colour-navy-deep); margin: 0 0 2px; font-size: 1.06rem; }
.attack-anatomy-row-layer-description { margin: 0; color: var(--colour-muted-text); font-size: 0.97rem; }
.attack-anatomy-row-who-can-act-label { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-brand-blue-dark); margin-bottom: 2px; }
.attack-anatomy-row-who-can-act-text { margin: 0; font-weight: 600; }

/* home page summary of the layers: nine small cards */
.layer-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0 0 30px; padding: 0; counter-reset: layer-summary-counter; }
.layer-summary-card { counter-increment: layer-summary-counter; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: #ffffff; border-radius: 16px; border: 1px solid rgba(6, 24, 47, 0.07); box-shadow: 0 1px 2px rgba(6, 24, 47, 0.04); }
.layer-summary-card::before { content: counter(layer-summary-counter); flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--colour-navy-deep); color: var(--colour-brand-light-blue); font-weight: 800; }
.layer-summary-card-text-block { min-width: 0; }
.layer-summary-card-name { margin: 0 0 2px; font-weight: 800; color: var(--colour-navy-deep); line-height: 1.35; }
.layer-summary-card-who-can-act { margin: 0; color: var(--colour-muted-text); font-size: 0.92rem; line-height: 1.5; }
.link-with-arrow { font-weight: 800; text-decoration: none; }
.link-with-arrow::after { content: " \2192"; }
.visually-hidden-but-read-by-screen-readers { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* numbered steps */
.numbered-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: numbered-step-counter; }
.numbered-step { position: relative; padding: 26px 26px 26px 92px; background: #ffffff; border-radius: var(--radius-of-cards); box-shadow: var(--shadow-of-cards); border: 1px solid rgba(6, 24, 47, 0.06); counter-increment: numbered-step-counter; }
.numbered-step::before { content: counter(numbered-step-counter); position: absolute; left: 24px; top: 24px; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; color: #ffffff; background: linear-gradient(145deg, var(--colour-brand-blue), var(--colour-brand-light-blue)); }
.numbered-step h3 { margin-bottom: 0.3em; }
.numbered-step p:last-child { margin-bottom: 0; }
.numbered-step-detail-list { margin: 0.4em 0 0; padding-left: 1.2em; color: var(--colour-muted-text); }
.compact-step-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; counter-reset: compact-step-counter; }
.compact-step-strip-item { position: relative; background: #ffffff; border-radius: 16px; padding: 20px 18px 18px; border: 1px solid rgba(6, 24, 47, 0.07); box-shadow: var(--shadow-of-cards); counter-increment: compact-step-counter; }
.compact-step-strip-item::before { content: counter(compact-step-counter); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px; font-weight: 800; color: #ffffff; background: var(--colour-brand-blue); }
.compact-step-strip-item h3 { font-size: 1.05rem; margin-bottom: 0.3em; }
.compact-step-strip-item p { font-size: 0.95rem; margin: 0; color: var(--colour-muted-text); }

/* the intelligence loop: four stations and the way back to the first */
.intelligence-loop-diagram { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0 0 18px; padding: 0; position: relative; }
.intelligence-loop-station { position: relative; padding: 22px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); }
.intelligence-loop-station:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; width: 14px; height: 14px; border-top: 3px solid var(--colour-brand-light-blue); border-right: 3px solid var(--colour-brand-light-blue); transform: translateY(-50%) rotate(45deg); z-index: 2; }
.intelligence-loop-station h3 { font-size: 1.08rem; margin-bottom: 0.35em; }
.intelligence-loop-station p { margin: 0; font-size: 0.95rem; color: #b9cdea; }
.intelligence-loop-return-line { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--colour-brand-light-blue); font-weight: 700; font-size: 0.95rem; }
.intelligence-loop-return-line::before { content: ""; flex: 1; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--colour-brand-light-blue) 0 12px, transparent 12px 20px); opacity: 0.8; }

/* audience */
.audience-pill-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.audience-pill { padding: 12px 20px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(14, 105, 226, 0.22); box-shadow: 0 1px 2px rgba(6, 24, 47, 0.05); font-weight: 700; color: var(--colour-navy-deep); }

/* two-column text blocks (for example the pricing and about bands) */
.two-column-text-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fact-list-item { position: relative; padding-left: 34px; }
.fact-list-item::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 20px; height: 20px; border-radius: 50%; background: var(--colour-brand-blue); }
.fact-list-item::after { content: ""; position: absolute; left: 7px; top: 0.62em; width: 6px; height: 10px; border: solid #ffffff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* call to action band */
.call-to-action-band { padding: clamp(48px, 6vw, 80px) 0; color: #ffffff; text-align: center; background: radial-gradient(700px 300px at 50% 0%, rgba(40, 187, 248, 0.25), transparent 70%), linear-gradient(160deg, var(--colour-navy-deep), var(--colour-navy-medium)); }
.call-to-action-band h2 { color: #ffffff; max-width: 22em; margin-inline: auto; }
.call-to-action-band p { color: #c9daf5; max-width: 40em; margin-inline: auto; }
.call-to-action-band .hero-call-to-action-row { justify-content: center; margin-bottom: 0; }

/* page title block of the inner pages */
.inner-page-title-section { padding: clamp(48px, 6vw, 84px) 0 clamp(36px, 5vw, 60px); color: #ffffff; background: radial-gradient(800px 360px at 85% 0%, rgba(40, 187, 248, 0.22), transparent 62%), linear-gradient(160deg, var(--colour-navy-deep), var(--colour-navy-medium)); }
.inner-page-title-section h1 { color: #ffffff; font-size: clamp(2rem, 3.6vw + 0.6rem, 3rem); max-width: 20em; }
.inner-page-title-section .section-intro-paragraph { color: #c9daf5; max-width: 46em; }
.breadcrumb-trail { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; color: #9fb8de; font-size: 0.9rem; }
.breadcrumb-trail li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.breadcrumb-trail a { color: #cfe3ff; }

/* example box (illustration with placeholder names) */
.worked-example-box { background: #ffffff; border-radius: var(--radius-of-cards); border: 1px solid rgba(6, 24, 47, 0.08); border-left: 6px solid var(--colour-brand-light-blue); padding: 26px 28px; box-shadow: var(--shadow-of-cards); }
.worked-example-box .section-eyebrow-label { margin-bottom: 6px; }

/* frequently asked questions: native details elements, no script needed */
.frequently-asked-question-list { display: grid; gap: 12px; }
.frequently-asked-question { background: #ffffff; border-radius: 16px; border: 1px solid rgba(6, 24, 47, 0.09); box-shadow: 0 1px 2px rgba(6, 24, 47, 0.04); }
.frequently-asked-question summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font-weight: 800; color: var(--colour-navy-deep); position: relative; }
.frequently-asked-question summary::-webkit-details-marker { display: none; }
.frequently-asked-question summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 500; color: var(--colour-brand-blue); }
.frequently-asked-question[open] summary::after { content: "\2212"; }
.frequently-asked-question-answer { padding: 0 24px 20px; color: var(--colour-body-text); }
.frequently-asked-question-answer p:last-child { margin-bottom: 0; }

/* language gateway page at the site root */
.language-gateway-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; color: #ffffff; text-align: center; background: radial-gradient(900px 480px at 80% 10%, rgba(40, 187, 248, 0.22), transparent 62%), linear-gradient(160deg, var(--colour-navy-deep), var(--colour-navy-medium)); }
.language-gateway-panel { max-width: 640px; }
.language-gateway-panel .site-brand-link { margin-bottom: 26px; font-size: 1.4rem; }
.language-gateway-panel h1 { color: #ffffff; font-size: clamp(1.8rem, 3.2vw + 0.8rem, 2.6rem); }
.language-gateway-panel p { color: #c9daf5; }
.language-gateway-choice-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 26px; }

/* polite language suggestion banner (shown by the script only when it helps) */
.language-suggestion-banner { background: #fff7e0; color: #4a3a00; border-bottom: 1px solid #f2dc9a; }
.language-suggestion-banner-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 0; font-size: 0.95rem; }
.language-suggestion-banner-text { margin: 0; flex: 1 1 260px; font-weight: 600; }
.language-suggestion-banner a { font-weight: 800; }
.language-suggestion-banner-dismiss-button { background: transparent; border: 1px solid rgba(74, 58, 0, 0.35); border-radius: 10px; padding: 6px 12px; font: inherit; font-weight: 700; color: #4a3a00; cursor: pointer; }

/* footer */
.site-footer { background: var(--colour-navy-deep); color: #a9bedd; padding: 44px 0 34px; font-size: 0.95rem; }
.site-footer a { color: #d4e5ff; }
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.site-footer h2 { color: #ffffff; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.8em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer-legal-line { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.86rem; color: #8ea6c9; }

/* ---------------------------------------------------------------- narrow screens */
/* The header folds into the menu button EARLIER than the page layout changes (960 px below). Measured on 2026-11-12 in a browser: the full Japanese header (brand, four links,
   language switch and button) needs about 1140 px, English about 1024 px; with the wider fallback fonts of some systems the Japanese links wrapped into two lines at 980 px.
   1180 px keeps a margin for both languages. Above it the header items are never allowed to wrap. */
@media (min-width: 1181px) {
  .site-navigation-link, .language-switch-link, .header-call-to-action-button { white-space: nowrap; }
}
/* The brand name stays on one line from 400 px up. Not below: at a 320 px window the Japanese menu button was pushed 5 px past the screen edge when the brand could not wrap (found by
   the width probe on 2026-11-12), so on the very smallest phones the brand may wrap into two lines again. */
@media (min-width: 400px) {
  .site-brand-link { white-space: nowrap; }
}
@media (max-width: 1180px) {
  .mobile-navigation-toggle-button { display: inline-block; }
  .site-navigation { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 20px 20px; background: var(--colour-navy-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-left: 0; }
  .site-navigation[data-navigation-menu-is-open="true"] { display: flex; }
  .site-navigation-list { flex-direction: column; align-items: stretch; }
  .site-navigation-link { padding: 13px 14px; }
  .language-switch-link, .header-call-to-action-button { text-align: center; margin-left: 0; }
}
@media (max-width: 960px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .compact-step-strip { grid-template-columns: 1fr 1fr; }
  .layer-summary-grid { grid-template-columns: 1fr 1fr; }
  .card-grid-three-columns, .card-grid-four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intelligence-loop-diagram { grid-template-columns: 1fr 1fr; }
  .intelligence-loop-station:nth-child(2)::after { display: none; }
  .two-column-text-block { grid-template-columns: 1fr; }
  .site-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .page-content-width { width: min(100% - 32px, var(--maximum-width-of-page-content)); }
  .attack-anatomy-row { grid-template-columns: 46px minmax(0, 1fr); }
  .attack-anatomy-row-who-can-act { grid-column: 2; }
  .numbered-step { padding: 22px 20px 22px 20px; }
  .numbered-step::before { position: static; margin-bottom: 12px; }
  .compact-step-strip { grid-template-columns: 1fr; }
  .layer-summary-grid { grid-template-columns: 1fr; }
  .card-grid-two-columns, .card-grid-three-columns, .card-grid-four-columns { grid-template-columns: 1fr; }
  .intelligence-loop-diagram { grid-template-columns: 1fr; }
  .intelligence-loop-station::after { display: none; }
  .site-footer-grid { grid-template-columns: 1fr; }
  .hero-call-to-action-row .button-primary, .hero-call-to-action-row .button-secondary { flex: 1 1 100%; }
  .attack-layer-status-pill { min-width: 84px; }
}
/* The narrowest phones (360 px and below, such as a 320 px iPhone SE or a 344 px small Android). The text columns of two card layouts get too narrow for Japanese phrases and left one
   character alone on a line (found by the width probe on 2026-11-12): the rows of the hero card (a pill sized for the English words, plus padding, leave only 114 px for the row name at
   320 px) and the numbered rows of the "whole-stack takedown" page (badge column, gap and padding). Padding, gaps and the badge shrink here. The Japanese pill labels are short, so only
   the Japanese pill gets narrower; the English labels ("Switched off") need the width. */
@media (max-width: 360px) {
  html[lang="ja"] .attack-layer-status-pill { min-width: 70px; }
  .attack-layer-row { padding: 10px 12px; gap: 8px; }
  .attack-anatomy-row { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 16px; column-gap: 14px; }
  .attack-anatomy-row::before { width: 36px; height: 36px; }
}

/* visitors who asked their system for less motion get no smooth scrolling and no button transitions (the illustration is already static for them, see above) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button-primary, .button-secondary { transition: none; }
}