/* ============================================================
   Sub-page styles (regulations / join / result)
   Tone matches the top page: league navy (#17256c), soft cards.
   ============================================================ */

.subpage-main {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(44, 76, 196, 0.10), transparent 70%),
    linear-gradient(180deg, #f5f6fb 0%, #eceef6 100%);
  min-height: 72vh;
  padding: 26px 16px 80px;
}
.subpage-inner {
  max-width: 900px;
  margin: 0 auto;
  /* style.css resets body to text-align:center — sub-page body copy
     (regulations / join text, breadcrumb, notes) reads left-aligned.
     Centered blocks (hero / form actions / done panel) re-assert
     their own text-align. */
  text-align: left;
}
.subpage-breadcrumb {
  font-size: 12px;
  color: #6b7088;
  margin-bottom: 18px;
}
.subpage-breadcrumb a { color: #17256c; text-decoration: none; }
.subpage-breadcrumb a:hover { text-decoration: underline; }

/* === Hero header === */
.subpage-hero {
  position: relative;
  background: linear-gradient(135deg, #17256c 0%, #233a8f 60%, #2c4cc4 100%);
  border-radius: 16px;
  padding: 34px 32px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 28, 80, 0.22);
  /* style.css resets body to text-align:center / line-height:1.0 — override
     here so hero text reads left-aligned with comfortable leading. */
  text-align: left;
  line-height: 1.6;
}
.subpage-hero > * { position: relative; z-index: 1; }
.subpage-hero::before {
  /* faint baseball seam motif */
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 0 0 18px rgba(255, 255, 255, 0.05);
}
.subpage-hero-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #ffd66b;
  margin: 0 0 8px;
}
.subpage-hero-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.subpage-hero-lead {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  max-width: 640px;
}

/* === Section title === */

.subpage-note {
  margin-top: 20px;
  font-size: 12px;
  color: #8b90a6;
}

/* ============================================================
   Regulations
   ============================================================ */
