/* Page-specific styles. Shared site styles live in the common site stylesheet. */
:root{
  --surface:#ffffff;
  --green:#17845b;
  --warning:#8a5a00;
  --warning-bg:#fff8e7;
  --danger:#b42318;
  --danger-bg:#fff3f1;
  --radius-xl:10px;
  --radius-lg:9px;
  --radius-md:16px;
}

.hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(210,218,228,.95);
  border-radius:10px;
  box-shadow:
    0 14px 34px rgba(19,35,58,.12),
    0 0 0 1px rgba(255,255,255,.5) inset;
  background:linear-gradient(110deg,#fff 0%,#f8fbff 100%),#fff;
}

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:stretch;
  min-height:360px;
  padding:30px;
}

.hero-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}

.kicker{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  color:var(--brand);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-title{
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:800;
}

.hero-title .brand-word{
  color:var(--brand);
}

.hero-desc{
  max-width:78ch;
  color:#485664;
  font-size:15px;
  line-height:1.8;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:all .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background:linear-gradient(90deg,var(--brand),#0067c9);
  color:#fff;
  box-shadow:0 12px 24px rgba(0, 79, 152,.22);
}

.btn-secondary{
  background:#fff;
  color:#1f5fbf;
  border-color:#cfd9e8;
}

.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.hero-side{
  display:grid;
  gap:14px;
  align-content:center;
}

.info-panel{
  background:rgba(255,255,255,.68);
  border:1.5px solid rgba(205,215,226,.95);
  border-radius:20px;
  padding:18px;
  backdrop-filter:blur(6px);
}

.info-panel h2{
  font-size:16px;
  margin-bottom:8px;
}

.info-panel p,
.info-panel li{
  color:#53606c;
  font-size:14px;
}

.info-panel ul{
  padding-left:20px;
  display:grid;
  gap:6px;
}

.section{
  margin-top:24px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.section-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--brand);
  text-transform:uppercase;
}

.section-title{
  font-size:24px;
  line-height:1.2;
  font-weight:800;
}

.section-desc{
  font-size:14px;
  color:var(--muted);
  margin-top:4px;
}

.panel{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:24px;
}

.panel h2{
  font-size:24px;
  line-height:1.25;
  margin-bottom:12px;
}

.panel h3{
  font-size:18px;
  margin:20px 0 8px;
}

.panel p,
.panel li{
  color:#314f70;
}

.panel ul{
  padding-left:20px;
  display:grid;
  gap:8px;
}

.notice{
  border:1px solid #f0cf9d;
  background:rgba(255,249,235,.94);
  border-radius:18px;
  padding:14px 16px;
  color:#6d4d14;
  font-size:14px;
}

.free-notice{
  display:grid;
  gap:8px;
  border:2px solid #f0cf9d;
  background:linear-gradient(135deg,#fff7dd,#ffffff);
}

.free-notice strong{
  display:block;
  font-size:21px;
  color:var(--green);
  font-weight:950;
  line-height:1.35;
}

.free-notice span{
  color:#6d4d14;
}

.posting-pilot-notice{
  border:1px solid #cfe0f2;
  border-left:4px solid var(--brand);
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,54,109,.06);
  padding:20px 24px;
}

.posting-pilot-notice h2{
  color:#07315f;
  font-size:20px;
  line-height:1.3;
  margin:0 0 10px;
}

.posting-pilot-copy{
  display:grid;
  gap:10px;
  max-width:82ch;
}

.posting-pilot-copy p{
  color:#475569;
  font-size:14px;
  line-height:1.75;
  margin:0;
  overflow-wrap:anywhere;
}

.posting-form-fee-note{
  border:1px solid #cfe0f2;
  border-radius:8px;
  background:#f8fbff;
  color:#475569;
  font-size:13px;
  line-height:1.65;
  margin:0;
  padding:12px 14px;
}

.posting-form-fee-note span{
  display:block;
  margin-top:4px;
}

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

.policy-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
}

