/* ============================================================
   施工管理転職EX — LP styles (Design System v2準拠)
   ============================================================ */

:root {
  --c-primary:        #0F5A4A;
  --c-primary-2:      #0B5440;
  --c-primary-dark:   #083F35;
  --c-primary-darker: #062E27;
  --c-primary-light:  #E7F1EE;
  --c-primary-tint:   #F1F7F4;
  --c-accent:         #F97316;
  --c-accent-hover:   #E2620B;
  --c-accent-active:  #C4540A;
  --c-accent-light:   #FFF2E8;
  --c-hot:            #E62E00;
  --c-highlight:      #F8EC45;
  --c-gold:           #C9A227;
  --c-gold-light:     #F3E2A6;
  --c-gold-dark:      #9A7B1B;
  --c-danger:         #E53935;
  --c-danger-bg:      #FDECEC;
  --c-success:        #1E8E5A;
  --c-success-bg:     #E7F4EC;
  --c-bg:             #F4F6F5;
  --c-surface:        #FFFFFF;
  --c-surface-muted:  #EEF2F0;
  --c-border:         #E3E8E6;
  --c-border-strong:  #CBD3D0;
  --c-input-bg:       #FFFFFF;
  --c-text:           #1F2933;
  --c-text-muted:     #6B7280;
  --c-focus-ring:        rgba(15,90,74,.40);
  --c-focus-ring-accent: rgba(249,115,22,.5);

  --grad-green:      linear-gradient(155deg,#0F5A4A 0%,#083F35 60%,#062E27 100%);
  --grad-cta:        linear-gradient(180deg,#FB8B1E 0%,#F2730D 52%,#E2620B 100%);
  --grad-cta-hover:  linear-gradient(180deg,#FF9A2E 0%,#F47A12 52%,#D85A09 100%);
  --grad-gold:       linear-gradient(180deg,#F7E9B8 0%,#E3C766 25%,#C9A227 55%,#9A7B1B 100%);

  --f-base:    "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-display: "Noto Sans JP",sans-serif;
  --f-mincho:  "Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --fs-label:  .9375rem;
  --fs-btn:    1.1875rem;

  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  --sh-xs:        0 1px 2px rgba(16,40,34,.08);
  --sh-sm:        0 3px 8px rgba(16,40,34,.10);
  --sh-md:        0 8px 20px rgba(16,40,34,.14);
  --sh-card:      0 4px 0 rgba(11,84,64,.10),0 8px 18px rgba(16,40,34,.10);
  --sh-cta:       0 5px 0 var(--c-accent-active),0 12px 22px rgba(230,80,0,.38);
  --sh-cta-press: 0 2px 0 var(--c-accent-active),0 6px 12px rgba(230,80,0,.34);
  --sh-modal:     0 20px 56px rgba(0,0,0,.30);

  --z-modal:      1000;
  --z-submitting: 2000;
  --max-width:    430px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:var(--f-base);
  color:var(--c-text);
  background:#b8c4be;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a   { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; font-size:inherit; }
h1,h2,h3,h4 { font-family:var(--f-display); line-height:1.3; font-weight:900; }

.main-hidden { display:none; }
main {
  max-width:var(--max-width);
  margin:0 auto;
  background:var(--c-bg);
  min-height:100vh;
  box-shadow:0 0 56px rgba(0,0,0,.18);
}

.icon-fallback      { display:inline-block; vertical-align:middle; flex-shrink:0; }
.img-error { visibility:hidden; }

/* ---- モーダル共通 ---- */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:var(--z-modal); padding:20px;
  animation:fadeIn .22s ease;
}
.modal-hidden { display:none !important; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp {
  from{transform:translateY(32px);opacity:0}
  to  {transform:translateY(0);opacity:1}
}

.modal-box {
  background:#fff;
  border-radius:var(--r-xl);
  width:100%; max-width:340px;
  position:relative; overflow:hidden;
  box-shadow:var(--sh-modal);
  animation:slideUp .28s cubic-bezier(.34,1.20,.64,1);
}

.modal-close {
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.90);
  display:flex; align-items:center; justify-content:center;
  z-index:10; transition:background .2s; box-shadow:var(--sh-xs);
  color:var(--c-text-muted); font-size:18px; font-weight:700;
}
.modal-close:hover { background:#fff; }

/* ---- 転職意欲モーダル ---- */
.modal-motivation-body { padding:34px 20px 28px; text-align:center; }
.modal-motivation-title {
  font-size:17px; font-weight:900;
  color:var(--c-text); margin-bottom:20px; line-height:1.4;
}
.motivation-options { display:flex; flex-direction:column; gap:10px; }
.motivation-option {
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border:2.5px solid var(--c-border-strong); border-radius:var(--r-md);
  background:#fff; transition:all .18s; text-align:left;
}
.motivation-option:hover,
.motivation-option:focus-visible {
  border-color:var(--c-primary); background:var(--c-primary-tint); outline:none;
}
.motivation-icon  { font-size:22px; flex-shrink:0; width:26px; text-align:center; color:var(--c-text-muted); }
.motivation-icon.fa-fire { color:var(--c-accent); }
.motivation-label { font-size:15px; font-weight:700; color:var(--c-text); }

/* ---- 離脱防止モーダル（緑グラデ＋金縁） ---- */
/* 画像1枚で構成（背景・枠・余白は画像が持つので二重にしない） */
.modal-urgency-box {
  background:transparent; border:none; padding:0;
  position:relative; width:auto; max-width:min(360px, 90vw); max-height:85vh; margin:0 auto;
  animation:slideUp .28s cubic-bezier(.34,1.20,.64,1);
}
.modal-exit-img { display:block; padding:0; border:none; background:none; width:100%; cursor:pointer; }
.modal-exit-img img { display:block; width:auto; max-width:100%; height:auto; max-height:80vh; margin:0 auto; border-radius:18px; }
#modal-exit-close { position:absolute; top:8px; right:8px; z-index:2; width:44px; height:44px; }

/* ---- ヒーロー ---- */
.hero { position:relative; overflow:hidden; background:#083F35; }
.hero-inner { position:relative; z-index:1; display:flex; flex-direction:column; }

.hero-header { padding:12px 20px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.hero-logo { height:30px; width:auto; display:block; }

/* ---- メインビジュアル ---- */
.hero-main { display:block; width:100%; height:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* ---- CTAボタン（光沢） ---- */
.btn-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--grad-cta);
  color:#fff; font-family:var(--f-display);
  font-size:var(--fs-btn); font-weight:900;
  padding:0 24px; min-height:56px;
  border-radius:var(--r-md);
  text-shadow:0 1px 2px rgba(120,40,0,.35);
  transition:background .2s,transform .14s,box-shadow .2s;
  line-height:1.3; text-align:center; letter-spacing:.01em;
  position:relative; overflow:hidden;
}
.btn-cta::before {
  content:'';
  position:absolute; inset:2px 2px auto 2px; height:42%;
  border-radius:var(--r-md) var(--r-md) 60% 60%/100%;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));
  pointer-events:none; z-index:1;
}
/* ボタン表面を光の帯が流れる（光沢が走る）シャイン */
.btn-cta::after {
  content:''; position:absolute; top:0; bottom:0; left:-130%; width:60%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.7) 50%, transparent 100%);
  transform:skewX(-20deg); pointer-events:none; z-index:2;
  animation:btnShine 2.6s ease-in-out infinite;
}
@keyframes btnShine { 0%{left:-130%} 38%{left:150%} 100%{left:150%} }
@media (prefers-reduced-motion: reduce){ .btn-cta::after{ animation:none; display:none; } }
.btn-cta:hover  { background:var(--grad-cta-hover); transform:translateY(-1px); }
.btn-cta:active { transform:translateY(1px) scale(.985); transition-duration:.06s; }
.btn-cta:focus-visible { outline:none; box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c-focus-ring-accent); }

.btn-full { width:100%; }

.btn-ghost { display:block; background:none; color:var(--c-text-muted); font-size:13px; padding:12px; text-align:center; text-decoration:underline; width:100%; margin-top:8px; }
.btn-back { display:inline-flex; align-items:center; gap:7px; color:var(--c-text-muted); font-size:13px; padding:11px 18px; font-weight:600; border-radius:var(--r-pill); transition:color .18s, background .18s; }
.btn-back:hover { color:var(--c-text); background:var(--c-surface-muted); }
.btn-back .fa-chevron-left { font-size:11px; }
.btn-cta .fa-chevron-right { font-size:.72em; }

/* ---- フォームセクション ---- */
.form-section { background:linear-gradient(180deg,#E3EDEA 0%,#EEF2F0 100%); padding:22px 16px 52px; }
.form-container {
  background:var(--c-surface); border-radius:var(--r-lg);
  padding:24px 20px 30px; border:1px solid var(--c-border);
}

/* メリット＋進捗 スティッキーヘッダー（全ステップ共通・カード上部に固定） */
.form-sticky {
  position:sticky; top:0; z-index:20;
  margin:-24px -20px 16px; padding:11px 18px 10px;
  background:#fff; border-bottom:1px solid var(--c-border);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:0 2px 8px rgba(16,40,34,.06);
}
.fs-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fs-badge {
  flex-shrink:0; display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-weight:900; color:#fff; background:var(--c-primary);
  padding:4px 11px; border-radius:var(--r-pill); letter-spacing:.01em;
}
.fs-badge .fa-bolt { font-size:11px; }
.seg-bar { display:flex; gap:5px; margin:10px 0 0; }
.seg-bar i { flex:1; height:6px; border-radius:var(--r-pill); background:var(--c-border-strong); transition:background .3s; }
.seg-bar i.done { background:var(--c-primary); }
.seg-bar i.now  { background:linear-gradient(90deg,var(--c-accent),var(--c-hot)); }
.fs-remaining { flex-shrink:0; font-size:12px; font-weight:700; color:var(--c-text); white-space:nowrap; }
.fs-remaining em { font-style:normal; font-size:20px; font-weight:900; color:#E62E00; margin:0 1px; }
.fs-merit { margin:9px 0 0; font-size:12px; font-weight:700; line-height:1.45; color:var(--c-text); letter-spacing:.01em; }
.fs-merit em { font-style:normal; font-weight:900; color:var(--c-accent-active); }
.fs-merit strong { font-weight:900; color:var(--c-primary); }

/* 連絡先入力(STEP4)直前の安心ノート */
.form-security {
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:10.5px; color:var(--c-text-muted); margin:0 0 18px; padding:7px 14px;
  background:var(--c-primary-tint); border-radius:var(--r-sm); border:1px solid var(--c-border);
}

.form-step { animation:fadeIn .22s ease; }
.step-hidden { display:none !important; }

.step-title { font-size:17.5px; font-weight:900; color:var(--c-text); line-height:1.36; margin-bottom:18px; letter-spacing:-.02em; }
.step-title-sub { margin-top:26px; padding-top:22px; border-top:1px solid var(--c-border); }
.step-hint { font-size:12px; color:var(--c-text-muted); margin-top:-12px; margin-bottom:12px; }

.label-required { display:inline-block; font-size:10px; font-weight:900; color:#fff; background:var(--c-danger); padding:2px 8px; border-radius:var(--r-xs); vertical-align:middle; margin-left:5px; }
.label-optional  { display:inline-block; font-size:10px; font-weight:700; color:var(--c-text-muted); background:var(--c-surface-muted); padding:2px 8px; border-radius:var(--r-xs); vertical-align:middle; margin-left:5px; }

.field-wrap { margin-bottom:20px; }
.field-label { display:block; font-size:var(--fs-label); font-weight:900; color:var(--c-text); margin-bottom:9px; letter-spacing:-.01em; }

.form-input,
.form-select,
.form-textarea {
  width:100%; padding:14px; min-height:54px;
  border:2px solid var(--c-border-strong); border-radius:var(--r-sm);
  font-size:16px; font-family:var(--f-base); color:var(--c-text); background:var(--c-input-bg);
  transition:border-color .2s,box-shadow .2s; -webkit-appearance:none;
}
.form-input::placeholder,.form-textarea::placeholder { color:#A7B0AD; }
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-focus-ring); }
.form-input.is-error,.form-select.is-error,.form-textarea.is-error { border-color:var(--c-danger); background:var(--c-danger-bg); }
.form-textarea { resize:vertical; min-height:96px; }

.select-wrap { position:relative; }
.form-select { appearance:none; -webkit-appearance:none; padding:14px 42px 14px 14px; cursor:pointer; }
.select-chevron { position:absolute; right:13px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.45; }

.field-error { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--c-danger); font-weight:700; margin-top:6px; }
.field-error:empty { display:none; margin:0; }
.field-error:not(:empty)::before { content:'⚠'; font-size:11px; }

/* ---- カード型選択肢 ---- */
.card-options { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.card-option {
  display:flex; align-items:center; justify-content:center; text-align:center; padding:14px 10px;
  border:2.5px solid var(--c-border-strong); border-radius:var(--r-md);
  background:#fff; font-size:14.5px; font-weight:700; color:var(--c-text);
  cursor:pointer; transition:all .18s; gap:8px; min-height:52px;
}
.card-option:hover { border-color:var(--c-primary); background:var(--c-primary-tint); }
.card-option.is-selected { background:var(--c-primary); color:#fff; border-color:var(--c-primary); box-shadow:var(--sh-card); }
.card-option-check { display:none; }
.card-option-text { flex:0 1 auto; }

/* ---- 職種カード ---- */
.job-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.job-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:15px 8px 14px;
  border:2.5px solid var(--c-border-strong); border-radius:var(--r-md);
  background:#fff; font-size:12px; font-weight:700; color:var(--c-text);
  cursor:pointer; transition:all .18s; text-align:center; line-height:1.35; position:relative;
}
.job-card:hover { border-color:var(--c-primary); background:var(--c-primary-tint); transform:translateY(-1px); }
.job-card.is-selected { background:var(--c-primary); color:#fff; border-color:var(--c-primary); box-shadow:var(--sh-card); }
.job-card-icon { width:40px; height:40px; border-radius:var(--r-sm); object-fit:contain; display:block; }
.job-card-check { position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; background:var(--c-accent); display:none; align-items:center; justify-content:center; box-shadow:var(--sh-sm); }
.job-card.is-selected .job-card-check { display:flex; }
.job-card-check::after { content:''; width:10px; height:6px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) translate(0,-1px); display:block; }

/* ---- ラジオボタン ---- */
.radio-group { display:flex; gap:10px; }
.radio-label {
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:15px; font-weight:700; color:var(--c-text); padding:14px 16px;
  border:2.5px solid var(--c-border-strong); border-radius:var(--r-md);
  flex:1; background:#fff; transition:all .18s; min-height:54px;
}
.radio-label:hover { border-color:var(--c-primary); background:var(--c-primary-tint); }
.radio-label input[type="radio"] { display:none; }
.radio-custom { width:20px; height:20px; border-radius:50%; border:2px solid var(--c-border-strong); display:inline-block; flex-shrink:0; position:relative; transition:all .18s; }
.radio-label:has(input:checked) { background:var(--c-primary); color:#fff; border-color:var(--c-primary); font-weight:900; box-shadow:var(--sh-card); }
.radio-label:has(input:checked) .radio-custom { border-color:#fff; background:#fff; }
.radio-label:has(input:checked) .radio-custom::after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--c-primary); top:50%; left:50%; transform:translate(-50%,-50%); }

/* ---- アコーディオン ---- */
.accordion-toggle { display:flex; align-items:center; width:100%; padding:13px 14px; border:2px solid var(--c-border-strong); border-radius:var(--r-sm); background:#fff; font-size:14px; font-weight:700; color:var(--c-text); text-align:left; gap:4px; transition:border-color .2s; }
.accordion-toggle[aria-expanded="true"] { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent; }
.accordion-icon { margin-left:auto; transition:transform .25s; opacity:.45; }
.accordion-toggle[aria-expanded="true"] .accordion-icon { transform:rotate(180deg); }
.accordion-body { border:2px solid var(--c-border-strong); border-top:none; border-bottom-left-radius:var(--r-sm); border-bottom-right-radius:var(--r-sm); background:#fff; overflow:hidden; }
.accordion-body .form-textarea { border:none; border-radius:0; padding:12px 14px; }
.accordion-body .form-textarea:focus { box-shadow:none; }

/* ---- 同意チェックボックス ---- */
/* 同意チェック：入力欄カードに見せない、控えめな確認行（CTA直前） */
.consent-wrap { margin:6px 0 14px; }
.consent-label { display:flex; align-items:center; gap:8px; cursor:pointer; padding:6px 2px; background:transparent; border:none; }
.consent-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.consent-custom { flex-shrink:0; width:18px; height:18px; border:2px solid var(--c-border-strong); border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; transition:all .18s; }
.consent-input:checked + .consent-custom { background:var(--c-primary); border-color:var(--c-primary); }
.consent-input:checked + .consent-custom::after { content:''; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px); display:block; }
.consent-input:focus-visible + .consent-custom { outline:2px solid var(--c-primary); outline-offset:2px; }
.consent-label.is-error .consent-custom { border-color:var(--c-danger); }
.consent-text-inner { font-size:12.5px; color:var(--c-text-muted); line-height:1.5; }
.consent-link { color:var(--c-primary); text-decoration:underline; }

.step-nav { margin-top:24px; display:flex; flex-direction:column-reverse; gap:4px; }
.step-nav .btn-cta  { width:100%; }
.step-nav .btn-back { align-self:center; }

/* ---- 完了画面 ---- */
.complete-box { text-align:center; padding:30px 20px 28px; }
.complete-icon { width:72px; height:72px; background:linear-gradient(135deg,var(--c-success-bg) 0%,#CDE9DC 100%); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.complete-icon i { font-size:34px; color:var(--c-primary); }
.complete-title { font-size:21px; font-weight:900; color:var(--c-primary); margin-bottom:10px; letter-spacing:-.02em; }
.complete-sub { font-size:14px; color:var(--c-text-muted); margin-bottom:28px; line-height:1.6; }
.complete-phone { margin-top:26px; padding-top:24px; border-top:1px solid var(--c-border); }
.complete-phone-label { font-size:13px; color:var(--c-text-muted); margin-bottom:12px; line-height:1.5; }
.complete-phone-btn { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; background:var(--c-primary); color:#fff; padding:14px 16px; border-radius:var(--r-md); box-shadow:0 3px 10px rgba(15,90,74,.22); transition:transform .08s, box-shadow .2s; }
.complete-phone-btn::after {
  content:''; position:absolute; top:0; bottom:0; left:-130%; width:60%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform:skewX(-20deg); pointer-events:none; z-index:2;
  animation:btnShine 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .complete-phone-btn::after{ animation:none; display:none; } }
.complete-phone-btn .fa-phone { font-size:17px; position:relative; z-index:3; }
.complete-phone-btn .complete-phone-num { position:relative; z-index:3; }
.complete-phone-btn:hover { box-shadow:0 5px 16px rgba(15,90,74,.3); }
.complete-phone-btn:active { transform:scale(.98); box-shadow:0 2px 6px rgba(15,90,74,.22); }
.complete-phone-num { font-size:22px; font-weight:900; color:#fff; letter-spacing:.5px; white-space:nowrap; }
.complete-phone-hint { display:block; margin-top:9px; font-size:11.5px; font-weight:700; color:var(--c-primary); }
.complete-phone-hint::before { content:'\f25a'; font-family:'Font Awesome 6 Free'; font-weight:900; margin-right:4px; font-size:11px; }

.logo-text-fallback { display:inline-block; font-size:14px; font-weight:900; letter-spacing:.02em; color:#fff; line-height:30px; }

/* ---- 電話セクション ---- */
.phone-section { background:#fff; border-top:1px solid var(--c-border); padding:28px 20px; text-align:center; }
.phone-inner { display:flex; flex-direction:column; align-items:center; gap:10px; }
.phone-label { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--c-text-muted); font-weight:700; }
.phone-label .fa-phone { font-size:13px; color:var(--c-primary); }
.phone-number { font-size:30px; font-weight:900; color:var(--c-primary); letter-spacing:1.5px; }
.btn-phone { display:flex; align-items:center; justify-content:center; gap:8px; background:#fff; border:2.5px solid var(--c-primary); color:var(--c-primary); font-size:15px; font-weight:900; padding:14px 32px; border-radius:var(--r-md); width:100%; max-width:280px; transition:all .2s; }
.btn-phone:hover { background:var(--c-primary); color:#fff; }

/* ---- フッター ---- */
.footer { background:var(--c-primary-dark); padding:28px 20px 40px; }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:16px; }
.footer-logo { height:28px; width:auto; display:block; }
.footer-nav { display:flex; flex-direction:column; align-items:center; gap:12px; }
.footer-link { font-size:11px; color:rgba(255,255,255,.65); text-decoration:underline; }
.footer-link:hover { color:#fff; }
.footer-disclaimer { font-size:10px; color:rgba(255,255,255,.35); line-height:1.7; text-align:center; padding:0 4px; }
.footer-copy { font-size:11px; color:rgba(255,255,255,.45); }

/* ========================================
  法務・情報ページ（運営会社／利用規約／プライバシーポリシー）
======================================== */
.legal-page { display:flex; flex-direction:column; min-height:100vh; background:#fff; }
.legal-page .form-section { flex:1 0 auto; background:#fff; }
.legal-main { width:100%; max-width:var(--max-width); margin:0 auto; padding:28px 20px 48px; }
.legal-title { font-size:22px; font-weight:900; color:var(--c-text); line-height:1.4; margin-bottom:6px; }
.legal-lead { font-size:13px; color:var(--c-text-muted); line-height:1.8; margin-bottom:24px; }
.legal-section { margin-bottom:28px; }
.legal-section + .legal-section { padding-top:24px; border-top:1px solid var(--c-border); }
.legal-h2 { font-size:16px; font-weight:900; color:var(--c-primary); line-height:1.5; margin-bottom:10px; }
.legal-body { font-size:14px; color:var(--c-text); line-height:1.9; }
.legal-body p { margin-bottom:12px; }
.legal-body p:last-child { margin-bottom:0; }
.legal-body ul,.legal-body ol { margin:8px 0 12px; padding-left:1.4em; }
.legal-body li { margin-bottom:6px; line-height:1.8; }
.legal-body a { color:var(--c-primary); text-decoration:underline; }
.legal-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.legal-table th,.legal-table td { text-align:left; vertical-align:top; padding:11px 12px; border:1px solid var(--c-border); line-height:1.8; }
.legal-table th { width:34%; background:var(--c-surface-muted); font-weight:700; color:var(--c-text); white-space:nowrap; }
.legal-updated { font-size:12px; color:var(--c-text-muted); margin-top:28px; text-align:right; }
.legal-back { display:inline-flex; align-items:center; gap:8px; margin-top:32px; color:var(--c-primary); font-size:14px; font-weight:700; text-decoration:none; }
.legal-back:hover { text-decoration:underline; }

#error-submit { text-align:center; font-size:13px; margin-top:12px; }
.submitting-overlay { position:fixed; inset:0; background:rgba(16,40,34,.5); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:var(--z-submitting); animation:overlayFade .2s ease; }
.submitting-card { display:flex; flex-direction:column; align-items:center; gap:14px; background:#fff; padding:30px 40px; border-radius:var(--r-lg); box-shadow:0 12px 40px rgba(0,0,0,.22); animation:cardPop .28s cubic-bezier(.2,.8,.3,1.2); }
.submitting-spinner { width:46px; height:46px; border:4px solid var(--c-primary-light); border-top-color:var(--c-primary); border-radius:50%; animation:spin .75s linear infinite; }
.submitting-text { font-size:15px; font-weight:900; color:var(--c-primary); letter-spacing:.02em; }
.submitting-dots i { font-style:normal; opacity:.25; animation:dotBlink 1.2s infinite; }
.submitting-dots i:nth-child(2){ animation-delay:.2s; }
.submitting-dots i:nth-child(3){ animation-delay:.4s; }
.submitting-sub { font-size:11.5px; font-weight:700; color:var(--c-text-muted); }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes overlayFade { from{opacity:0} to{opacity:1} }
@keyframes cardPop { from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none} }
@keyframes dotBlink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .submitting-card,.submitting-overlay{ animation:none; } .submitting-dots i{ animation:none; opacity:.6; } }

:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

@media(min-width:431px) {
  main { box-shadow:0 0 72px rgba(0,0,0,.22); }
  .modal-overlay { background:rgba(0,0,0,.60); }
}