.reg-list {
  counter-reset: reg;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.reg-item {
  counter-increment: reg;
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px 18px 60px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(20, 28, 80, 0.06);
}
.reg-item::before {
  content: counter(reg);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #17256c, #2c4cc4);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reg-text {
  font-size: 14px;
  line-height: 1.8;
  color: #2a2e3d;
}
.reg-sub {
  counter-reset: regsub;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.reg-sub li {
  counter-increment: regsub;
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: 13px;
  line-height: 1.75;
  color: #4a4f63;
  border-top: 1px dashed #e4e7f1;
}
.reg-sub li::before {
  content: "(" counter(regsub, lower-alpha) ")";
  position: absolute;
  left: 0;
  top: 7px;
  color: #2c4cc4;
  font-weight: 700;
  font-size: 12px;
}

/* ============================================================
   Join
   ============================================================ */
.join-intro-body {
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 2px 6px rgba(20, 28, 80, 0.06);
}
.join-intro-body p {
  font-size: 14px;
  line-height: 1.85;
  color: #2a2e3d;
  margin: 0 0 12px;
}
.join-intro-body p:last-child { margin-bottom: 0; }

.join-cond-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.join-cond-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 2px 6px rgba(20, 28, 80, 0.06);
}
.join-cond-no {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #17256c, #2c4cc4);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-cond-text {
  font-size: 14px;
  line-height: 1.6;
  color: #2a2e3d;
  padding-top: 2px;
}
.join-closing {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: #5a5f73;
}

.join-form-section {
  margin-top: 32px;
}

/* ============================================================
   Result archives
   ============================================================ */
/* Season banners are 710x200 (ratio ~3.55:1) — keep that ratio so the
   artwork is shown whole rather than cropped. */
.archive-grid {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.archive-card a {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(20, 28, 80, 0.08);
  transition: transform 0.13s, box-shadow 0.13s;
}
.archive-card a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(20, 28, 80, 0.16);
}
.archive-thumb {
  display: block;
  aspect-ratio: 710 / 200;
  background: #11193f;
  overflow: hidden;
}
.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* When the banner image 404s, show a navy panel instead. */
.archive-thumb-fallback {
  background:
    radial-gradient(80% 80% at 50% 30%, rgba(44, 76, 196, 0.5), transparent),
    linear-gradient(135deg, #17256c, #11193f);
}
.archive-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid #eef0f7;
}
.archive-year {
  font-size: 21px;
  font-weight: 800;
  color: #17256c;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  line-height: 1;
}
.archive-label {
  font-size: 12px;
  color: #6b7088;
  flex: 1;
}
.archive-arrow {
  font-size: 14px;
  color: #2c4cc4;
}

/* ============================================================
   Result detail page (result-YYYY.html)
   The body is lifted from itleague.jp, so style generically.
   ============================================================ */
.archive-detail {
  background: #fff;
  border-radius: 12px;
  padding: 22px 22px 26px;
  margin-top: 22px;
  box-shadow: 0 2px 6px rgba(20, 28, 80, 0.06);
  font-size: 13px;
  line-height: 1.7;
  color: #2a2e3d;
  overflow-x: auto;
}
.archive-detail h1,
.archive-detail h2,
.archive-detail h3 {
  font-size: 15px;
  font-weight: 800;
  color: #17256c;
  margin: 24px 0 12px;
  padding-left: 10px;
  border-left: 4px solid #17256c;
}
.archive-detail h1:first-child,
.archive-detail h2:first-child,
.archive-detail h3:first-child { margin-top: 0; }
/* Each itleague.jp table lives inside a .table_disp wrapper — make that
   wrapper a horizontal-scroll viewport so wide tables stay readable on
   phones instead of squashing every column. */
.archive-detail .table_disp {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0 20px;
  /* subtle edge fade hints there's more to scroll */
  background:
    linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(20,28,80,0.12), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(20,28,80,0.12), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.archive-detail table {
  /* fit content so wide tables overflow the wrapper and can scroll */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 12px;
}
.archive-detail th,
.archive-detail td {
  border: 1px solid #e2e5ef;
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}
.archive-detail th {
  background: #17256c;
  color: #fff;
  font-weight: 600;
}
.archive-detail tr:nth-child(even) td { background: #f6f7fb; }
/* 2017 splits the standings into separate I LEAGUE / T LEAGUE tables.
   Each table sits in its own .table_disp scroll wrapper. Give both a
   fixed table layout at one definite width: identical column sizing
   for both, and — when the viewport is narrower — the wrapper scrolls
   horizontally instead of squashing or clipping the columns.
   (A % width here would be measured against the scroll wrapper and
   break the overflow, so the width must be an absolute length.) */
.archive-detail table:has(tr.league-I),
.archive-detail table:has(tr.league-T) {
  table-layout: fixed;
  width: 720px;
  min-width: 720px;
  max-width: none;
}
/* Only the team-name column (col 3) may wrap; numeric columns keep
   their figures on one line so values like "0.864" aren't broken. */
.archive-detail table:has(tr.league-I) :is(td, th),
.archive-detail table:has(tr.league-T) :is(td, th) {
  white-space: nowrap;
  overflow: hidden;
}
.archive-detail table:has(tr.league-I) tr > :nth-child(3),
.archive-detail table:has(tr.league-T) tr > :nth-child(3) {
  white-space: normal;
  word-break: break-word;
  text-align: left;
}
/* Column widths come from the <colgroup> added to each 2017 standings
   table — table-layout:fixed honours those, so both tables size their
   columns identically. The team-name column gets the most room. */
.archive-detail table:has(tr.league-I) col.col-name,
.archive-detail table:has(tr.league-T) col.col-name { width: 24%; }
/* The I LEAGUE / T LEAGUE banner sits in a .ttl cell as a white
   wordmark image — give that cell a dark background so the logo
   reads clearly. Specific enough to beat the even-row striping. */
.archive-detail tr.league-I td.ttl,
.archive-detail tr.league-T td.ttl {
  background: linear-gradient(135deg, #1c1c20 0%, #0c0c0e 100%);
  padding: 10px 8px;
}
.archive-detail img {
  max-width: 100%;
  height: auto;
}
.archive-detail a {
  color: #17256c;
  text-decoration: underline;
}
.archive-detail ul,
.archive-detail ol { padding-left: 1.4em; margin: 10px 0; }
.archive-back {
  margin-top: 22px;
  text-align: center;
}
.archive-back a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #17256c;
  text-decoration: none;
  padding: 10px 22px;
  border: 1.5px solid #17256c;
  border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.archive-back a:hover {
  background: #17256c;
  color: #fff;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 640px) {
  .subpage-main { padding: 20px 12px 60px; }
  .subpage-hero { padding: 26px 20px; }
  .subpage-hero-title { font-size: 23px; }
  .reg-item { padding: 16px 16px 16px 54px; }
  .reg-item::before { left: 14px; top: 14px; }
  .archive-grid { grid-template-columns: 1fr; gap: 12px; }
  .archive-year { font-size: 19px; }
}

/* ============================================================
   Team logos inside result-YYYY.html standings tables.
   The cloned itleague.jp markup uses <span class="teamid"></span>
   with the logo as a CSS background — define those here.
   ============================================================ */
.archive-detail :is(td, th) span.aas,
.archive-detail :is(td, th) span.artenica,
.archive-detail :is(td, th) span.avex,
.archive-detail :is(td, th) span.baycurrent,
.archive-detail :is(td, th) span.baycurrent-2,
.archive-detail :is(td, th) span.bbt,
.archive-detail :is(td, th) span.bca,
.archive-detail :is(td, th) span.box,
.archive-detail :is(td, th) span.cyberagents,
.archive-detail :is(td, th) span.cybercommunications,
.archive-detail :is(td, th) span.cyberfields,
.archive-detail :is(td, th) span.dena,
.archive-detail :is(td, th) span.dip,
.archive-detail :is(td, th) span.doubleclick,
.archive-detail :is(td, th) span.dym,
.archive-detail :is(td, th) span.enjapan,
.archive-detail :is(td, th) span.esco,
.archive-detail :is(td, th) span.founders,
.archive-detail :is(td, th) span.freee,
.archive-detail :is(td, th) span.gimic,
.archive-detail :is(td, th) span.gree,
.archive-detail :is(td, th) span.gunosy,
.archive-detail :is(td, th) span.intelligence,
.archive-detail :is(td, th) span.kamakura,
.archive-detail :is(td, th) span.knowhere,
.archive-detail :is(td, th) span.kufu,
.archive-detail :is(td, th) span.leisures,
.archive-detail :is(td, th) span.moneyforward,
.archive-detail :is(td, th) span.mti,
.archive-detail :is(td, th) span.o-plans,
.archive-detail :is(td, th) span.opt,
.archive-detail :is(td, th) span.ouccino,
.archive-detail :is(td, th) span.pasonatech,
.archive-detail :is(td, th) span.prospecttech,
.archive-detail :is(td, th) span.qoonins,
.archive-detail :is(td, th) span.rakuten,
.archive-detail :is(td, th) span.septeni,
.archive-detail :is(td, th) span.shy,
.archive-detail :is(td, th) span.simplex,
.archive-detail :is(td, th) span.smam,
.archive-detail :is(td, th) span.softbankbb,
.archive-detail :is(td, th) span.solekia {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.archive-detail :is(td, th) .ltlabel {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
}
.archive-detail :is(td, th) span.aas { background-image: url("https://itleague.jp/wp-content/uploads/images/aas.png"); }
.archive-detail :is(td, th) span.artenica { background-image: url("https://itleague.jp/wp-content/uploads/2025/04/Artenica-1.png"); }
.archive-detail :is(td, th) span.avex { background-image: url("https://itleague.jp/wp-content/uploads/2023/05/339635348_530392989296232_534429518858104099_n.png"); }
.archive-detail :is(td, th) span.baycurrent { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/Dinosaurs.jpg"); }
.archive-detail :is(td, th) span.baycurrent-2 { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/baycurrent-1.png"); }
.archive-detail :is(td, th) span.bbt { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/bbt.png"); }
.archive-detail :is(td, th) span.bca { background-image: url("https://itleague.jp/wp-content/uploads/2021/05/bunt-2.jpg"); }
.archive-detail :is(td, th) span.box { background-image: url("https://itleague.jp/wp-content/uploads/2025/04/BOX-1.png"); }
.archive-detail :is(td, th) span.cyberagents { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/ca.png"); }
.archive-detail :is(td, th) span.cybercommunications { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/cyberfriends.png"); }
.archive-detail :is(td, th) span.cyberfields { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/cyberfriends.png"); }
.archive-detail :is(td, th) span.dena { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/dena-1.png"); }
.archive-detail :is(td, th) span.dip { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/dip-1.png"); }
.archive-detail :is(td, th) span.doubleclick { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/dc-2.png"); }
.archive-detail :is(td, th) span.dym { background-image: url("https://itleague.jp/wp-content/uploads/2019/04/dym.jpg"); }
.archive-detail :is(td, th) span.enjapan { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/enjapan.png"); }
.archive-detail :is(td, th) span.esco { background-image: url("https://itleague.jp/wp-content/uploads/2024/04/esco.png"); }
.archive-detail :is(td, th) span.founders { background-image: url("https://itleague.jp/wp-content/uploads/2024/04/FOUNDERS-1.jpg"); }
.archive-detail :is(td, th) span.freee { background-image: url("https://itleague.jp/wp-content/uploads/2025/04/freee-1.png"); }
.archive-detail :is(td, th) span.gimic { background-image: url("https://itleague.jp/wp-content/uploads/2020/05/gimic.jpg"); }
.archive-detail :is(td, th) span.gree { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/gree-1.png"); }
.archive-detail :is(td, th) span.gunosy { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/gunosy.png"); }
.archive-detail :is(td, th) span.intelligence { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/intelligence-1.png"); }
.archive-detail :is(td, th) span.kamakura { background-image: url("https://itleague.jp/wp-content/uploads/2021/05/arukuhorick-1.jpg"); }
.archive-detail :is(td, th) span.knowhere { background-image: url("https://itleague.jp/wp-content/uploads/2022/05/Knowhere.jpg"); }
.archive-detail :is(td, th) span.kufu { background-image: url("https://itleague.jp/wp-content/uploads/2022/05/kufu.jpg"); }
.archive-detail :is(td, th) span.leisures { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/yahoo-3.png"); }
.archive-detail :is(td, th) span.moneyforward { background-image: url("https://itleague.jp/wp-content/uploads/2025/04/MoneyForward-2.png"); }
.archive-detail :is(td, th) span.mti { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/mti-2.png"); }
.archive-detail :is(td, th) span.o-plans { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/o-plans.png"); }
.archive-detail :is(td, th) span.opt { background-image: url("https://itleague.jp/wp-content/uploads/2021/05/bunt-2.jpg"); }
.archive-detail :is(td, th) span.ouccino { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/ouccino.png"); }
.archive-detail :is(td, th) span.pasonatech { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/pasona.png"); }
.archive-detail :is(td, th) span.prospecttech { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/prospecttech.png"); }
.archive-detail :is(td, th) span.qoonins { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/qoonins.png"); }
.archive-detail :is(td, th) span.rakuten { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/rakuten.jpg"); }
.archive-detail :is(td, th) span.septeni { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/septini-1.png"); }
.archive-detail :is(td, th) span.shy { background-image: url("https://itleague.jp/wp-content/uploads/2025/04/SHY-1.jpg"); }
.archive-detail :is(td, th) span.simplex { background-image: url("https://itleague.jp/wp-content/uploads/2021/05/simplex.jpg"); }
.archive-detail :is(td, th) span.smam { background-image: url("https://itleague.jp/wp-content/uploads/2020/05/smam.jpg"); }
.archive-detail :is(td, th) span.softbankbb { background-image: url("https://itleague.jp/wp-content/uploads/2018/03/softbankbb-1.png"); }
.archive-detail :is(td, th) span.solekia { background-image: url("https://itleague.jp/wp-content/uploads/2021/05/solekia.jpg"); }

/* ============================================================
   Contact form
   ============================================================ */
/* The form reads better narrower than the 900px hero — cap it and center. */
.contact-form {
  margin: 22px auto 0;
  max-width: 640px;
}
.contact-fieldset {
  background: #fff;
  border: 0;
  border-radius: 12px;
  padding: 22px 24px;
  margin: 0 0 16px;
  box-shadow: 0 2px 6px rgba(20, 28, 80, 0.06);
}
.contact-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #17256c;
  letter-spacing: 0.03em;
  padding: 0;
  margin-bottom: 16px;
}
.contact-legend-no {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #17256c, #2c4cc4);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-req,
.contact-opt {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.contact-req { background: #d7263d; color: #fff; }
.contact-opt { background: #e2e5ef; color: #6b7088; }

/* --- text fields --- */
.contact-field { margin-bottom: 16px; }
.contact-field:last-child { margin-bottom: 0; }
.contact-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #3a3f52;
  margin-bottom: 7px;
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  color: #2a2e3d;
  padding: 12px 14px;
  border: 1.5px solid #d6dae8;
  border-radius: 9px;
  background: #fbfbfe;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.contact-field textarea { resize: vertical; line-height: 1.75; }
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: #2c4cc4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44, 76, 196, 0.14);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #aab0c4; }
.contact-hint {
  display: block;
  font-size: 11px;
  color: #8b90a6;
  margin-top: 6px;
  line-height: 1.6;
}

/* --- radio cards --- */
.contact-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.contact-radio {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px;
  border: 1.5px solid #d6dae8;
  border-radius: 10px;
  background: #fbfbfe;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.contact-radio:hover { border-color: #b3bbd6; }
.contact-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.contact-radio-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid #c2c8dc;
  border-radius: 50%;
  transition: border-color 0.12s;
  position: relative;
}
.contact-radio-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #2c4cc4;
  transform: scale(0);
  transition: transform 0.12s;
}
.contact-radio-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* style.css resets body to text-align:center — keep radio labels
     left-aligned so they line up under the radio mark. */
  text-align: left;
}
.contact-radio-title {
  font-size: 13px;
  font-weight: 700;
  color: #2a2e3d;
  text-align: left;
}
.contact-radio-desc {
  font-size: 11px;
  color: #8b90a6;
  line-height: 1.5;
  text-align: left;
}
.contact-radio:has(input:checked) {
  border-color: #2c4cc4;
  background: #eef1fb;
  box-shadow: 0 0 0 3px rgba(44, 76, 196, 0.10);
}
.contact-radio:has(input:checked) .contact-radio-mark { border-color: #2c4cc4; }
.contact-radio:has(input:checked) .contact-radio-mark::after { transform: scale(1); }
.contact-radio:has(input:focus-visible) {
  outline: 2px solid #ffb400;
  outline-offset: 2px;
}

/* --- actions --- */
.contact-actions { text-align: center; margin-top: 4px; }
.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #17256c, #2c4cc4);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 44px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(20, 28, 80, 0.26);
  transition: transform 0.1s, box-shadow 0.1s;
}
.contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(20, 28, 80, 0.34);
}
.contact-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.contact-submit-arrow { font-size: 16px; }
.contact-privacy {
  margin: 14px 0 0;
  font-size: 11px;
  color: #8b90a6;
}
.contact-error {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #fdecee;
  border: 1px solid #f3c2c8;
  color: #c0182a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* --- completion state --- */
.contact-done {
  background: #fff;
  border-radius: 12px;
  padding: 44px 28px;
  margin: 22px auto 0;
  max-width: 640px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(20, 28, 80, 0.06);
}
.contact-done-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #17256c, #2c4cc4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-done-title {
  font-size: 20px;
  font-weight: 800;
  color: #17256c;
  margin: 0 0 8px;
}
.contact-done-text {
  font-size: 13px;
  color: #5a5f73;
  line-height: 1.8;
  margin: 0 0 22px;
}
.contact-done-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #17256c;
  text-decoration: none;
  padding: 11px 28px;
  border: 1.5px solid #17256c;
  border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.contact-done-back:hover { background: #17256c; color: #fff; }

@media (max-width: 640px) {
  .contact-fieldset { padding: 18px 16px; }
  .contact-radios { grid-template-columns: 1fr; }
  .contact-submit { width: 100%; justify-content: center; }
}