.policy-card strong{
  display:block;
  font-size:16px;
  margin-bottom:6px;
}

.policy-card span{
  display:block;
  font-size:14px;
  color:var(--muted);
}

.form-preview-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:22px;
  align-items:start;
}

.job-form{
  display:grid;
  gap:16px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  font-size:14px;
  font-weight:800;
}

.required{
  color:var(--brand);
}

.input,
.select,
.textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:var(--text);
  padding:13px 14px;
  outline:none;
}

.textarea{
  min-height:130px;
  resize:vertical;
}

.input::placeholder,
.textarea::placeholder{
  color:#a3adb8;
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:#a9c8f5;
  box-shadow:0 0 0 3px rgba(47,128,237,.13);
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea{
  border-color:#f2a39a;
  background:var(--danger-bg);
  box-shadow:0 0 0 3px rgba(180,35,24,.08);
}

.help{
  font-size:12px;
  color:var(--muted-2);
}

.counter{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--muted-2);
}

.counter.over{
  color:var(--danger);
  font-weight:800;
}

.error-message{
  display:none;
  color:var(--danger);
  background:var(--danger-bg);
  border:1px solid #ffd2cd;
  border-radius:12px;
  padding:8px 10px;
  font-size:12px;
  font-weight:800;
}

.field.has-error .error-message{
  display:block;
}

.validation-note{
  border:1px solid #dce4ee;
  background:#fbfdff;
  border-radius:16px;
  padding:14px;
  color:#53606c;
  font-size:13px;
}

.status-box{
  display:none;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  font-size:14px;
}

.status-box.show{display:block;}

.status-success{
  border-color:#cfe9d8;
  background:#f4fbf6;
  color:#1d5c33;
}

.status-error{
  border-color:#f3d0d6;
  background:#f8fbff;
  color:#9d2235;
}

.preview-wrap{
  position:sticky;
  top:96px;
}

.preview-label{
  margin-bottom:12px;
  color:var(--muted);
  font-size:14px;
}

.preview-block{
  margin-top:18px;
}

.preview-block:first-of-type{
  margin-top:0;
}

.preview-block-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:16px;
  background:#f5f8fc;
  border:1px solid #dce4ee;
}

.preview-block-title strong{
  font-size:15px;
}

.preview-block-title span{
  color:var(--muted);
  font-size:12px;
}

.job-preview-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  box-shadow:var(--shadow);
  padding:18px;
}

