:root{
  --bg:#fbfcf9;--paper:#fff;--ink:#183128;--muted:#66756f;--green:#0c5138;--green-2:#157552;--green-soft:#eef6f1;--line:#dfe8e2;--danger:#a13d3d;--shadow:0 18px 55px rgba(31,58,45,.08);--radius:22px
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#fff 0,#fbfcf9 70%,#f7faf7 100%)}
button,input,select,textarea{font:inherit}
button{color:inherit}
[hidden]{display:none!important}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,76px);position:relative;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(223,232,226,.55)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-monogram{width:53px;height:53px;border:1px solid rgba(12,81,56,.45);border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#fff}
.brand-monogram img{width:48px;height:48px;object-fit:contain}
.brand-wordmark{height:34px;width:auto;object-fit:contain}
.header-actions{display:flex;gap:16px;align-items:center}.header-link,.text-link,.back-link,.inline-link{border:0;background:transparent;padding:0;cursor:pointer;color:var(--green);text-decoration:none}.header-link{font-size:15px;font-weight:650}.header-link:hover,.text-link:hover,.back-link:hover,.inline-link:hover{text-decoration:underline}
.view{max-width:1480px;margin:0 auto;padding:0 clamp(24px,5vw,76px)}
.landing-view{padding-top:8px;padding-bottom:10px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);min-height:430px;align-items:center;gap:clamp(36px,5vw,88px)}
.hero-copy{max-width:720px;padding:8px 0 28px}.hero-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,5vw,74px);line-height:1.04;letter-spacing:-.035em;font-weight:500;color:var(--green);margin:0 0 22px}.hero-lead,.step-lead{color:var(--muted);font-size:18px;line-height:1.65}.hero-lead{max-width:650px;margin:0 0 24px}.hero-actions{display:flex;align-items:center;gap:26px}
.button{border:0;border-radius:14px;padding:14px 24px;font-weight:700;cursor:pointer;transition:.18s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.button.primary{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(12,81,56,.16)}.button.primary:hover:not(:disabled){background:#083f2c;transform:translateY(-1px)}.button.secondary{background:#fff;color:var(--green);border:1px solid #b9cdc1}.button.small{padding:10px 16px;border-radius:12px;font-size:14px}.button.full{width:100%}.button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.text-link{font-weight:650;font-size:15px}
.hero-photo{height:430px;border-radius:44% 18% 32% 18%;background:linear-gradient(90deg,rgba(251,252,249,.95) 0%,rgba(251,252,249,.18) 17%,rgba(251,252,249,0) 36%),url('/static/brand/contract-signing.jpg') center/cover no-repeat;filter:saturate(.82) contrast(.98);box-shadow:inset 24px 0 34px rgba(251,252,249,.65)}
.accordion{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.accordion details{padding:14px 20px;min-height:56px}.accordion details+details{border-left:1px solid var(--line)}.accordion summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;color:var(--green);font-weight:720}.accordion summary::-webkit-details-marker{display:none}.accordion summary::after{content:'+';margin-left:auto;font-size:21px;font-weight:400}.accordion details[open] summary::after{content:'−'}.accordion p{margin:14px 0 2px;padding-left:35px;color:var(--muted);line-height:1.55;font-size:14px}.accordion-icon{width:23px;height:23px;border:1px solid #a8c1b2;border-radius:50%;display:grid;place-items:center;font-size:12px}
.onboarding-view{max-width:1160px;padding-top:6px;padding-bottom:20px}.wizard-shell{max-width:780px;margin:0 auto}.step{text-align:center;animation:fadeIn .24s ease}.step h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4vw,48px);font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--green);margin:0 0 11px}.step>.step-lead{max-width:680px;margin:0 auto 18px}.step-icon{width:52px;height:52px;margin:0 auto 8px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:22px;border:1px solid #d2e5d8}.mail-icon{font-weight:800}.shield-icon{font-size:26px}.upload-icon{font-size:28px}
.step-title-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 2px}.step-title-row h2{margin:0}.title-side-icon{width:42px;height:42px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;border:1px solid #d2e5d8;font-size:18px;flex:0 0 auto}.email-step>.step-lead{margin-top:0}
.form-stack{max-width:590px;margin:0 auto;display:flex;flex-direction:column;gap:18px;text-align:left}.field-label{display:block;font-size:13px;font-weight:700;color:#4f6259;margin-bottom:8px}.form-stack input,.form-stack select,.form-stack textarea,.question-control input,.question-control select,.question-control textarea{width:100%;border:1px solid #cfded5;background:#fff;border-radius:14px;min-height:52px;padding:12px 14px;color:var(--ink);outline:none;transition:.16s}.form-stack textarea,.question-control textarea{min-height:120px;resize:vertical}.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.question-control input:focus,.question-control select:focus,.question-control textarea:focus{border-color:#75a68a;box-shadow:0 0 0 4px rgba(21,117,82,.08)}
.phone-row{display:grid;grid-template-columns:220px 1fr;gap:14px}.phone-input-wrap{display:flex;align-items:center;border:1px solid #cfded5;background:#fff;border-radius:14px;overflow:hidden;min-height:52px}.phone-input-wrap:focus-within{border-color:#75a68a;box-shadow:0 0 0 4px rgba(21,117,82,.08)}.phone-input-wrap input{border:0;box-shadow:none!important;border-radius:0;padding-left:8px}.phone-prefix{padding-left:14px;color:#52665b;font-weight:700}.field-message{min-height:21px;margin:-4px 0 0;color:var(--muted);font-size:13px}.field-message.error{color:var(--danger)}.field-message.valid{color:var(--green-2)}
.input-with-icon{display:flex;align-items:center;border:1px solid #cfded5;border-radius:14px;background:#fff;padding-left:15px;color:#7c8d84}.input-with-icon:focus-within{border-color:#75a68a;box-shadow:0 0 0 4px rgba(21,117,82,.08)}.input-with-icon input{border:0;box-shadow:none!important;border-radius:0}
.otp-group{display:grid;grid-template-columns:repeat(6,58px);justify-content:center;gap:10px}.otp-group input{width:58px;height:64px;text-align:center;font-size:28px;font-weight:700;padding:0;border-radius:14px}.resend-link{text-align:center;margin:0 auto}.back-link{margin:24px auto 0;display:inline-block;font-size:14px}
.status-message{max-width:620px;margin:0 auto 20px;padding:12px 16px;border-radius:13px;background:#fff1f0;color:#8b3434;border:1px solid #f0cccc;text-align:left;font-size:14px}.status-message.success{background:#edf8f1;color:#285c43;border-color:#cfe6d7}
.legal-step .step-lead{max-width:720px}.legal-form{max-width:720px}.check-row{display:grid;grid-template-columns:22px 1fr;gap:12px;text-align:left;padding:16px 18px;border:1px solid var(--line);background:#fff;border-radius:15px;line-height:1.5}.check-row input{width:20px;height:20px;min-height:0;padding:0;margin:2px 0 0;accent-color:var(--green)}.inline-link{display:inline;font-weight:700}.authorization-details{text-align:left;border:1px solid var(--line);border-radius:15px;padding:0 18px;background:#fbfdfb}.authorization-details summary{padding:15px 0;cursor:pointer;color:var(--green);font-weight:750}.authorization-details ul{margin:0 0 16px 20px;padding:0;color:#53665d;line-height:1.55}.authorization-details li+li{margin-top:6px}.authorization-details p,.privacy-line{color:#617168;line-height:1.55;font-size:14px}.privacy-line{text-align:left;margin:2px 4px}.trust-note{text-align:center;color:#7b8982;font-size:12.5px;line-height:1.5;margin:0}
.dropzone{max-width:650px;margin:0 auto 14px;border:1.5px dashed #a9c8b7;border-radius:18px;min-height:132px;background:#fcfefd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.18s}.dropzone:hover,.dropzone.drag{border-color:var(--green-2);background:#f5faf7}.dropzone input{display:none}.dropzone strong{font-family:Georgia,"Times New Roman",serif;color:var(--green);font-size:18px;font-weight:500}.dropzone>span:not(.button):not(.drop-icon),.dropzone small{color:#78867f}.drop-icon{font-size:20px;color:var(--green)}
.upload-list{max-width:650px;margin:0 auto;display:flex;flex-direction:column;gap:9px}.upload-item{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;text-align:left}.upload-file-icon{width:34px;height:34px;border-radius:9px;background:var(--green-soft);display:grid;place-items:center;color:var(--green);font-size:12px;font-weight:800}.upload-item strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-item small{color:#7a8881}.upload-state{font-size:13px;color:var(--green)}.upload-state.error{color:var(--danger)}
.calm-message{max-width:650px;margin:14px auto 0;padding:15px 18px;border-radius:16px;background:var(--green-soft);border:1px solid #d5e8dc;text-align:left}.calm-message strong{color:var(--green)}.calm-message p{margin:5px 0 0;color:#5c6d64;line-height:1.55}.calm-message.subtle{background:#fafcfb}
.analysis-motion{height:28px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:8px}.analysis-motion i{width:9px;height:9px;border-radius:50%;background:#5d9075;animation:pulse 1.3s infinite ease-in-out}.analysis-motion i:nth-child(2){animation-delay:.16s}.analysis-motion i:nth-child(3){animation-delay:.32s}
.question-step{max-width:780px;margin:0 auto}.question-kicker{text-transform:uppercase;letter-spacing:.12em;color:#739080;font-weight:750;font-size:12px}.question-form{margin-top:26px}.question-card{text-align:left;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 26px;box-shadow:0 8px 30px rgba(31,58,45,.045)}.question-label{font-family:Georgia,"Times New Roman",serif;font-size:25px;line-height:1.3;color:var(--green);font-weight:500;margin:0}.question-help{color:#6d7d75;line-height:1.55;margin:9px 0 18px}.question-control{display:flex;flex-direction:column;gap:10px}.choice-row{display:flex;align-items:flex-start;gap:11px;border:1px solid #d8e4dd;border-radius:13px;padding:13px 14px;cursor:pointer}.choice-row:hover{background:#f8fbf9}.choice-row input{width:18px;height:18px;min-height:0;margin:2px 0 0;accent-color:var(--green)}.special-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.chip{border:1px solid #cbdcd2;background:#fff;color:#53675c;border-radius:999px;padding:8px 12px;cursor:pointer}.chip.active{background:var(--green-soft);border-color:#8fb49e;color:var(--green)}.question-actions{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-top:18px}.question-actions .back-link{margin:0;justify-self:start}.question-actions .button{justify-self:end}.saved-state{font-size:12px;color:#74857c}.question-error{color:var(--danger);font-size:13px;margin:10px 0 0}.money-grid{display:grid;grid-template-columns:1.3fr .8fr .9fr .8fr;gap:10px}.market-editor{display:flex;flex-direction:column;gap:14px}.market-card{border:1px solid #d8e4dd;border-radius:16px;padding:16px;background:#fcfdfc}.market-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.market-grid .wide{grid-column:1/-1}.market-modes{display:flex;gap:10px;flex-wrap:wrap}.market-modes .choice-row{padding:9px 11px}.tag-input-wrap{display:flex;gap:8px}.tag-input-wrap input{flex:1}.market-remove{border:0;background:none;color:#9a4b4b;cursor:pointer;font-size:13px}.add-market{align-self:flex-start}
.language-switcher{position:fixed;left:18px;bottom:16px;z-index:30}.language-switcher select{border:1px solid #d5e2da;border-radius:10px;background:rgba(255,255,255,.9);color:#52645b;padding:7px 9px;font-size:12px;box-shadow:0 5px 18px rgba(20,50,35,.06)}
.legal-dialog{border:0;padding:0;background:transparent}.legal-dialog::backdrop{background:rgba(14,35,25,.28);backdrop-filter:blur(2px)}.legal-dialog-card{width:min(720px,calc(100vw - 32px));max-height:min(78vh,760px);overflow:auto;background:#fff;border-radius:22px;padding:30px;box-shadow:var(--shadow);position:relative}.legal-dialog-card h3{font-family:Georgia,"Times New Roman",serif;color:var(--green);font-size:30px;font-weight:500;margin:0 40px 18px 0}.legal-dialog-card p,.legal-dialog-card li{color:#5f7067;line-height:1.65}.dialog-x{position:absolute;right:18px;top:14px;border:0;background:none;font-size:30px;color:#6f8178;cursor:pointer}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes pulse{0%,80%,100%{transform:scale(.7);opacity:.35}40%{transform:scale(1);opacity:1}}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;min-height:auto}.hero-photo{height:360px;order:-1}.hero-copy{padding-bottom:20px}.accordion{grid-template-columns:1fr}.accordion details+details{border-left:0;border-top:1px solid var(--line)}.money-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.site-header{height:70px;padding:0 18px}.brand-monogram{width:46px;height:46px}.brand-monogram img{width:42px;height:42px}.brand-wordmark{height:28px}.view{padding-left:18px;padding-right:18px}.landing-view{padding-top:16px}.hero-copy h1{font-size:42px}.hero-photo{height:300px;border-radius:28px}.hero-actions{align-items:flex-start;flex-direction:column;gap:15px}.step h2{font-size:36px}.phone-row{grid-template-columns:1fr}.otp-group{gap:6px}.otp-group input{width:45px;height:56px;font-size:23px}.question-card{padding:20px 18px}.question-actions{grid-template-columns:1fr 1fr}.saved-state{display:none}.money-grid,.market-grid{grid-template-columns:1fr}.market-grid .wide{grid-column:auto}}

@media (min-width:701px) and (max-height:820px){
  .site-header{height:78px}
  .landing-view{padding-top:14px;padding-bottom:14px}
  .hero-grid{min-height:410px}
  .hero-photo{height:410px}
  .hero-copy h1{font-size:clamp(44px,4.6vw,66px)}
  .hero-copy{padding-top:0;padding-bottom:18px}
  .accordion details{padding-top:14px;padding-bottom:14px;min-height:56px}
  .onboarding-view{padding-top:4px;padding-bottom:18px}
  .step>.step-lead{margin-bottom:18px}
  .dropzone{min-height:122px}
}


/* ============================================================
   MJA Landing Design Baseline v1 — ACCEPTED / LOCKED
   Frontend implementation v5.0.0
   ============================================================ */
body.landing-active{background:#fffdfa}
body.landing-active .language-switcher{display:none}
.site-header{max-width:none}
.brand-monogram-img{width:58px;height:58px;object-fit:contain;display:block}
.header-start{padding:11px 24px;border-radius:10px;min-width:110px}

.landing-view{padding:0;margin:0;max-width:none;color:#203029;background:#fffdfa}
.landing-container{width:min(1440px,calc(100% - 64px));margin:0 auto}
.landing-section{width:100%}
.hero-section{border-bottom:1px solid #e8eee9;background:linear-gradient(90deg,#fffdfa 0%,#fffdfa 48%,#f8faf7 100%)}
.landing-view .hero-grid{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(520px,1.15fr);gap:52px;min-height:560px;align-items:stretch}
.landing-view .hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:62px 0;max-width:660px}
.landing-view .hero-copy h1{font-family:Georgia,"Times New Roman",serif;color:#174d36;font-size:clamp(44px,4.3vw,68px);line-height:1.08;letter-spacing:-.035em;font-weight:500;margin:0 0 24px}
.landing-view .hero-lead{font-size:17px;line-height:1.65;color:#45564e;margin:0 0 28px;max-width:620px}
.hero-start{min-width:150px}
.hero-photo-v1{width:100%;height:100%;min-height:560px;object-fit:cover;object-position:center;border:0;display:block}

.how-section{padding:42px 0 34px;background:#fff}
.section-title{font-family:Georgia,"Times New Roman",serif;color:#174d36;font-size:clamp(31px,3vw,43px);line-height:1.15;font-weight:500;text-align:center;margin:0 0 30px}
.section-title.left{text-align:left}
.section-intro{text-align:center;max-width:800px;margin:-12px auto 30px;color:#51625a;font-size:16px;line-height:1.6}
.workflow-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.workflow-card{position:relative;border:1px solid #dfe8e1;border-radius:18px;padding:22px 17px 20px;background:#fff;min-height:298px;box-shadow:0 7px 24px rgba(31,58,45,.035);text-align:center}
.workflow-icon{width:58px;height:58px;border-radius:50%;margin:0 auto 13px;display:grid;place-items:center;border:1px solid #cee0d4;background:#f4f9f5;color:#17523a;font-size:25px}
.workflow-number{position:absolute;top:14px;left:14px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#17523a;color:#fff;font-size:12px;font-weight:800}
.workflow-card h3{font-family:Georgia,"Times New Roman",serif;color:#193f30;font-weight:600;font-size:18px;line-height:1.25;margin:0 0 12px}
.workflow-card p{font-size:13.5px;line-height:1.52;color:#56665f;margin:0}
.workflow-card p+p{margin-top:9px}
.workflow-note{color:#315544!important;font-weight:650}

.routine-section{padding:18px 0 38px;background:#fff}
.routine-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:stretch}
.routine-panel,.interview-panel{border:1px solid #dfe8e1;border-radius:22px;background:#fbfcf8;overflow:hidden}
.routine-panel{padding:34px 36px}
.routine-panel .section-title{font-size:35px;margin-bottom:22px}
.check-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.check-list li{position:relative;padding-left:31px;color:#485950;line-height:1.5}
.check-list li::before{content:'✓';position:absolute;left:0;top:0;width:21px;height:21px;border:1px solid #78a58d;border-radius:50%;display:grid;place-items:center;color:#176144;font-size:12px;font-weight:800}
.mail-note{margin-top:24px;border:1px solid #9bbbac;border-radius:13px;padding:15px 17px;display:grid;grid-template-columns:34px 1fr;gap:12px;background:#fff;align-items:start}
.mail-note-icon{font-size:24px;color:#14563c}.mail-note p{margin:0;color:#4a5d53;line-height:1.5;font-size:14px}
.interview-panel{position:relative;min-height:440px;background:#eae5dc}
.interview-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.interview-copy{position:absolute;right:24px;bottom:24px;width:min(330px,calc(100% - 48px));padding:24px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 14px 38px rgba(30,45,37,.14)}
.interview-copy h2{font-family:Georgia,"Times New Roman",serif;color:#174d36;font-size:29px;font-weight:500;margin:0 0 10px}.interview-copy p{margin:0 0 17px;line-height:1.5;color:#516158}

.security-section{padding:0 0 38px;background:#fff}
.security-panel{border:1px solid #d9e5dc;border-radius:22px;padding:34px;background:linear-gradient(135deg,#fbfdf9,#f5f8f3)}
.security-panel .section-title{margin-bottom:18px}
.security-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dfe8e1;border-radius:17px;overflow:hidden;background:#fff}
.security-card{padding:26px 28px 28px;text-align:left;min-height:260px}.security-card+.security-card{border-left:1px solid #e2e9e4}
.security-icon{width:72px;height:72px;margin:0 0 18px;border:1px solid #b9d0c0;border-radius:50%;background:#f2f8f2;color:#14543a;display:grid;place-items:center;position:relative;font-weight:800;font-size:24px}
.security-icon b{position:absolute;right:-2px;bottom:3px;width:27px;height:27px;border-radius:50%;background:#327a54;color:#fff;font-size:14px;display:grid;place-items:center}.security-icon.network{font-size:42px;font-weight:400}.security-icon.shield{border-radius:18px 18px 34px 34px;font-size:32px}
.security-card h3{font-family:Georgia,"Times New Roman",serif;color:#174d36;font-size:20px;font-weight:600;margin:0 0 11px}.security-card p{margin:0;color:#53635b;line-height:1.56;font-size:14px}

.audience-section{padding:3px 0 38px;background:#fff}
.audience-section .section-title{font-size:34px;margin-bottom:22px}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.audience-card{border:1px solid #dfe8e1;border-radius:18px;background:#fff;overflow:hidden}
.audience-card img{width:100%;aspect-ratio:16/8.8;display:block;object-fit:cover;object-position:center}.audience-card>div{padding:17px 20px 20px}.audience-card h3{font-family:Georgia,"Times New Roman",serif;color:#174d36;font-size:22px;font-weight:600;margin:0 0 7px}.audience-card p{margin:0;color:#5b6962;line-height:1.48;font-size:13.5px}

.landing-footer{border-top:1px solid #e5ebe6;background:#fbfcfa}
.footer-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;color:#718078;font-size:13px}
.footer-contact{border:0;background:transparent;padding:8px 0;color:#174d36;font-weight:700;cursor:pointer}.footer-contact:hover{text-decoration:underline}

.contact-dialog{border:0;padding:0;background:transparent}.contact-dialog::backdrop{background:rgba(14,35,25,.3);backdrop-filter:blur(2px)}
.contact-dialog-card{width:min(620px,calc(100vw - 32px));background:#fff;border-radius:22px;padding:30px;box-shadow:var(--shadow);position:relative}.contact-dialog-card h3{font-family:Georgia,"Times New Roman",serif;color:#174d36;font-size:31px;font-weight:500;margin:0 40px 12px 0}.contact-dialog-card>p{color:#607168;line-height:1.55;margin:0 0 20px}.contact-pending{font-size:12.5px;color:#78867f;line-height:1.45;text-align:center;margin:0}
.turnstile-slot{min-height:0;display:flex;justify-content:center}.turnstile-slot:not(:empty){margin:2px auto 4px}.turnstile-message{text-align:center;font-size:12.5px;color:#7b8982}

@media(max-width:1180px){
  .workflow-grid{grid-template-columns:repeat(3,1fr)}
  .workflow-card{min-height:250px}
  .landing-view .hero-grid{grid-template-columns:1fr 1fr;gap:28px}.landing-view .hero-copy{padding:44px 0}.hero-photo-v1{min-height:500px}
}
@media(max-width:860px){
  .landing-container{width:min(100% - 36px,720px)}
  .landing-view .hero-grid{grid-template-columns:1fr;gap:0}.hero-photo-v1{min-height:0;height:auto;max-height:500px;order:-1;border-radius:18px;margin-top:18px}.landing-view .hero-copy{padding:35px 0 42px}.landing-view .hero-copy h1{font-size:46px}
  .workflow-grid{grid-template-columns:repeat(2,1fr)}
  .routine-grid{grid-template-columns:1fr}.interview-panel{min-height:480px}
  .security-grid{grid-template-columns:1fr}.security-card+.security-card{border-left:0;border-top:1px solid #e2e9e4}
  .audience-grid{grid-template-columns:1fr}.audience-card{display:grid;grid-template-columns:44% 56%}.audience-card img{height:100%;aspect-ratio:auto}
}
@media(max-width:600px){
  .site-header{padding:0 16px}.brand-monogram-img{width:47px;height:47px}.brand-wordmark{height:27px;max-width:180px}.header-start{padding:10px 17px;min-width:84px}
  .landing-container{width:calc(100% - 28px)}.landing-view .hero-copy h1{font-size:38px}.landing-view .hero-lead{font-size:16px}.hero-photo-v1{margin-top:12px}
  .workflow-grid{grid-template-columns:1fr}.workflow-card{min-height:0;padding:23px 22px}
  .routine-panel{padding:27px 22px}.interview-panel{min-height:430px}.interview-copy{right:14px;bottom:14px;width:calc(100% - 28px);padding:20px}
  .security-panel{padding:27px 14px}.security-card{padding:24px 22px}
  .audience-card{display:block}.audience-card img{aspect-ratio:16/9;height:auto}
  .footer-inner{min-height:78px;align-items:flex-start;justify-content:center;flex-direction:column;gap:5px}
}


/* ============================================================
   MJA VISUAL BASELINE FIDELITY v1
   User-approved visual composition, deterministic implementation.
   Hero V2 and later-approved minimal footer are preserved.
   ============================================================ */
body.landing-active{background:#fffdf9}
.site-header{height:80px;padding:0 clamp(30px,4vw,72px);background:#fffdf9;backdrop-filter:none;border-bottom:1px solid #ece6dc}
.brand{gap:10px}.brand-monogram-img{width:60px;height:60px}.brand-wordmark{height:47px;max-width:260px}.header-start{min-width:118px;padding:11px 25px;border-radius:11px}
.landing-container{width:min(1680px,calc(100% - 80px));margin:0 auto}
.hero-section{background:#fffdf9;border-bottom:1px solid #ece6dc}
.landing-view .hero-grid{grid-template-columns:1fr 1.03fr;gap:0;min-height:0;align-items:stretch}
.landing-view .hero-copy{max-width:none;padding:43px 58px 42px 0}
.landing-view .hero-copy h1{max-width:650px;margin:0 0 18px;font-size:clamp(46px,3.15vw,60px);line-height:1.07;letter-spacing:-.03em;font-weight:500}
.landing-view .hero-lead{max-width:650px;margin:0 0 23px;font-size:15.5px;line-height:1.55}
.hero-photo-v1{width:100%;height:420px;min-height:420px;object-fit:cover;object-position:center 46%}
.hero-actions-baseline{display:flex;align-items:center;gap:38px}.hero-more{color:#21583f;font-size:14px;font-weight:650;text-decoration:none;border-bottom:1px solid #21583f;padding:5px 0 4px}.hero-more:hover{opacity:.78}
.how-section{padding:25px 0 24px;background:#fffdf9}.section-title{margin:0 0 18px;font-size:34px}
.workflow-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.workflow-card{min-height:270px;padding:14px 12px 15px;background:#fffdf9;border:1px solid #e5dccf;border-radius:12px;box-shadow:none}
.workflow-icon{width:58px;height:58px;margin:0 auto 8px;padding:1px;display:block;border:0;border-radius:0;background:transparent;color:#174f37}
.workflow-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.workflow-number{display:none}
.workflow-card h3{margin:0 0 8px;font-size:16.5px;line-height:1.18}.workflow-card p{margin:0;font-size:12.3px;line-height:1.42}.workflow-card p+p{margin-top:6px}
.routine-section{padding:0 0 24px;background:#fffdf9}.routine-grid{grid-template-columns:.84fr 1.16fr;gap:18px}
.routine-panel,.interview-panel{border:1px solid #e4dccf;border-radius:14px}.routine-panel{padding:25px 28px 22px;background:#fbfbf4}
.routine-panel .section-title{margin-bottom:15px;font-size:31px}.check-list{gap:7px}
.check-list li{min-height:34px;padding:7px 10px 7px 31px;border-radius:9px;background:rgba(255,255,255,.64);font-size:13px;line-height:1.42}.check-list li::before{left:4px;top:7px}
.mail-note{margin-top:10px;padding:10px 12px;grid-template-columns:24px 1fr;gap:9px;border:0;border-radius:9px;background:rgba(255,255,255,.64)}
.mail-note-icon{font-size:18px}.mail-note p{font-size:12.4px;line-height:1.42}
.interview-panel{min-height:310px;background:#dfd6cb}.interview-panel>img{object-fit:cover;object-position:center 24%}
.interview-copy{right:20px;bottom:20px;width:285px;padding:18px;border-radius:15px}.interview-copy h2{margin-bottom:8px;font-size:27px;line-height:1.08}.interview-copy p{margin-bottom:14px;font-size:12.7px;line-height:1.45}.interview-copy .button{padding:10px 14px;border-radius:9px;font-size:12px}
.security-section{padding:0 0 22px;background:#fffdf9}.security-panel{padding:0;border:0;border-radius:0;background:transparent}.security-panel .section-title{margin-bottom:5px}.security-panel .section-intro{margin:0 auto 12px;font-size:13px}
.security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;border:0;border-radius:0;overflow:visible;background:transparent}
.security-card{min-height:172px;padding:16px 20px 17px;display:grid;grid-template-columns:80px 1fr;grid-template-rows:auto 1fr;column-gap:15px;border:1px solid #e4dccf!important;border-radius:11px;background:#fffdf9}
.security-icon{grid-row:1/3;width:70px;height:70px;margin:2px 0 0;border:0;border-radius:0;background:transparent;color:#174f37}
.security-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.security-card h3{margin:2px 0 6px;font-size:17.5px}.security-card p{margin:0;font-size:12.3px;line-height:1.42}
.audience-section{padding:0 0 18px;background:#fffdf9}.audience-section .section-title{margin-bottom:11px;font-size:29px}.audience-grid{gap:13px}
.audience-card{border:1px solid #e4dccf;border-radius:10px;background:#fffdf9}.audience-card img{aspect-ratio:16/7.8;object-fit:cover}.audience-card>div{padding:8px 13px 9px}.audience-card h3{margin:0 0 2px;font-size:17px;line-height:1.18}.audience-card p{margin:0;font-size:11.3px;line-height:1.3}
.final-cta-section{padding:0 0 14px;background:#fffdf9}.final-cta-panel{min-height:83px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid #ebe2d7;border-radius:13px;background:linear-gradient(180deg,#fbfaf5,#f8f7f1)}
.final-cta-panel h2{margin:0;font-family:Georgia,"Times New Roman",serif;color:#174d36;font-size:27px;line-height:1.05;font-weight:500}.final-start{min-width:145px;padding:8px 20px;border-radius:8px}
.landing-footer{border-top:0;background:#fffdf9}.footer-inner{min-height:50px;border-top:1px solid #ece5dc;font-size:12px}
@media(max-width:1280px){.landing-container{width:min(1180px,calc(100% - 48px))}.landing-view .hero-copy{padding-right:32px}.hero-photo-v1{height:390px;min-height:390px}.workflow-card{min-height:285px}}
@media(max-width:980px){.workflow-grid{grid-template-columns:repeat(3,1fr)}.routine-grid{grid-template-columns:1fr}.security-grid{grid-template-columns:1fr}.security-card{min-height:0}}


/* ============================================================
   MJA LANDING INTERACTION + RESPONSIVE v2
   ============================================================ */

.site-header{
  height:82px;
  padding:0 clamp(24px,3.1vw,58px);
}
.brand-monogram-img{width:58px;height:58px}
.brand-wordmark{height:45px;max-width:258px}
.header-actions{gap:14px}

.language-switcher{
  position:static;
  left:auto;
  bottom:auto;
  z-index:auto;
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 10px 0 12px;
  border:1px solid #d8dfd8;
  border-radius:12px;
  background:#fffdf9;
  color:#174f37;
  box-shadow:none;
}
.language-globe{
  width:22px;height:22px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.language-switcher select{
  appearance:auto;border:0;outline:0;min-width:58px;
  padding:8px 2px;background:transparent;color:#174f37;
  font-size:15px;font-weight:650;box-shadow:none;cursor:pointer;
}
body.landing-active .language-switcher{display:inline-flex!important}

.landing-container{
  width:min(1800px,calc(100% - clamp(32px,4vw,72px)));
  margin:0 auto;
}

.hero-section{
  min-height:calc(100svh - 82px);
  display:flex;
  align-items:center;
  background:#fffdf9;
}
.landing-view .hero-grid{
  width:min(1800px,calc(100% - clamp(32px,4vw,72px)));
  min-height:min(740px,calc(100svh - 112px));
  grid-template-columns:minmax(480px,.9fr) minmax(620px,1.1fr);
  gap:clamp(28px,3vw,58px);
  align-items:stretch;
}
.landing-view .hero-copy{
  min-height:100%;
  padding:clamp(46px,7vh,84px) 0 30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.landing-view .hero-copy h1{
  max-width:690px;
  font-size:clamp(48px,3.7vw,68px);
  margin-bottom:22px;
}
.landing-view .hero-lead{
  max-width:650px;
  font-size:16px;
  line-height:1.62;
  margin-bottom:0;
}
.hero-actions-baseline{
  margin-top:auto;
  padding-bottom:20px;
  display:flex;
  align-items:center;
  gap:42px;
}
.hero-more{
  appearance:none;
  border:0;
  border-bottom:1px solid #21583f;
  border-radius:0;
  padding:7px 0 5px;
  background:transparent;
  color:#21583f;
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.hero-more:hover{opacity:.76}
.hero-more:focus-visible{outline:2px solid #8ab29b;outline-offset:5px}

.hero-photo-v1{
  align-self:center;
  width:100%;
  height:auto;
  max-height:calc(100svh - 126px);
  aspect-ratio:4/3;
  min-height:0;
  object-fit:cover;
  object-position:center center;
  border-radius:0;
}

/* One clear reveal affordance is better than both a text control and a duplicate arrow. */
.landing-details[hidden]{display:none!important}
.landing-details{
  background:#fffdf9;
  animation:mjaDetailsIn .26s ease-out both;
}
@keyframes mjaDetailsIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
#how-title{scroll-margin-top:96px}

.how-section{padding-top:30px}
.workflow-grid{gap:12px}
.routine-grid{grid-template-columns:.86fr 1.14fr;gap:18px}

/* Keep the exact approved interview asset, but present enough of the composition
   to show the seated/gesturing person and laptop instead of a face-only crop. */
.interview-panel{
  min-height:440px;
  background:#ded3c7;
  overflow:hidden;
}
.interview-panel>img{
  position:absolute;
  inset:0 auto 0 0;
  width:74%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}
.interview-panel::after{
  content:"";
  position:absolute;
  inset:0 0 0 62%;
  background:linear-gradient(90deg,rgba(222,211,199,0),rgba(222,211,199,.88) 32%,#ded3c7 70%);
  pointer-events:none;
}
.interview-copy{
  z-index:2;
  right:20px;
  bottom:20px;
  width:min(300px,34%);
}

.audience-card img{
  width:100%;
  object-fit:cover;
  object-position:center;
}

@media(min-width:1500px){
  .landing-view .hero-grid{
    grid-template-columns:minmax(520px,.88fr) minmax(720px,1.12fr);
  }
  .workflow-card{min-height:258px}
}
@media(max-width:1200px){
  .landing-container,
  .landing-view .hero-grid{width:calc(100% - 40px)}
  .landing-view .hero-grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
    min-height:620px;
  }
  .landing-view .hero-copy h1{font-size:50px}
  .interview-panel>img{width:78%}
}
@media(max-width:980px){
  .hero-section{min-height:0}
  .landing-view .hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
  .landing-view .hero-copy{min-height:0;padding:36px 0 28px}
  .hero-actions-baseline{margin-top:28px;padding-bottom:0}
  .hero-photo-v1{
    max-height:none;aspect-ratio:auto;width:100%;height:auto;object-fit:contain
  }
  .interview-panel{min-height:470px}
  .interview-panel>img{
    width:100%;object-fit:contain;object-position:left center
  }
  .interview-panel::after{
    inset:55% 0 0 0;
    background:linear-gradient(180deg,rgba(222,211,199,0),rgba(222,211,199,.88) 28%,#ded3c7 68%)
  }
  .interview-copy{
    width:calc(100% - 28px);right:14px;bottom:14px
  }
}
@media(max-width:700px){
  .site-header{height:72px;padding:0 16px}
  .brand-monogram-img{width:45px;height:45px}
  .brand-wordmark{height:29px;max-width:170px}
  .language-switcher{min-height:40px;padding:0 7px}
  .language-globe{width:19px;height:19px}
  .language-switcher select{min-width:48px;font-size:13px;padding:6px 0}
  .landing-container,.landing-view .hero-grid{width:calc(100% - 28px)}
  .landing-view .hero-copy h1{font-size:39px}
  .hero-actions-baseline{gap:24px}
}


/* ============================================================
   MJA TYPOGRAPHY + PHOTO FRAMING v3
   Scope: typography, spacing, responsive rhythm, photo framing.
   Copy and approved asset references are intentionally unchanged.
   ============================================================ */

/* ---------- Global readable type rhythm ---------- */
.landing-view{
  color:#31443a;
}
.landing-view p,
.landing-view li,
.landing-view button,
.landing-view select{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.landing-view p{
  letter-spacing:.002em;
}

/* ---------- Hero / first viewport ---------- */
.landing-view .hero-copy h1{
  max-width:720px;
  font-size:clamp(54px,3.9vw,72px);
  line-height:1.06;
  letter-spacing:-.034em;
}
.landing-view .hero-lead{
  max-width:690px;
  font-size:clamp(18px,1.08vw,20px);
  line-height:1.62;
  color:#42554b;
}
.hero-actions-baseline{
  gap:46px;
}
.hero-start{
  min-width:150px;
  min-height:48px;
  font-size:15.5px;
}
.hero-more{
  font-size:15.5px;
  line-height:1.3;
}

/* Keep the full approved Hero composition visible. */
.hero-photo-v1{
  object-fit:contain;
  object-position:center center;
  background:#f4efe6;
}

/* ---------- Clean transition to second screen ---------- */
#howSection{
  scroll-margin-top:0;
}
#how-title{
  scroll-margin-top:0;
}
.how-section{
  padding:42px 0 34px;
}
.how-section .section-title{
  margin-bottom:24px;
  font-size:clamp(34px,2vw,40px);
  line-height:1.12;
}

/* ---------- Six-step workflow: readable at desktop size ---------- */
.workflow-grid{
  gap:14px;
}
.workflow-card{
  min-height:315px;
  padding:19px 16px 20px;
}
.workflow-icon{
  width:62px;
  height:62px;
  margin-bottom:11px;
}
.workflow-card h3{
  margin-bottom:10px;
  font-size:clamp(16.5px,1vw,18px);
  line-height:1.23;
}
.workflow-card p{
  font-size:14px;
  line-height:1.5;
  color:#506159;
}
.workflow-card .workflow-note{
  font-size:13.8px;
  line-height:1.46;
}

/* ---------- Routine block ---------- */
.routine-section{
  padding-bottom:34px;
}
.routine-panel{
  padding:31px 32px 28px;
}
.routine-panel .section-title{
  font-size:clamp(31px,1.8vw,36px);
  line-height:1.15;
  margin-bottom:20px;
}
.check-list{
  gap:10px;
}
.check-list li{
  min-height:42px;
  padding:10px 13px 10px 37px;
  font-size:15px;
  line-height:1.48;
}
.check-list li::before{
  top:9px;
}
.mail-note{
  margin-top:14px;
  padding:14px 15px;
}
.mail-note p{
  font-size:14.3px;
  line-height:1.5;
}

/* ---------- Interview: no head crop, keep full gesture/laptop context ---------- */
.interview-panel{
  min-height:500px;
  display:block;
  background:#ded3c7;
}
.interview-panel>img{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:68%;
  height:100%;
  padding:14px 0 14px 14px;
  object-fit:contain;
  object-position:left center;
  background:#ded3c7;
}
.interview-panel::after{
  inset:0 0 0 58%;
  background:linear-gradient(90deg,rgba(222,211,199,0),rgba(222,211,199,.92) 32%,#ded3c7 66%);
}
.interview-copy{
  right:24px;
  bottom:24px;
  width:min(330px,36%);
  padding:22px 22px 20px;
}
.interview-copy h2{
  font-size:clamp(27px,1.65vw,32px);
  line-height:1.1;
}
.interview-copy p{
  font-size:14.5px;
  line-height:1.52;
}
.interview-copy .button{
  font-size:13.5px;
}

/* ---------- AI / security ---------- */
.security-section{
  padding-bottom:34px;
}
.security-panel .section-title{
  font-size:clamp(32px,1.9vw,38px);
  line-height:1.14;
  margin-bottom:8px;
}
.security-panel .section-intro{
  max-width:920px;
  margin-bottom:18px;
  font-size:14.5px;
  line-height:1.5;
}
.security-grid{
  gap:14px;
}
.security-card{
  min-height:190px;
  padding:22px 23px 22px;
  grid-template-columns:82px 1fr;
  column-gap:18px;
}
.security-card h3{
  font-size:19px;
  line-height:1.22;
  margin-bottom:8px;
}
.security-card p{
  font-size:14.4px;
  line-height:1.52;
}

/* ---------- Career cards: NEVER crop approved photos ---------- */
.audience-section{
  padding-bottom:24px;
}
.audience-section .section-title{
  margin-bottom:18px;
  font-size:clamp(30px,1.8vw,36px);
  line-height:1.15;
}
.audience-grid{
  gap:16px;
  align-items:stretch;
}
.audience-card{
  display:flex;
  flex-direction:column;
}
.audience-card img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:contain;
  object-position:center center;
  background:#f6f1e8;
}
.audience-card>div{
  padding:15px 17px 17px;
}
.audience-card h3{
  font-size:19px;
  line-height:1.22;
  margin-bottom:5px;
}
.audience-card p{
  font-size:14px;
  line-height:1.46;
}

/* ---------- Final CTA / footer ---------- */
.final-cta-panel{
  min-height:105px;
  gap:9px;
}
.final-cta-panel h2{
  font-size:31px;
}
.final-start{
  min-width:160px;
  font-size:15px;
}
.footer-inner{
  min-height:58px;
  font-size:13.5px;
}

/* ---------- Large desktop tuning ---------- */
@media(min-width:1500px){
  .landing-container,
  .landing-view .hero-grid{
    width:min(1840px,calc(100% - 64px));
  }
  .workflow-card{
    min-height:326px;
  }
  .workflow-card p{
    font-size:14.4px;
  }
}

/* ---------- Medium desktop / laptop ---------- */
@media(max-width:1450px){
  .landing-view .hero-copy h1{
    font-size:clamp(50px,4vw,62px);
  }
  .landing-view .hero-lead{
    font-size:17.5px;
  }
  .workflow-card{
    min-height:320px;
    padding-inline:13px;
  }
  .workflow-card h3{
    font-size:16.3px;
  }
  .workflow-card p,
  .workflow-card .workflow-note{
    font-size:13.3px;
  }
  .interview-panel{
    min-height:470px;
  }
}

/* ---------- Tablet / narrow layouts ---------- */
@media(max-width:980px){
  .landing-view .hero-copy h1{
    font-size:clamp(42px,8vw,56px);
  }
  .landing-view .hero-lead{
    font-size:17px;
  }
  .workflow-card{
    min-height:0;
  }
  .workflow-card p,
  .workflow-card .workflow-note{
    font-size:14.5px;
  }
  .interview-panel{
    min-height:560px;
  }
  .interview-panel>img{
    width:100%;
    height:72%;
    padding:12px;
    object-fit:contain;
    object-position:center top;
  }
  .interview-panel::after{
    inset:48% 0 0 0;
    background:linear-gradient(180deg,rgba(222,211,199,0),rgba(222,211,199,.9) 32%,#ded3c7 62%);
  }
  .interview-copy{
    width:calc(100% - 28px);
  }
  .audience-card img{
    aspect-ratio:auto;
    max-height:none;
  }
}

@media(max-width:700px){
  .landing-view .hero-lead{
    font-size:16px;
    line-height:1.58;
  }
  .workflow-card h3{
    font-size:17px;
  }
  .workflow-card p,
  .workflow-card .workflow-note{
    font-size:14px;
  }
  .routine-panel .section-title,
  .security-panel .section-title,
  .audience-section .section-title{
    font-size:29px;
  }
}


/* ============================================================
   MJA PHOTO FRAMING + CLEAN REVEAL v3.2
   Scope ONLY:
   1) second-screen reveal positioning;
   2) approved interview photo framing;
   3) approved career-photo framing.
   No copy or typography changes.
   ============================================================ */

/* When "Узнать больше" opens the lower page, the viewport starts on a clean
   white/cream band belonging to the second screen — never on a leftover Hero strip. */
.landing-details{
  padding-top:22px;
  border-top:1px solid #ece6dc;
  background:#fffdf9;
}
.how-section{
  padding-top:24px;
}

/* Interview image:
   show the WHOLE approved image inside a stable frame.
   background-size:contain guarantees that the head, hands and laptop cannot be cropped. */
.interview-panel{
  min-height:470px;
  background-color:#ded3c7;
  background-image:url('/static/assets/approved/interview-prep-approved.png');
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  overflow:hidden;
}
.interview-panel>img{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  inset:auto!important;
  opacity:0!important;
  pointer-events:none!important;
}
.interview-panel::after{
  inset:0 0 0 60%;
  background:linear-gradient(
    90deg,
    rgba(222,211,199,0) 0%,
    rgba(222,211,199,.86) 30%,
    #ded3c7 70%
  );
}
.interview-copy{
  right:24px;
  bottom:24px;
  width:min(330px,35%);
}

/* Career cards:
   preserve the complete approved photograph within an equal-height frame.
   object-fit:contain means no head, graduation cap or body part is cut off. */
.audience-card img{
  width:100%;
  height:300px;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#f6f1e8;
}

/* Large screens get a little more image breathing room without cropping. */
@media(min-width:1500px){
  .interview-panel{
    min-height:500px;
  }
  .audience-card img{
    height:320px;
  }
}

/* Medium laptops: keep the full photos, just reduce the frame height. */
@media(max-width:1450px){
  .interview-panel{
    min-height:440px;
  }
  .audience-card img{
    height:270px;
  }
}

/* Tablet/mobile: stack safely and keep the entire interview image visible. */
@media(max-width:980px){
  .landing-details{
    padding-top:18px;
  }
  .how-section{
    padding-top:20px;
  }
  .interview-panel{
    min-height:650px;
    background-position:center top;
    background-size:contain;
  }
  .interview-panel::after{
    inset:52% 0 0 0;
    background:linear-gradient(
      180deg,
      rgba(222,211,199,0),
      rgba(222,211,199,.9) 34%,
      #ded3c7 68%
    );
  }
  .interview-copy{
    width:calc(100% - 28px);
    right:14px;
    bottom:14px;
  }
  .audience-card img{
    height:auto;
    max-height:none;
    object-fit:contain!important;
  }
}


/* MJA LANDING I18N V4 — locale layout guards only */
html[lang="de"] .workflow-card h3,
html[lang="pl"] .workflow-card h3{
  overflow-wrap:anywhere;
  hyphens:auto;
}
html[lang="de"] .workflow-card p,
html[lang="pl"] .workflow-card p{
  overflow-wrap:break-word;
  hyphens:auto;
}
html[lang="de"] .landing-view .hero-copy h1{
  font-size:clamp(50px,3.55vw,66px);
}
@media(max-width:1450px){
  html[lang="de"] .workflow-card h3{font-size:15.7px}
  html[lang="de"] .workflow-card p{font-size:13.1px}
}


/* ============================================================
   MJA SCREEN COMPOSITION v5
   Scope:
   - turn revealed landing into coherent visual screens;
   - remove bold emphasis from explanatory workflow notes;
   - make career-card description type match Hero lead size;
   - no copy or approved-image changes.
   ============================================================ */

:root{
  --mja-hero-support-size:clamp(18px,1.08vw,20px);
  --mja-screen-bg:#fffdf9;
  --mja-screen-divider:#ece6dc;
}

/* Natural scrolling only: no scroll-snap. */
html,body{
  scroll-snap-type:none!important;
}

/* Each major revealed block reads as a complete screen.
   min-height, not fixed height, so browser zoom and translations can grow safely. */
.landing-screen{
  position:relative;
  box-sizing:border-box;
  min-height:100svh;
  background:var(--mja-screen-bg);
  border-top:1px solid var(--mja-screen-divider);
}

/* A clean visual breathing band at the top of every revealed screen. */
.landing-screen::before{
  content:"";
  display:block;
  height:clamp(24px,3.2vh,40px);
}

/* ---------------- Screen 2: How it works ---------------- */
.landing-screen-how{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:clamp(34px,5vh,58px);
}
.landing-screen-how::before{
  flex:0 0 auto;
}
.landing-screen-how .landing-container{
  width:min(1800px,calc(100% - clamp(32px,4vw,72px)));
}
.landing-screen-how .section-title{
  margin:0 0 clamp(26px,3.2vh,38px);
}
.landing-screen-how .workflow-grid{
  align-items:stretch;
}
.landing-screen-how .workflow-card{
  min-height:clamp(300px,36vh,350px);
}

/* Explanatory notes should not shout.
   Titles remain bold; body/note copy stays calm and consistent. */
.workflow-card .workflow-note{
  font-weight:400!important;
  color:#506159!important;
}
.workflow-card strong,
.workflow-card b{
  font-weight:600;
}

/* ---------------- Screen 3: Routine + interview ---------------- */
.landing-screen-routine{
  display:flex;
  align-items:center;
  padding:0 0 clamp(34px,5vh,58px);
}
.landing-screen-routine::before{
  position:absolute;
  top:0;left:0;right:0;
}
.landing-screen-routine .routine-grid{
  width:100%;
  align-items:stretch;
}
.landing-screen-routine .routine-panel,
.landing-screen-routine .interview-panel{
  min-height:clamp(470px,61vh,610px);
}

/* Keep approved interview image fully visible.
   It remains the exact same asset; only its fitted presentation is controlled. */
.landing-screen-routine .interview-panel{
  background-color:#ded3c7;
  background-image:url('/static/assets/approved/interview-prep-approved.png');
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}
.landing-screen-routine .interview-panel>img{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
.landing-screen-routine .interview-panel::after{
  inset:0 0 0 60%;
  background:linear-gradient(
    90deg,
    rgba(222,211,199,0) 0%,
    rgba(222,211,199,.86) 30%,
    #ded3c7 70%
  );
}

/* ---------------- Screen 4: AI + career + CTA + footer ---------------- */
.landing-screen-final{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:0;
}
.landing-screen-final .security-section{
  padding:0 0 clamp(22px,2.6vh,30px);
}
.landing-screen-final .audience-section{
  padding:0 0 clamp(18px,2.2vh,26px);
}
.landing-screen-final .final-cta-section{
  padding:0 0 14px;
}

/* Career card explanatory text = exact same type scale as Hero support copy. */
.landing-view .hero-lead,
.landing-screen-final .audience-card p{
  font-size:var(--mja-hero-support-size)!important;
  line-height:1.56;
}

/* Cards may grow with translations; photos themselves must never be cropped. */
.landing-screen-final .audience-grid{
  align-items:stretch;
}
.landing-screen-final .audience-card img{
  width:100%;
  height:clamp(220px,27vh,300px);
  object-fit:contain!important;
  object-position:center center!important;
  background:#f6f1e8;
}
.landing-screen-final .audience-card>div{
  padding:14px 17px 16px;
}
.landing-screen-final .audience-card h3{
  margin-bottom:7px;
}

/* Keep the last screen compact enough to read as one composition on a
   typical desktop viewport without shrinking the body text. */
@media(min-width:1200px){
  .landing-screen-final .security-card{
    min-height:165px;
    padding-top:18px;
    padding-bottom:18px;
  }
  .landing-screen-final .security-panel .section-title{
    margin-bottom:6px;
  }
  .landing-screen-final .security-panel .section-intro{
    margin-bottom:14px;
  }
  .landing-screen-final .audience-section .section-title{
    margin-bottom:14px;
  }
  .landing-screen-final .final-cta-panel{
    min-height:92px;
  }
}

/* German and Polish can be longer; screens expand instead of clipping. */
html[lang="de"] .landing-screen,
html[lang="pl"] .landing-screen{
  height:auto;
}

/* Laptop widths: maintain coherent screens, but never force clipping. */
@media(max-width:1450px){
  .landing-screen-how .workflow-card{
    min-height:310px;
  }
  .landing-screen-routine .routine-panel,
  .landing-screen-routine .interview-panel{
    min-height:520px;
  }
  .landing-screen-final .audience-card img{
    height:240px;
  }
}

/* Tablet/mobile naturally becomes stacked content rather than fake full screens. */
@media(max-width:980px){
  .landing-screen{
    min-height:0;
  }
  .landing-screen::before{
    height:20px;
  }
  .landing-screen-how,
  .landing-screen-routine,
  .landing-screen-final{
    display:block;
    padding-bottom:28px;
  }
  .landing-screen-routine .routine-panel,
  .landing-screen-routine .interview-panel{
    min-height:0;
  }
  .landing-screen-routine .interview-panel{
    min-height:650px;
    background-position:center top;
  }
  .landing-screen-final .audience-card p{
    font-size:17px!important;
  }
  .landing-screen-final .audience-card img{
    height:auto;
  }
}


/* ============================================================
   MJA FIVE-SCREEN REFINEMENT v6
   Final agreed landing composition:
   1 Hero
   2 How it works
   3 Routine + Interview
   4 AI + Data Security
   5 Career scenarios + CTA + Footer
   ============================================================ */

:root{
  --mja-screen-bg:#fffdf9;
  --mja-green:#0f4f38;
  --mja-green-soft:#789a55;
  --mja-cream:#f7f3eb;
  --mja-line:#e7dfd3;
  --mja-text:#42554b;
}

/* Soft best-practice-like section guidance: natural scrolling remains intact.
   No mandatory snap; only proximity on desktop. */
@media(min-width:981px){
  html{
    scroll-snap-type:y proximity!important;
    scroll-behavior:smooth;
  }
  .hero-section,
  .landing-screen{
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }
}

/* Every major section is a coherent visual screen on desktop. */
@media(min-width:981px){
  .landing-screen{
    min-height:100svh!important;
    border-top:1px solid var(--mja-line);
    background:var(--mja-screen-bg);
    box-sizing:border-box;
  }
}

/* Screen 2 remains the clean approved six-step composition. */
.landing-screen-how{
  justify-content:center;
}

/* Clear handshake icon: same line weight and green as the other workflow icons. */
.workflow-icon-handshake svg{
  stroke-width:2.25;
}

/* Screen 3: more generous, balanced two-column composition. */
.landing-screen-routine{
  min-height:100svh;
  display:flex;
  align-items:center;
}
.landing-screen-routine .routine-grid{
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(24px,2.5vw,44px);
  align-items:stretch;
}
.landing-screen-routine .routine-panel,
.landing-screen-routine .interview-panel{
  min-height:clamp(560px,70vh,700px)!important;
}
.landing-screen-routine .routine-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(36px,4vw,58px);
}
.landing-screen-routine .check-list{
  margin-bottom:22px;
}
.landing-screen-routine .interview-panel{
  background-color:#ded3c7;
  background-image:url('/static/assets/approved/interview-prep-approved.png');
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}
.landing-screen-routine .interview-copy{
  width:min(350px,36%);
  right:26px;
  bottom:26px;
}

/* ---------------- Screen 4: AI + security only ---------------- */
.landing-screen-security{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(38px,5vh,64px) 0;
}
.landing-screen-security::before{
  display:none!important;
}
.landing-screen-security .security-section{
  width:100%;
  padding:0!important;
}
.landing-screen-security .security-panel{
  padding:0;
}
.landing-screen-security .section-title{
  font-size:clamp(44px,3.4vw,60px);
  line-height:1.08;
  margin:0 0 16px;
}
.landing-screen-security .section-intro{
  max-width:900px;
  margin:0 auto clamp(34px,4vh,50px);
  text-align:center;
  font-size:clamp(18px,1.1vw,20px);
  line-height:1.55;
}
.security-divider{
  width:min(980px,72%);
  margin:0 auto 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:26px;
}
.security-divider-line{
  height:1px;
  background:#cbd6a8;
  position:relative;
}
.security-divider-line:first-child::before,
.security-divider-line:last-child::after{
  content:"";
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  background:#cbd6a8;
  top:50%;transform:translateY(-50%);
}
.security-divider-line:first-child::before{left:0}
.security-divider-line:last-child::after{right:0}
.security-divider-badge{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:#f3f3df;
  color:var(--mja-green);
}
.security-divider-badge svg{
  width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.landing-screen-security .security-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2vw,32px);
}
.landing-screen-security .security-card{
  min-height:clamp(430px,49vh,520px);
  padding:clamp(28px,3vw,42px) clamp(24px,2.4vw,36px) 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border:1px solid #e5ded2!important;
  border-radius:28px;
  background:#fff;
  box-shadow:0 14px 36px rgba(52,70,58,.045);
}
.landing-screen-security .security-card+.security-card{
  border-left:1px solid #e5ded2!important;
}
.landing-screen-security .security-icon{
  width:clamp(122px,9vw,150px);
  height:clamp(122px,9vw,150px);
  margin:0 auto 4px;
  color:var(--mja-green);
}
.landing-screen-security .security-icon svg{
  width:100%;height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.security-dash-ring{
  stroke:#8da968!important;
  stroke-dasharray:4 5;
  stroke-width:1.8!important;
}
.security-lock-fill{
  fill:#8da968!important;
  stroke:#8da968!important;
}
.security-lock-line{
  stroke:#8da968!important;
}
.security-lock-key{
  fill:#fff!important;
  stroke:none!important;
}
.security-lock-halo{
  fill:#eef1d7!important;
  stroke:#d5dda9!important;
}
.security-accent-arrow{
  stroke:#8da968!important;
  stroke-width:2.2!important;
}
.security-shield-fill{
  fill:#f1f3dc!important;
  stroke:none!important;
}
.security-step{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  margin:0 0 20px;
  color:#d1d9b3;
}
.security-step::before,
.security-step::after{
  content:"";
  height:1px;
  background:#d1d9b3;
}
.security-step span{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:#eef0d7;
  color:#1d4e38;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
}
.landing-screen-security .security-card h3{
  margin:0 0 14px;
  font-size:clamp(23px,1.55vw,28px);
  line-height:1.2;
}
.landing-screen-security .security-card p{
  max-width:400px;
  margin:0 auto;
  font-size:clamp(16px,1vw,18px);
  line-height:1.56;
  color:#53635b;
}

/* ---------------- Screen 5: career + CTA + footer ---------------- */
.landing-screen-career{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(34px,4vh,52px) 0 0;
}
.landing-screen-career::before{
  display:none!important;
}
.landing-screen-career .audience-section{
  padding:0 0 clamp(22px,2.8vh,30px);
}
.landing-screen-career .audience-section .section-title{
  max-width:1300px;
  margin:0 auto clamp(28px,3vh,38px);
  font-size:clamp(38px,2.7vw,50px);
  line-height:1.15;
}
.landing-screen-career .audience-grid{
  gap:clamp(18px,1.8vw,28px);
}
.landing-screen-career .audience-card{
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(52,70,58,.035);
}
.landing-screen-career .audience-card img{
  width:100%;
  height:clamp(260px,31vh,340px);
  object-fit:contain!important;
  object-position:center center!important;
  background:#f6f1e8;
}
.landing-screen-career .audience-card>div{
  padding:18px 22px 22px;
}
.landing-screen-career .audience-card h3{
  font-size:clamp(22px,1.45vw,27px);
  line-height:1.2;
  margin-bottom:8px;
}
.landing-screen-career .audience-card p{
  /* exact landing support scale */
  font-size:var(--mja-hero-support-size)!important;
  line-height:1.56;
  color:#53635b;
}
.landing-screen-career .final-cta-section{
  padding:0 0 16px;
}
.landing-screen-career .final-cta-panel{
  min-height:102px;
  border-radius:20px;
}
.landing-screen-career .final-cta-panel h2{
  font-size:clamp(30px,2vw,36px);
}

/* Footer: quiet secondary contact action, not a competing CTA. */
.landing-screen-career .landing-footer{
  margin-top:auto;
  border-top:0;
}
.landing-screen-career .footer-inner{
  min-height:68px;
  border-top:1px solid #e8e0d5;
  font-size:14px;
}
.footer-contact{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:8px 10px!important;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#315b49;
  font-size:14.5px;
  font-weight:500!important;
  line-height:1;
  text-decoration:none!important;
  transition:background .16s ease,color .16s ease;
}
.footer-contact svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.footer-contact:hover{
  background:#f0f4ee;
  color:#174f37;
  text-decoration:none!important;
}
.footer-contact:focus-visible{
  outline:2px solid #8ab29b;
  outline-offset:2px;
}

/* Long localized text should grow screens, never clip content. */
html[lang="de"] .landing-screen-security,
html[lang="pl"] .landing-screen-security,
html[lang="de"] .landing-screen-career,
html[lang="pl"] .landing-screen-career{
  height:auto;
  min-height:100svh;
}

/* Tablet/mobile: no forced screen behavior, no crop, stacked layout. */
@media(max-width:980px){
  html{scroll-snap-type:none!important}
  .landing-screen-routine,
  .landing-screen-security,
  .landing-screen-career{
    min-height:0!important;
    display:block;
    padding:28px 0;
  }
  .landing-screen-routine .routine-grid{
    grid-template-columns:1fr;
  }
  .landing-screen-routine .routine-panel{
    min-height:0!important;
  }
  .landing-screen-routine .interview-panel{
    min-height:650px!important;
  }
  .landing-screen-security .security-grid{
    grid-template-columns:1fr;
  }
  .landing-screen-security .security-card{
    min-height:0;
  }
  .security-divider{
    width:88%;
  }
  .landing-screen-career .audience-card img{
    height:auto;
  }
  .footer-inner{
    align-items:flex-start;
  }
}


/* ============================================================
   MJA FIDELITY FIXES v6.1
   User-requested corrections only:
   - screen 2/3 body typography uses Hero support scale;
   - clear standard handshake icon;
   - interview approved photo displayed fully, never background-cropped;
   - exact AI/security icons from agreed reference;
   - no AI/security numbering.
   ============================================================ */

/* ---------- Screen 2 typography = first-screen typography system ---------- */
.landing-screen-how .section-title{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
}
.landing-screen-how .workflow-card h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(20px,1.25vw,23px);
  line-height:1.22;
  font-weight:600;
}
.landing-screen-how .workflow-card p,
.landing-screen-how .workflow-card .workflow-note{
  font-size:var(--mja-hero-support-size)!important;
  line-height:1.56!important;
  font-weight:400!important;
  color:#45564e!important;
}

/* Give the larger readable type enough room without clipping localized text. */
@media(min-width:981px){
  .landing-screen-how .workflow-card{
    min-height:clamp(365px,43vh,430px)!important;
    padding:22px 16px 24px;
  }
}

/* Standard handshake SVG: instantly recognizable, no abstract custom geometry. */
.workflow-icon-handshake{
  display:grid!important;
  place-items:center;
}
.workflow-icon-handshake img{
  display:block;
  width:54px;
  height:44px;
  object-fit:contain;
}

/* ---------- Screen 3 typography = first-screen typography system ---------- */
.landing-screen-routine .routine-panel .section-title,
.landing-screen-routine .interview-copy h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
}
.landing-screen-routine .routine-panel .section-title{
  font-size:clamp(40px,2.8vw,50px)!important;
  line-height:1.14;
}
.landing-screen-routine .check-list li,
.landing-screen-routine .mail-note p,
.landing-screen-routine .interview-copy p{
  font-size:var(--mja-hero-support-size)!important;
  line-height:1.56!important;
  color:#45564e;
}
.landing-screen-routine .interview-copy h2{
  font-size:clamp(34px,2.3vw,43px)!important;
  line-height:1.12;
}

/* Deterministic, no-crop interview composition.
   The exact approved <img> is rendered, rather than painted as a CSS background. */
.landing-screen-routine .interview-panel{
  position:relative;
  min-height:clamp(620px,73vh,720px)!important;
  background:#ded3c7!important;
  background-image:none!important;
  overflow:hidden;
}
.landing-screen-routine .interview-panel>img{
  position:absolute!important;
  inset:16px auto 16px 16px!important;
  width:68%!important;
  height:calc(100% - 32px)!important;
  padding:0!important;
  opacity:1!important;
  display:block!important;
  pointer-events:none;
  object-fit:contain!important;
  object-position:center center!important;
  background:#fffdf9;
  border-radius:18px;
}
.landing-screen-routine .interview-panel::after{
  display:none!important;
}
.landing-screen-routine .interview-copy{
  z-index:2;
  width:29%!important;
  right:22px!important;
  bottom:auto!important;
  top:50%!important;
  transform:translateY(-50%);
  padding:26px 24px!important;
}

/* ---------- Screen 4: exact approved-reference icons, no 1/2/3 ---------- */
.landing-screen-security .security-icon{
  width:clamp(140px,10vw,170px)!important;
  height:clamp(125px,9vw,155px)!important;
  margin:0 auto 24px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.landing-screen-security .security-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.landing-screen-security .security-step{
  display:none!important;
}
.landing-screen-security .security-card h3{
  margin-top:0!important;
}

/* No change to screen 5. */

@media(max-width:980px){
  .landing-screen-how .workflow-card p,
  .landing-screen-how .workflow-card .workflow-note,
  .landing-screen-routine .check-list li,
  .landing-screen-routine .mail-note p,
  .landing-screen-routine .interview-copy p{
    font-size:17px!important;
  }
  .landing-screen-routine .interview-panel{
    min-height:760px!important;
  }
  .landing-screen-routine .interview-panel>img{
    inset:14px 14px auto 14px!important;
    width:calc(100% - 28px)!important;
    height:62%!important;
  }
  .landing-screen-routine .interview-copy{
    width:calc(100% - 28px)!important;
    right:14px!important;
    top:auto!important;
    bottom:14px!important;
    transform:none!important;
  }
}


/* ============================================================
   MJA AGREED SCREENS v6.2
   Screen 2 and Screen 4 are locked to the agreed mockup direction.
   Screen 3 interview CTA is intentionally left for the next choice.
   ============================================================ */

/* ---------------- Screen 2: "Як це працює" agreed edition ---------------- */
.landing-screen-how{
  padding:clamp(36px,4.5vh,58px) 0!important;
  justify-content:center!important;
}
.landing-screen-how::before{display:none!important}

.how-divider{
  width:min(1040px,72%);
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:26px;
}
.how-divider-line{
  height:1px;
  background:#cbd6a8;
  position:relative;
}
.how-divider-line:first-child::before,
.how-divider-line:last-child::after{
  content:"";
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  background:#cbd6a8;
  top:50%;transform:translateY(-50%);
}
.how-divider-line:first-child::before{left:0}
.how-divider-line:last-child::after{right:0}
.how-divider-badge{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:#f3f3df;
  color:#0f4f38;
}
.how-divider-badge svg{
  width:30px;height:30px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

.landing-screen-how .section-title{
  margin:0 0 clamp(30px,3.4vh,42px)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(46px,3.15vw,58px)!important;
  line-height:1.08!important;
  font-weight:500!important;
  letter-spacing:-.018em;
}

.landing-screen-how .workflow-grid{
  gap:clamp(12px,1vw,16px)!important;
  align-items:stretch!important;
}

.landing-screen-how .workflow-card{
  min-height:clamp(500px,58vh,610px)!important;
  padding:clamp(28px,3vh,36px) 18px 30px!important;
  border:1px solid #e6ddd0!important;
  border-radius:18px!important;
  background:#fffdf9!important;
  box-shadow:none!important;
  text-align:center!important;
}

.landing-screen-how .workflow-icon{
  width:86px!important;
  height:78px!important;
  margin:0 auto 20px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  background:transparent!important;
}
.landing-screen-how .workflow-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.landing-screen-how .workflow-card h3{
  margin:0 auto 20px!important;
  max-width:230px;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(18px,1.12vw,21px)!important;
  line-height:1.27!important;
  font-weight:600!important;
  color:#0f4f38!important;
}

.landing-screen-how .workflow-card p,
.landing-screen-how .workflow-card .workflow-note{
  max-width:230px;
  margin-left:auto!important;
  margin-right:auto!important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(16px,.92vw,18px)!important;
  line-height:1.58!important;
  font-weight:400!important;
  color:#4c5b54!important;
}

/* ---------------- Screen 4: AI/security agreed edition ---------------- */
.landing-screen-security{
  padding:clamp(36px,4.4vh,56px) 0!important;
  align-items:center!important;
}

.landing-screen-security .security-section{
  padding:0!important;
}
.landing-screen-security .security-divider{
  margin-bottom:18px!important;
}
.landing-screen-security .section-title{
  margin:0 0 18px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(48px,3.35vw,60px)!important;
  line-height:1.06!important;
  font-weight:500!important;
  letter-spacing:-.018em;
}
.landing-screen-security .section-intro{
  max-width:980px!important;
  margin:0 auto clamp(38px,4.5vh,52px)!important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(18px,1.08vw,20px)!important;
  line-height:1.5!important;
  font-weight:400!important;
  color:#4c5b54!important;
}

.landing-screen-security .security-grid{
  gap:clamp(22px,2vw,30px)!important;
}
.landing-screen-security .security-card{
  min-height:clamp(500px,58vh,590px)!important;
  padding:clamp(34px,3.8vh,46px) 34px 40px!important;
  border:1px solid #e5ddd1!important;
  border-radius:26px!important;
  background:#fff!important;
  box-shadow:0 12px 32px rgba(42,61,49,.035)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
}
.landing-screen-security .security-card+.security-card{
  border-left:1px solid #e5ddd1!important;
}
.landing-screen-security .security-icon{
  width:clamp(175px,11.5vw,205px)!important;
  height:clamp(155px,10vw,185px)!important;
  margin:0 auto 26px!important;
  display:grid!important;
  place-items:center!important;
}
.landing-screen-security .security-icon img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
.landing-screen-security .security-card h3{
  margin:0 0 18px!important;
  min-height:34px;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(22px,1.45vw,26px)!important;
  line-height:1.24!important;
  font-weight:600!important;
  color:#0f4f38!important;
}
.landing-screen-security .security-card p{
  width:100%;
  max-width:390px!important;
  margin:0 auto!important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(17px,1vw,19px)!important;
  line-height:1.58!important;
  font-weight:400!important;
  color:#4c5b54!important;
}

/* Screen 3 and Screen 5 intentionally not redesigned in v6.2. */

@media(max-width:1450px){
  .landing-screen-how .workflow-card{
    min-height:520px!important;
  }
  .landing-screen-how .workflow-card h3{
    font-size:18px!important;
  }
  .landing-screen-how .workflow-card p,
  .landing-screen-how .workflow-card .workflow-note{
    font-size:16px!important;
  }
  .landing-screen-security .security-card{
    min-height:510px!important;
  }
}

@media(max-width:980px){
  .how-divider{width:88%}
  .landing-screen-how .workflow-card{
    min-height:0!important;
  }
  .landing-screen-security .security-card{
    min-height:0!important;
  }
}


/* ============================================================
   MJA UNIFIED AGREED LANDING v6.3
   Screen 3 option 2:
   clean approved interview photo + horizontal appointment panel.
   Screens 1, 2, 4 and 5 remain as previously agreed.
   ============================================================ */

/* Keep the left "routine" side calm and aligned with Hero typography. */
.landing-screen-routine .routine-panel .section-title{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(40px,2.8vw,50px)!important;
  line-height:1.14!important;
  font-weight:500!important;
}
.landing-screen-routine .check-list li,
.landing-screen-routine .mail-note p{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:var(--mja-hero-support-size)!important;
  line-height:1.56!important;
  color:#45564e!important;
}

/* Right side: NO overlay, NO frame-inside-frame.
   One clean photo, then one horizontal action strip. */
.landing-screen-routine .interview-panel-horizontal{
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.landing-screen-routine .interview-photo-wrap{
  width:100%;
  min-height:0;
  border-radius:22px;
  overflow:hidden;
  background:#f5efe7;
}

.landing-screen-routine .interview-photo-wrap>img{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:clamp(400px,51vh,520px)!important;
  padding:0!important;
  opacity:1!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#f5efe7!important;
  border-radius:0!important;
  pointer-events:none;
}

.landing-screen-routine .interview-panel-horizontal::after{
  display:none!important;
}

.landing-screen-routine .interview-action-bar{
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  border:1px solid #e4ddd2;
  border-radius:18px;
  background:#fffdf9;
  box-shadow:0 8px 24px rgba(52,70,58,.035);
  box-sizing:border-box;
}

.landing-screen-routine .interview-action-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef3ea;
  flex:0 0 auto;
}

.landing-screen-routine .interview-action-icon img{
  width:27px;
  height:27px;
  object-fit:contain;
  display:block;
}

.landing-screen-routine .interview-action-copy{
  min-width:0;
}

.landing-screen-routine .interview-action-copy h2{
  margin:0 0 4px;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(24px,1.55vw,29px)!important;
  line-height:1.16!important;
  font-weight:500!important;
  color:#0f4f38!important;
}

.landing-screen-routine .interview-action-copy p{
  margin:0;
  max-width:620px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(15px,.95vw,17px)!important;
  line-height:1.46!important;
  color:#526259!important;
}

.landing-screen-routine .interview-action-button{
  min-width:190px;
  min-height:46px;
  padding:11px 18px!important;
  border:1px solid #b8d0c2!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#0f4f38!important;
  font-size:14px!important;
  font-weight:600!important;
  white-space:nowrap;
}
.landing-screen-routine .interview-action-button:hover{
  background:#f0f5f1!important;
}

/* Balance the full third screen without forcing crop or excessive vertical blank space. */
@media(min-width:981px){
  .landing-screen-routine{
    min-height:100svh!important;
    display:flex!important;
    align-items:center!important;
    padding:clamp(34px,4vh,52px) 0!important;
  }
  .landing-screen-routine::before{display:none!important}
  .landing-screen-routine .routine-grid{
    grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)!important;
    gap:clamp(24px,2.5vw,42px)!important;
    align-items:stretch!important;
  }
  .landing-screen-routine .routine-panel{
    min-height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:clamp(36px,4vw,54px)!important;
  }
}

@media(max-width:980px){
  .landing-screen-routine .interview-action-bar{
    grid-template-columns:auto 1fr;
  }
  .landing-screen-routine .interview-action-button{
    grid-column:1 / -1;
    width:100%;
  }
  .landing-screen-routine .interview-photo-wrap>img{
    height:auto!important;
  }
}


/* ============================================================
   MJA LANDING UNIFIED BACKGROUND v6.3.2
   Locked visual principle:
   all five public landing screens share one base canvas #FFFDF9.
   Content cards remain distinct surfaces; page-to-page tint changes are removed.
   ============================================================ */

:root{
  --mja-landing-base:#fffdf9;
}

/* One uninterrupted landing canvas. */
.landing-view,
.landing-active .landing-view,
.landing-active #landingView{
  background:var(--mja-landing-base)!important;
}

/* All five screen shells use the same exact background. */
.hero-section,
.landing-screen,
.landing-screen-how,
.landing-screen-routine,
.landing-screen-security,
.landing-screen-career{
  background:var(--mja-landing-base)!important;
  background-image:none!important;
}

/* Nested full-width sections must not paint a second page tint. */
.how-section,
.routine-section,
.security-section,
.audience-section,
.final-cta-section{
  background:transparent!important;
}

/* Screen 3: remove the beige field around the approved interview image.
   The image itself stays unchanged and no-crop. */
.landing-screen-routine .interview-panel-horizontal,
.landing-screen-routine .interview-photo-wrap,
.landing-screen-routine .interview-photo-wrap>img{
  background:transparent!important;
  background-image:none!important;
}

/* Keep content surfaces readable without creating a different page background. */
.landing-screen-routine .routine-panel{
  background:#fff!important;
}
.landing-screen-routine .interview-action-bar{
  background:#fff!important;
}
.landing-screen-security .security-card,
.landing-screen-career .audience-card{
  background:#fff!important;
}

/* Footer belongs to the same final-screen canvas. */
.landing-screen-career .landing-footer,
.landing-footer{
  background:transparent!important;
}


/* ============================================================
   MJA SIMPLIFIED PUBLIC LANDING v7
   Hero -> How it works -> compact trust -> Career scenarios + CTA.
   ============================================================ */

:root{
  --mja-landing-base:#fffdf9;
}

.hero-section,
.landing-screen,
.landing-trust-strip{
  background:var(--mja-landing-base)!important;
}

/* Security remains visible as one reassurance, not a dedicated screen. */
.landing-trust-strip{
  padding:26px 0 34px;
  border-top:1px solid #ebe3d8;
  border-bottom:1px solid #ebe3d8;
  scroll-snap-align:none;
}
.landing-trust-inner{
  min-height:118px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:24px;
  padding:20px 30px;
  border:1px solid #e6ddd1;
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 26px rgba(52,70,58,.035);
}
.landing-trust-icon{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
}
.landing-trust-icon img{
  width:86px;
  height:86px;
  object-fit:contain;
  display:block;
}
.landing-trust-copy h2{
  margin:0 0 7px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(25px,1.65vw,31px);
  line-height:1.16;
  font-weight:500;
  color:#0f4f38;
}
.landing-trust-copy p{
  margin:0;
  max-width:960px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,1vw,18px);
  line-height:1.55;
  font-weight:400;
  color:#4c5b54;
}

.landing-screen-career{
  border-top:0!important;
}

/* Defensive guard against stale old public markup. */
.landing-details > .routine-section,
.landing-details > .landing-screen-security{
  display:none!important;
}

@media(max-width:980px){
  .landing-trust-strip{
    padding:20px 0 26px;
  }
  .landing-trust-inner{
    grid-template-columns:1fr;
    text-align:center;
    gap:10px;
    padding:22px 20px;
  }
  .landing-trust-icon{
    margin:0 auto;
    width:78px;
    height:78px;
  }
  .landing-trust-icon img{
    width:72px;
    height:72px;
  }
}


/* ============================================================
   MJA THREE-SCREEN LANDING v7.1
   Screen 1: unchanged Hero
   Screen 2: How it works + integrated trust message
   Screen 3: unchanged Career scenarios / CTA / footer
   ============================================================ */

/* Screen 2: remove the old decorative divider entirely. */
.landing-screen-how .how-divider{
  display:none!important;
}

/* Removing the divider creates space above; the taller combined screen content
   naturally shifts the How block slightly upward while keeping one coherent viewport. */
.landing-screen-how{
  padding:clamp(22px,2.8vh,34px) 0 clamp(18px,2.4vh,30px)!important;
  justify-content:center!important;
}
.landing-screen-how .section-title{
  margin:0 0 clamp(22px,2.6vh,30px)!important;
}

/* Trust belongs to Screen 2, directly below the six workflow cards. */
.landing-screen-how .landing-trust-strip{
  width:100%;
  margin:clamp(18px,2.2vh,26px) 0 0;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  scroll-snap-align:none!important;
}
.landing-screen-how .landing-trust-inner{
  min-height:94px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:20px!important;
  padding:12px 22px!important;
  border:1px solid #e6ddd1!important;
  border-radius:18px!important;
  background:var(--mja-landing-base)!important;
  box-shadow:none!important;
}
.landing-screen-how .landing-trust-icon{
  width:70px!important;
  height:70px!important;
}
.landing-screen-how .landing-trust-icon img{
  width:66px!important;
  height:66px!important;
  object-fit:contain!important;
}
.landing-screen-how .landing-trust-copy h2{
  margin:0 0 5px!important;
  font-size:clamp(24px,1.5vw,29px)!important;
}
.landing-screen-how .landing-trust-copy p{
  margin:0!important;
  font-size:clamp(15px,.95vw,17px)!important;
  line-height:1.5!important;
}

/* Explicitly preserve the agreed handshake/hands icon in step 6. */
.landing-screen-how .workflow-card:nth-child(6) .workflow-icon img{
  object-fit:contain!important;
}

/* Screen 3 is intentionally not restyled in v7.1. */

@media(max-width:980px){
  .landing-screen-how{
    padding:24px 0 30px!important;
  }
  .landing-screen-how .landing-trust-strip{
    margin-top:20px!important;
  }
  .landing-screen-how .landing-trust-inner{
    grid-template-columns:1fr!important;
    text-align:center!important;
    gap:8px!important;
    padding:16px 18px!important;
  }
  .landing-screen-how .landing-trust-icon{
    margin:0 auto!important;
    width:62px!important;
    height:62px!important;
  }
  .landing-screen-how .landing-trust-icon img{
    width:58px!important;
    height:58px!important;
  }
}


/* ============================================================
   MJA ONBOARDING OTP UX / ERROR CONTRACT v1.0
   Scope: onboarding/auth only. Public landing remains frozen.
   ============================================================ */

.onboarding-view .otp-send-button.is-sending,
.onboarding-view .resend-link.is-sending{
  opacity:.56;
  cursor:wait;
  transform:none!important;
  box-shadow:none!important;
}

.onboarding-view .otp-sent-lead{margin-bottom:6px}

.onboarding-view .otp-lifetime{
  margin:-2px auto 20px;
  color:#6f7f77;
  font-size:14px;
  line-height:1.45;
  text-align:center;
}

.onboarding-view .otp-form{gap:16px}

/* One actual input, six visual positions, one common outer block. */
.onboarding-view .otp-single-group{
  position:relative;
  width:min(100%,390px);
  height:68px;
  margin:0 auto;
  display:block;
  overflow:hidden;
  border:1px solid #cfded5;
  border-radius:16px;
  background:#fff;
  transition:border-color .16s,box-shadow .16s,opacity .16s;
  cursor:text;
}

.onboarding-view .otp-single-group:focus-within{
  border-color:#75a68a;
  box-shadow:0 0 0 4px rgba(21,117,82,.08);
}

.onboarding-view .otp-single-group.is-disabled{
  opacity:.52;
  cursor:not-allowed;
}

.onboarding-view .otp-single-input{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  color:transparent!important;
  caret-color:transparent!important;
  box-shadow:none!important;
  opacity:.01;
  font-size:16px!important;
  cursor:text;
}

.onboarding-view .otp-single-input:disabled{cursor:not-allowed}

.onboarding-view .otp-positions{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  pointer-events:none;
}

.onboarding-view .otp-position{
  display:grid;
  place-items:center;
  color:#163f30;
  font-size:29px;
  line-height:1;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.onboarding-view .otp-position + .otp-position{border-left:1px solid #e3e9e5}
.onboarding-view .otp-single-group:focus-within .otp-position.active{background:#f5faf7}

.onboarding-view .resend-link{min-height:24px}

.onboarding-view .resend-link:disabled{
  color:#819087;
  cursor:default;
  opacity:1;
}

/* Created dynamically only if the backend actually returns a development debug object. */
.onboarding-view .otp-test-diagnostic{
  max-width:620px;
  margin:-8px auto 18px;
  padding:12px 14px;
  border:1px dashed #c8b47a;
  border-radius:12px;
  background:#fffaf0;
  color:#564d32;
  text-align:left;
  font-size:12.5px;
  line-height:1.5;
}

.onboarding-view .otp-test-diagnostic strong{
  display:block;
  margin-bottom:5px;
  letter-spacing:.04em;
  font-size:11.5px;
}

.onboarding-view .otp-test-diagnostic dl{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:3px 10px;
  margin:0;
}

.onboarding-view .otp-test-diagnostic dt{font-weight:650}

.onboarding-view .otp-test-diagnostic dd{
  margin:0;
  overflow-wrap:anywhere;
}

@media(max-width:560px){
  .onboarding-view .otp-single-group{
    width:min(100%,342px);
    height:62px;
  }
  .onboarding-view .otp-position{font-size:26px}
}


/* ============================================================
   MJA OTP LOCK NAVIGATION UX FIX v1.1
   Scope: onboarding/auth only. Landing remains frozen.
   ============================================================ */

.onboarding-view .email-step.otp-session-locked .input-with-icon{
  opacity:.56;
}

.onboarding-view .email-step.otp-session-locked #emailInput{
  cursor:not-allowed;
}

.onboarding-view .email-step.otp-session-locked #emailSubmit{
  opacity:.52;
  cursor:not-allowed;
  box-shadow:none!important;
  transform:none!important;
}


/* ============================================================
   MJA OTP SESSION LIMIT UX v1.3
   Scope: onboarding/auth only. Landing remains frozen.
   ============================================================ */

.onboarding-view .otp-session-send-limited #emailSubmit,
.onboarding-view .otp-session-send-limited #emailResend,
.onboarding-view .otp-session-send-limited #phoneSubmit,
.onboarding-view .otp-session-send-limited #phoneResend{
  opacity:.48!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
}

.onboarding-view .otp-session-send-limited #emailInput,
.onboarding-view .otp-session-send-limited #phoneNumber,
.onboarding-view .otp-session-send-limited #phoneCountry{
  opacity:.62;
  cursor:not-allowed;
}


/* MJA_MARKET_GATE_V3_1 */
.market-gate-step{max-width:720px;margin:0 auto;padding:6px 0 4px}
.market-gate-card{display:grid;gap:12px}
.market-gate-card h2{margin:0;font-size:30px;line-height:1.15}
.market-gate-card>p{margin:0;color:#63736b;line-height:1.55}
.market-gate-country{display:grid;gap:7px;font-weight:600}
.market-gate-country select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #cdd9d2;border-radius:10px;background:#fff;font:inherit;color:inherit}
.market-gate-confirm-row{margin-top:4px;align-items:flex-start}
.market-gate-confirm-row input{margin-top:3px}
.market-gate-note{margin:8px 0 12px;color:#718078;font-size:13px;line-height:1.45}
.market-gate-unavailable{margin-top:4px;padding:14px 15px;border:1px solid #dde6e1;border-radius:12px;background:#f8faf9}
.market-gate-unavailable strong{display:block;margin-bottom:5px;font-size:16px}
.market-gate-unavailable p{margin:0 0 12px;color:#63736b;line-height:1.5}
.market-gate-actions{display:flex;gap:9px;flex-wrap:wrap}
.market-gate-status{min-height:20px;margin:2px 0 0;font-size:13px;color:#63736b}
.market-gate-status.error{color:#9b3c3c}
#marketGateContinue:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:640px){
  .market-gate-card h2{font-size:24px}
  .market-gate-actions{display:grid;grid-template-columns:1fr}
  .market-gate-actions .button{width:100%}
}


/* MJA_REFERRAL_PILOT_GATE_V1 */
.referral-step{max-width:560px;margin:0 auto;}
.referral-step .text-link{margin-top:18px;}
.referral-dialog-card{max-width:440px;text-align:center;}
.referral-code-box{margin:18px 0 12px;padding:14px;border:1px solid #d8dde5;border-radius:12px;background:#f7f9fc;}
.referral-code-box code{font-size:1.3rem;font-weight:700;letter-spacing:.08em;}
.referral-share-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.referral-qr{display:block;width:220px;height:220px;max-width:70vw;margin:18px auto 10px;border-radius:12px;background:#fff;}
.referral-usage{margin:8px 0 0;color:#5f6672;}