.job-preview-card.small-preview{
  border:2px solid #cfe0f8;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}

.job-preview-card.detail-preview-card{
  border:2px solid #b8d0eb;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.job-preview-card,
.job-preview-card *{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.company{
  font-size:20px;
  font-weight:950;
  line-height:1.15;
}

.position{
  font-size:14px;
  color:var(--muted);
  margin-top:4px;
}

.badge{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background:#eaf4ff;
  color:#b83355;
  border:1px solid #f2c8d4;
  white-space:normal;
  max-width:160px;
}

.meta{
  margin-top:14px;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:8px 10px;
  font-size:14px;
}

.meta dt{
  font-weight:900;
  color:#433744;
}

.meta dd{
  color:#564a55;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.detail-preview-card h3{
  font-size:22px;
  font-weight:950;
  line-height:1.15;
}

.detail-preview-card .sub{
  margin-top:4px;
  color:var(--muted);
  font-weight:700;
}

.detail-grid{
  margin-top:16px;
  display:grid;
  gap:10px;
}

.detail-item{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:8px;
  font-size:14px;
}

.detail-item .k{
  font-weight:900;
  color:#433744;
}

.detail-item div,
.detail-sec p,
.detail-sec li{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.detail-sec{
  margin-top:16px;
}

.detail-sec h4{
  font-size:14px;
  font-weight:900;
  margin-bottom:6px;
}

.detail-sec p,
.detail-sec li{
  font-size:14px;
  color:#4f4350;
}

.detail-sec ul{
  padding-left:18px;
  display:grid;
  gap:4px;
}

.optional-preview{
  display:none;
}

@media (max-width:1100px){
.hero-grid,
  .form-preview-grid{
    grid-template-columns:1fr;
  }

.preview-wrap{
    position:static;
  }

.policy-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:780px){
.hero-grid{
    min-height:auto;
    padding:22px;
  }

.form-grid{
    grid-template-columns:1fr;
  }

.field.full{
    grid-column:auto;
  }

.meta,
  .detail-item{
    grid-template-columns:1fr;
  }

  .posting-pilot-notice{
    padding:18px;
  }
}

@media (max-width:560px){
.hero{
    background-position:64% center;
  }
}

/* Production jobs posting baseline */
body{
  background:#f4f8fc;
  color:#1f2937;
}

.main{
  padding:18px 0 72px;
  background:#f4f8fc;
}

.container{
  width:min(1160px, calc(100% - 32px));
}

.hero{
  border:1px solid #cfe0f2;
  border-radius:8px;
  background:linear-gradient(110deg,#fff 0%,#f8fbff 100%),#fff;
  box-shadow:0 8px 20px rgba(0,54,109,.08);
  padding:24px;
}

.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);
  min-height:auto;
  gap:18px;
  padding:24px;
}

.kicker{
  border-radius:6px;
  background:#eaf4ff;
  border-color:#cfe0f2;
  color:#00366d;
  letter-spacing:0;
  text-transform:none;
}

.hero-title{
  color:#07315f;
  font-size:42px;
  letter-spacing:0;
}

.hero-title .brand-word{
  color:inherit;
}

.hero-desc,
.section-desc,
.panel p,
.notice span,
.policy-card span{
  color:#475569;
}

.btn{
  border-radius:7px;
}

.btn-primary{
  background:#00366d;
  box-shadow:0 8px 18px rgba(0,54,109,.18);
}

.btn-secondary{
  color:#00366d;
  border-color:#cfe0f2;
}

.info-panel,
.panel,
.notice,
.policy-card,
.faq-card,
.job-preview-card,
.status-box{
  border:1px solid #cfe0f2;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,54,109,.06);
}

.section{
  margin-top:20px;
}

.posting-flow-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.posting-flow-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:148px;
  padding:16px;
  border:1px solid #cfe0f2;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,54,109,.06);
}

.posting-flow-card span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#00366d;
  color:#fff;
  font-weight:800;
}

.posting-flow-card strong{
  color:#07315f;
}

.posting-flow-card p{
  margin:0;
  color:#475569;
  font-size:14px;
  line-height:1.7;
}

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

.faq-card{
  padding:18px;
}

.faq-card h3{
  color:#07315f;
  font-size:16px;
  margin:0 0 8px;
}

.faq-card p{
  color:#475569;
  font-size:14px;
  line-height:1.7;
  margin:0;
}

.badge{
  color:#07315f;
  border-color:#cfe0f2;
}

.meta dt,
.detail-item .k{
  color:#07315f;
}

.meta dd,
.detail-sec p,
.detail-sec li{
  color:#475569;
}

@media (max-width:900px){
  .hero-grid,
  .posting-flow-grid,
  .faq-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:720px){
  .hero{
    padding:18px;
  }

  .hero-title{
    font-size:30px;
  }
}

/* Dark theme contrast for posting form and preview cards. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .main{
  background:
    linear-gradient(rgba(7,17,31,.96), rgba(7,17,31,.98)),
    url("/assets/images/brand/site-bg.jpg") center top / cover fixed no-repeat,
    var(--color-bg, #07111f);
  color:var(--color-text, #e8f1fb);
}

:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .info-panel,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .notice,
:root[data-theme="dark"] .policy-card,
:root[data-theme="dark"] .faq-card,
:root[data-theme="dark"] .job-preview-card,
:root[data-theme="dark"] .status-box,
:root[data-theme="dark"] .posting-flow-card,
:root[data-theme="dark"] .preview-block-title,
:root[data-theme="dark"] .validation-note{
  border-color:var(--color-border, #263a52);
  background:var(--surface-card-bg, #101f33);
  color:var(--surface-card-text, #e8f1fb);
  box-shadow:var(--shadow, 0 16px 36px rgba(0,0,0,.24));
}

:root[data-theme="dark"] .posting-pilot-notice,
:root[data-theme="dark"] .posting-form-fee-note{
  border-color:var(--color-border, #263a52);
  background:var(--surface-card-bg, #101f33);
  color:var(--surface-card-text, #e8f1fb);
}

:root[data-theme="dark"] .posting-pilot-notice{
  border-left-color:var(--color-primary, #67b7ff);
}

:root[data-theme="dark"] .posting-pilot-notice h2{
  color:var(--surface-card-heading, #f4f8ff);
}

:root[data-theme="dark"] .posting-pilot-copy p,
:root[data-theme="dark"] .posting-form-fee-note{
  color:var(--surface-card-muted, #a8bad0);
}

:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .panel h2,
:root[data-theme="dark"] .panel h3,
:root[data-theme="dark"] .policy-card strong,
:root[data-theme="dark"] .faq-card h3,
:root[data-theme="dark"] .posting-flow-card strong,
:root[data-theme="dark"] .company,
:root[data-theme="dark"] .detail-preview-card h3,
:root[data-theme="dark"] .meta dt,
:root[data-theme="dark"] .detail-item .k,
:root[data-theme="dark"] .preview-block-title strong,
:root[data-theme="dark"] .field label{
  color:var(--surface-card-heading, #07315f);
}

:root[data-theme="dark"] .hero-desc,
:root[data-theme="dark"] .section-desc,
:root[data-theme="dark"] .panel p,
:root[data-theme="dark"] .panel li,
:root[data-theme="dark"] .notice span,
:root[data-theme="dark"] .policy-card span,
:root[data-theme="dark"] .faq-card p,
:root[data-theme="dark"] .posting-flow-card p,
:root[data-theme="dark"] .position,
:root[data-theme="dark"] .meta dd,
:root[data-theme="dark"] .detail-preview-card .sub,
:root[data-theme="dark"] .detail-sec p,
:root[data-theme="dark"] .detail-sec li,
:root[data-theme="dark"] .preview-label,
:root[data-theme="dark"] .preview-block-title span,
:root[data-theme="dark"] .help,
:root[data-theme="dark"] .counter,
:root[data-theme="dark"] .validation-note{
  color:var(--surface-card-muted, #526170);
}

:root[data-theme="dark"] .kicker,
:root[data-theme="dark"] .badge{
  border-color:var(--color-border, #263a52);
  background:var(--color-primary-soft, rgba(69,151,232,.16));
  color:var(--color-primary, #67b7ff);
}

:root[data-theme="dark"] .posting-flow-card span{
  background:var(--color-primary, #67b7ff);
  color:var(--button-primary-text, #061321);
}

:root[data-theme="dark"] .input,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .textarea{
  border-color:var(--color-border, #263a52);
  background:var(--color-input-bg, #0f1d30);
  color:var(--color-input-text, #e8f1fb);
}

:root[data-theme="dark"] .input::placeholder,
:root[data-theme="dark"] .textarea::placeholder{
  color:var(--color-text-muted, #a8bad0);
}

:root[data-theme="dark"] .field.has-error .input,
:root[data-theme="dark"] .field.has-error .select,
:root[data-theme="dark"] .field.has-error .textarea{
  border-color:rgba(255,141,154,.54);
  background:rgba(97,31,43,.35);
}

:root[data-theme="dark"] .error-message{
  border-color:rgba(255,141,154,.42);
  background:rgba(97,31,43,.35);
  color:#ffc7cf;
}

:root[data-theme="dark"] .status-success{
  border-color:rgba(98,218,146,.38);
  background:rgba(22,96,61,.24);
  color:#a9f0c5;
}

:root[data-theme="dark"] .status-error{
  border-color:rgba(255,141,154,.42);
  background:rgba(97,31,43,.35);
  color:#ffc7cf;
}

:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn-secondary{
  border-color:var(--button-on-dark-border, #2b4c70);
  background:var(--button-on-dark-bg, #122238);
  color:var(--button-on-dark-text, #dbeeff);
  box-shadow:none;
}

:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .btn:focus-visible{
  border-color:rgba(103,183,255,.5);
  background:rgba(103,183,255,.14);
  color:var(--color-primary, #67b7ff);
}

:root[data-theme="dark"] .btn-primary{
  border-color:var(--button-primary-bg, #67b7ff);
  background:var(--button-primary-bg, #67b7ff);
  color:var(--button-primary-text, #061321);
}

:root[data-theme="dark"] .btn[disabled]{
  border-color:var(--color-border, #263a52);
  background:#0b1626;
  color:#71859d;
  opacity:1;
}

:root[data-theme="dark"] body .hero,
:root[data-theme="dark"] body .hero-main,
:root[data-theme="dark"] body .hero-side,
:root[data-theme="dark"] body .info-panel,
:root[data-theme="dark"] body .panel,
:root[data-theme="dark"] body .notice,
:root[data-theme="dark"] body .policy-card,
:root[data-theme="dark"] body .faq-card,
:root[data-theme="dark"] body .job-preview-card,
:root[data-theme="dark"] body .status-box,
:root[data-theme="dark"] body .posting-flow-card,
:root[data-theme="dark"] body .preview-block-title,
:root[data-theme="dark"] body .validation-note{
  border-color:var(--color-border, #263a52);
  background:var(--surface-card-bg, #101f33);
  color:var(--surface-card-text, #e8f1fb);
}

:root[data-theme="dark"] body .hero-title,
:root[data-theme="dark"] body .section-title,
:root[data-theme="dark"] body .panel h2,
:root[data-theme="dark"] body .panel h3,
:root[data-theme="dark"] body .policy-card strong,
:root[data-theme="dark"] body .faq-card h3,
:root[data-theme="dark"] body .posting-flow-card strong,
:root[data-theme="dark"] body .company,
:root[data-theme="dark"] body .detail-preview-card h3,
:root[data-theme="dark"] body .detail-sec h4,
:root[data-theme="dark"] body .meta dt,
:root[data-theme="dark"] body .detail-item .k,
:root[data-theme="dark"] body .preview-block-title strong,
:root[data-theme="dark"] body .field label{
  color:var(--surface-card-heading, #07315f);
}

:root[data-theme="dark"] body .hero-desc,
:root[data-theme="dark"] body .section-desc,
:root[data-theme="dark"] body .panel p,
:root[data-theme="dark"] body .panel li,
:root[data-theme="dark"] body .notice span,
:root[data-theme="dark"] body .policy-card span,
:root[data-theme="dark"] body .faq-card p,
:root[data-theme="dark"] body .posting-flow-card p,
:root[data-theme="dark"] body .position,
:root[data-theme="dark"] body .meta dd,
:root[data-theme="dark"] body .detail-preview-card .sub,
:root[data-theme="dark"] body .detail-sec p,
:root[data-theme="dark"] body .detail-sec li,
:root[data-theme="dark"] body .preview-label,
:root[data-theme="dark"] body .preview-block-title span,
:root[data-theme="dark"] body .help,
:root[data-theme="dark"] body .counter,
:root[data-theme="dark"] body .validation-note{
  color:var(--surface-card-muted, #526170);
}

:root[data-theme="dark"] body .section > .section-head .section-title,
:root[data-theme="dark"] body #postingFlowTitle,
:root[data-theme="dark"] body #postingFaqTitle{
  color:var(--color-text-strong, #f4f8ff);
}

:root[data-theme="dark"] body .section > .section-head .section-desc{
  color:var(--color-text-muted, #a8bad0);
}

:root[data-theme="dark"] body .field label .required{
  color:#ffb4c0;
}